1️⃣ target

  1. module.exports = {
  2.   target:"web" // 默认值
  3. }

设置打包结果最终要运行的环境，常用值有
web：打包后的代码运行在 web 环境中
node：打包后的代码运行在 node 环境中
其他：https://www.webpackjs.com/configuration/target/

1️⃣ module.noParse

不解析正则表达式匹配的模块，通常用它来忽略那些大型的单模块库，以提高构建性能
解释 ：大型的单文件库, 比如 jquery , jquery 的代码我们在使用时打包不需要再次经过 webpack 的解析过程, 就可以设置 **noParse:/jquery/**就可以配置 webpack 在打包时忽略 jquery 的引用, jquery 的代码直接省略掉 webpack 的解析过程, 直接打包

  1. module.exporets = {
  2.     noParse:/jquery/
  3. }

1️⃣ resolve

resolve的相关配置主要用于控制模块解析过程

  1. module.exports = {
  2.   resolve: {
  3.     alias: {
  4.       "@": path.resolve(__dirname, 'src'),
  5.       "_": __dirname
  6.     }
  7.     extensions: ['.js','.json']
  8.     modules: [resolves(__dirname, '../../node_modules'), 'node_modules']
  9.   }
  10. }

2️⃣ alias

配置导入模块的路径别名

  1.   1. 优点：简写路径  
  2.   2. 缺点：写路径没有提示
  1. alias: {
  2.   "@": path.resolve(__dirname, 'src'),
  3.   "_": __dirname
  4. }

有了alias（别名）后，导入语句中可以加入配置的键名，例如**require("@/abc.js")**，webpack 会将其看作是**require(src的绝对路径+"/abc.js")**
在大型系统中，源码结构往往比较深和复杂，别名配置可以让我们更加方便的导入依赖

2️⃣ extensions

配置省略文件路径的后缀名 - 有同名文件时不推荐使用因为文件名一样时会出错

  1. extensions: [".js", ".json"]  // 默认值

当解析模块时，遇到无具体后缀的导入语句，例如**require("test")**，会依次测试它的后缀名

  1.   1. 导入的 test 是 test.js 文件吗？
  2.   2. 如果是导入 test.js  如果不是
  3.   3. 导入的 test 是 test.json 文件吗？
  4.   4. 如果是导入 test.json  如果不是报错

如果有其他的后缀省略会依次遍历测试

2️⃣ modules

  1. modules: ["node_modules"]  // 默认值

当解析模块时，如果遇到导入语句，**require("test")**，webpack 会从下面的位置寻找依赖的模块

  1.   1. 当前目录下的 `**node_modules**` 目录
  2.   2. 上级目录下的 `**node_modules**` 目录

modules 中的目录可更改，更改后 webpack 在解析时就会在更改的目录寻找依赖

1️⃣ externals

  1. module.exports = {
  2.   externals: {
  3.       jquery: "$",
  4.       lodash: "_"
  5.   }
  6. }

从最终的bundle中排除掉配置的配置的源码，例如，入口模块是

  1. //index.js
  2. require("jquery")
  3. require("lodash")

生成的bundle是：

  1. (function(){
  2.     ...
  3. })({
  4.     "./src/index.js": function(module, exports, __webpack_require__){
  5.         __webpack_require__("jquery")
  6.         __webpack_require__("lodash")
  7.     },
  8.     "jquery": function(module, exports){
  9.         //jquery的大量源码
  10.     },
  11.     "lodash": function(module, exports){
  12.         //lodash的大量源码
  13.     },
  14. })

但有了上面的配置后，则变成了

  1. (function(){
  2.     ...
  3. })({
  4.     "./src/index.js": function(module, exports, __webpack_require__){
  5.         __webpack_require__("jquery")
  6.         __webpack_require__("lodash")
  7.     },
  8.     "jquery": function(module, exports){
  9.         module.exports = $;
  10.     },
  11.     "lodash": function(module, exports){
  12.         module.exports = _;
  13.     },
  14. })

这比较适用于一些第三方库来自于外部CDN的情况，这样一来，即可以在页面中使用CDN，又让 bundle 的体积变得更小，还不影响源码的编写

1️⃣ stats

stats控制的是构建过程中控制台的输出内容

  1.   1. [https://webpack.docschina.org/configuration/stats/#root](https://webpack.docschina.org/configuration/stats/#root)
  1. module.exports = {
  2.   //...
  3.   stats: {
  4.       colors: true, // 告知 stats 是否输出不同的颜色（ 控制台的输出带颜色 ）
  5.   }
  6. };