webpack-01

环境

假设你已经安装好了nodejs，npm。

创建项目

mkdir my-project
cd my-project
npm init -y //初始化 生成packge.json
npm i webpack webpack-cli --save-dev  //安装webpack和webpack-cli
./node_modules/.bin/webpack -v  //进入安装目录查看版本

当我们在项目下面安装依赖的时候，会默认在node_modules/.bin目录下面安装一个软连接，然后package.json是可以读取到这个./bin目录下面的命令，所以我们可以在package.json下面"scripts"添加即可。

entry用来指定入口，即源代码

单入口 & 多入口

//单入口entry采用字符串
//多入口entry采用对象
{
  entry:'./src/index.js'
}

{
  entry:{
      index:'./src/index.js',
      search:'./src/search.js'
  }
}

output 指定输出，即文件打包的输出路径，没有单出口和多出口之分，都是在output里面配置

output:{
    path:path.resolve(__dirname,'dist'),
    filename:'[name].js' //多入口的话就使用占位符[name]来区分
 }

loader

webpack原生只支持js和json不支持css ，jsx等其他类型的文件，或字体等，就可以通过loader解析，loader是一个函数

常见loader

loader配置放在module的rules里面,test指定匹配规则，use指定使用的loader名称

module:{
    rules:[
      {test:/\txt$/,use:'raw-loader'}
    ]
}

plugins

用于处理loader无法处理的一些功能，主要是优化

常见plugins

plugins:[
    new HtmlWebpackPlugin({
      template:'./src/index.html'
    })
]

mode

用来指定当前构建环境production（默认）还是development还是none，mode可以使用webpack内置函数

mode内置函数的功能