webpack 最佳配置指北(推荐)(6)

日期：2020-10-09 栏目：程序人生浏览：次

使用 cheap 模式可以大幅提高 souremap 生成的效率。没有列信息（会映射到转换后的代码，而不是映射到原始代码），通常我们调试并不关心列信息，而且就算 source map 没有列，有些浏览器引擎（例如 v8）也会给出列信息。

使用 eval 方式可大幅提高持续构建效率。参考官方文档提供的速度对比表格可以看到 eval 模式的编译速度很快。

使用 module 可支持 babel 这种预编译工具（在 webpack 里做为 loader 使用）。

如果默认的 webpack minimizer 已经被重定义(例如 terser-webpack-plugin )，你必须提供 sourceMap：true 选项来启用 source map 支持。

更多可查看：

九、配置性能 performance

当打包是出现超过特定文件限制的资产和入口点， performance 控制 webpack 如何通知：

module.exports = { // 配置如何显示性能提示 performance: { // 可选 warning、error、false // false：性能设置,文件打包过大时，不报错和警告，只做提示 // warning：显示警告，建议用在开发环境 // error：显示错误，建议用在生产环境，防止部署太大的生产包，从而影响网页性能 hints: false } }

十、配置其它

1. watch 与 watchOptions

watch

监视文件更新，并在文件更新时重新编译：

module.export = { // 启用监听模式 watch: true, }

在 webpack-dev-server 和 webpack-dev-middleware 中，默认启用了监视模式。

或者我们可以在命令行里启动监听（ --watch ）：

webpack --watch --config webpack.config.dev.js

watchOptions

module.export = { watch: true, // 自定义监视模式 watchOptions: { // 排除监听 ignored: /node_modules/, // 监听到变化发生后，延迟 300ms（默认）再去执行动作， // 防止文件更新太快导致重新编译频率太高 aggregateTimeout: 300, // 判断文件是否发生变化是通过不停的去询问系统指定文件有没有变化实现的 // 默认 1000ms 询问一次 poll: 1000 } }

2. externals

排除打包时的依赖项，不纳入打包范围内，例如你项目中使用了 jquery ，并且你在 html 中引入了它，那么在打包时就不需要再把它打包进去：

配置：

module.exports = { // 打包时排除 jquery 模块 externals: { jquery: 'jQuery' } };

3.target

构建目标，用于为 webpack 指定一个环境：

module.exports = { // 编译为类浏览器环境里可用（默认） target: 'web' };

4. cache

缓存生成的 webpack 模块和块以提高构建速度。在开发模式中，缓存设置为 type: 'memory' ，在生产模式中禁用。 cache: true 是 cache: {type: 'memory'} 的别名。要禁用缓存传递 false ：

module.exports = { cache: false }

在内存中，缓存仅在监视模式下有用，并且我们假设你在开发中使用监视模式。在不进行缓存的情况下，内存占用空间较小。

5. name