使用 hash/chunkhash/contenthash 一般会配合 html-webpack-plugin （创建 html ，并捆绑相应的打包文件） 、 clean-webpack-plugin （清除原有打包文件） 一起使用。
2. 打包成库
当使用 webapck 构建一个可以被其它模块引用的库时：
module.exports = { output: { // path 必须为绝对路径 // 输出文件路径 path: path.resolve(__dirname, '../../dist/build'), // 包名称 filename: "[name].bundle.js", // 块名，公共块名(非入口) chunkFilename: '[name].[chunkhash].bundle.js', // 打包生成的 index.html 文件里面引用资源的前缀 // 也为发布到线上资源的 URL 前缀 // 使用的是相对路径，默认为 '' publicPath: 'https://www.jb51.net/', // 一旦设置后该 bundle 将被处理为 library library: 'webpackNumbers', // export 的 library 的规范，有支持 var, this, commonjs,commonjs2,amd,umd libraryTarget: 'umd', } }
三、配置模式 mode（webpack4）
设置 mode ，可以让 webpack 自动调起相应的内置优化。
module.exports = { // 可以是 none、development、production // 默认为 production mode: 'production' }
或在命令行里配置：
"build:prod": "webpack --config config/webpack.prod.config.js --mode production"
在设置了 mode 之后，webpack4 会同步配置 process.env.NODE_ENV 为 development 或 production 。
webpack4 最引人注目的主要是：
减小编译时间
打包时间减小了超过 60%
零配置
我们可以在没有任何配置文件的情况下将 webpack 用于各种项目
webpack4 支持零配置使用，这里的零配置就是指， mode 以及 entry （默认为 src/index.js ）都可以通过入口文件指定，并且 webpack4 针对对不同的 mode 内置相应的优化策略。
1. production
配置：
// webpack.prod.config.js module.exports = { mode: 'production', }
相当于默认内置了：
// webpack.prod.config.js module.exports = { performance: { // 性能设置,文件打包过大时，会报警告 hints: 'warning' }, output: { // 打包时，在包中不包含所属模块的信息的注释 pathinfo: false }, optimization: { // 不使用可读的模块标识符进行调试 namedModules: false, // 不使用可读的块标识符进行调试 namedChunks: false, // 设置 process.env.NODE_ENV 为 production nodeEnv: 'production', // 标记块是否是其它块的子集 // 控制加载块的大小（加载较大块时，不加载其子集） flagIncludedChunks: true, // 标记模块的加载顺序，使初始包更小 occurrenceOrder: true, // 启用副作用 sideEffects: true, // 确定每个模块的使用导出， // 不会为未使用的导出生成导出 // 最小化的消除死代码 // optimization.usedExports 收集的信息将被其他优化或代码生成所使用 usedExports: true, // 查找模块图中可以安全的连接到其它模块的片段 concatenateModules: true, // SplitChunksPlugin 配置项 splitChunks: { // 默认 webpack4 只会对按需加载的代码做分割 chunks: 'async', // 表示在压缩前的最小模块大小,默认值是30kb minSize: 30000, minRemainingSize: 0, // 旨在与HTTP/2和长期缓存一起使用 // 它增加了请求数量以实现更好的缓存 // 它还可以用于减小文件大小，以加快重建速度。 maxSize: 0, // 分割一个模块之前必须共享的最小块数 minChunks: 1, // 按需加载时的最大并行请求数 maxAsyncRequests: 6, // 入口的最大并行请求数 maxInitialRequests: 4, // 界定符 automaticNameDelimiter: '~', // 块名最大字符数 automaticNameMaxLength: 30, cacheGroups: { // 缓存组 vendors: { test: /[\\/]node_modules[\\/]/, priority: -10 }, default: { minChunks: 2, priority: -20, reuseExistingChunk: true } } }, // 当打包时，遇到错误编译，将不会把打包文件输出 // 确保 webpack 不会输入任何错误的包 noEmitOnErrors: true, checkWasmTypes: true, // 使用 optimization.minimizer || TerserPlugin 来最小化包 minimize: true, }, plugins: [ // 使用 terser 来优化 JavaScript new TerserPlugin(/* ... */), // 定义环境变量 new webpack.DefinePlugin({ "process.env.NODE_ENV": JSON.stringify("production") }), // 预编译所有模块到一个闭包中，提升代码在浏览器中的执行速度 new webpack.optimize.ModuleConcatenationPlugin(), // 在编译出现错误时，使用 NoEmitOnErrorsPlugin 来跳过输出阶段。 // 这样可以确保输出资源不会包含错误 new webpack.NoEmitOnErrorsPlugin() ] }
2. development
配置：
// webpack.dev.config.js module.exports = { mode: 'development', }
相当于默认内置了：