webpack的常用配置

原文地址

1. 模块热替换

参考地址-官网

1.1 启用 HMR

启用此功能需要更新 webpack-dev-server 的配置，和使用 webpack 内置的 HMR 插件。

webpack.config.js

module.exports = {
   
    // ...
    devServer: {
   
        // ...
        hot: true
    }
};

worker.js

if (module.hot) {
   
  	module.hot.accept('./print.js', function() {
   
        console.log('Accepting the updated printMe module!');
        printMe();
  	})
}

注意点

1.2 HMR 修改样式表

CSS 的模块热更新，借助于 style-loader 。

2. Tree shaking

参考1-官网，参考2-博客

2.1 sideEffects

• false ，所有文件代码都没有副作用
• 数组，指定文件代码是有副作用

「副作用」的定义是，在导入时会执行特殊行为的代码，而不是仅仅暴露一个 export 或多个 export。举例说明，例如 polyfill，它影响全局作用域，并且通常不提供 export。有副作用的不能tree sharking!

注意，任何导入的文件都会受到 tree shaking 的影响。这意味着，如果在项目中使用类似 css-loader 并导入 CSS 文件，则需要将其添加到 side effect 列表中，以免在生产模式中无意中将它删除。

{
   
  "name": "your-project",
  "sideEffects": [
    "./src/some-side-effectful-file.js",
    "*.css"
  ]
}

还可以在 module.rules 配置选项 中设置 "sideEffects"

2.2 压缩输出

从 webpack 4 开始，也可以通过 "mode" 配置选项轻松切换到压缩输出，只需设置为 "production"。

webpack.config.js

module.exports = {
   
  // ...
  mode: "production"
};

2.3 tree sharking 条件

• 使用 ES2015 模块语法（即 import 和 export）
• 在项目 package.json 文件中，添加一个 sideEffects入口
• 引入一个能够删除未引用代码(dead code)的压缩工具(minifier)（例如 UglifyJSPlugin, webpack4 开始可以设置 mode: "production"来代替）

3. devtool

参考-官网

生产环境，在使用 uglifyjs-webpack-plugin 时，你必须提供 sourceMap：true 选项来启用 source map 支持。

鼓励你在生产环境中启用 source map，因为它们对调试源码(debug)和运行基准测试(benchmark tests)很有帮助。

3.1 对于开发环境

• eval - 映射到转换后的代码
• eval-source-map - 行数能够正确映射，会映射到原始代码中。
• cheap-eval-source-map - 类似 eval-source-map，每个模块使用 eval() 执行。这是 “cheap(低开销)” 的 source map，因为它没有生成列映射(column mapping)，只是**映射行数。它会忽略源自 loader 的 source map，**并且仅显示转译后的代码，就像 eval devtool。
• cheap-module-eval-source-map - 类似 cheap-eval-source-map，并且