webpack基础配置

基础配置

【mode】：模式，开发模式 ,生产模式

【watch】：是否启用文件监听，自动打包，默认为false，只有设置为true了，watchOptions才有意义

【watchOptions】：开启监听后的设置

【entry】：入口

【output】：输出

【module】：rules

【plugins】：插件

【devServer】：开发服务模式下的配置

mode

development：开发模式

production：生产模式

none：无配置

可通过执行webpack的时候传入：

webpack --model=production

我们可以在业务代码中通过process.env.NODE_ENV拿到环境变量值，这里的process.env.NODE_ENV 要跟node的区分，这句等同于

new webpack.DefinePlugin({ "process.env.NODE_ENV": JSON.stringify("development") })

watch

是Boolean值，默认为false，开启后watchOptions才有作用

watchOptions

watch开启后的配置，为对象

ignored：监听时忽略的文件，或文件夹，支持正则匹配

aggregateTimeout： 监听到变化发生后等300ms再去执行，默认为300ms

poll：判断文件是否发生变化是通过不停询问系统指定文件有没有变化实现的，默认每秒问1000次

entry

入口文件配置，类型可以为字符串或者对象

字符串：单文件入口

entry: "./src/index.js"

对象：多文件入口

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

output

输出文件配置，类型为对象

属性

path： 输出路径

filename：字符串

多文件输出配置

output: {
     path: path.resolve(__dirname, "dist"),
     filename: "[name].js",
}

path对象：const path = require("path");

module

类型为对象

属性：

rules：数组，配置各种loader，一个loader配置一个对象

 module: {
            rules: [ 
                  {
                        test: /.js$/,
                        use: "babel-loader", // 转ES6以上的代码
                  },
                  {
                        test: /.css$/,
                        use: ["style-loader", "css-loader"], // 链式调用（从右向左），所以这里先使用css-loader解析再使用style-loader解析
                  },
                  {
                        test: /.less$/,    
                        use: ["style-loader", "css-loader", "less-loader"],// 解析less文件
                  },
                  {
                        test: /.(woff|woff2|eot|ttf|otf)$/,
                        use: "file-loader", // 解析文件
                  },
                  {
                        test: /.(png|jpg|gif|jpeg)$/,
                        use: [
                              {
                                    loader: "url-loader",
                                    options: {
                                          limit: 10240,
                                    },
                              },
                        ],  // url-loader 解析图片文件，当小于10k的时候就转为base64
                  },
            ],
      },

plugins

插件，类型为数组

plugins: [new webpack.HotModuleReplacementPlugin()]

devServer

开发模式配置，类型为对象

属性：

contentBase: 开启后默认的位置

hot：是否启用热更新

devServer: {
            contentBase: "./dist", // 目录位置
            hot: true, // 开启热更新
}