ThinkChat🤖让你学习和工作更高效,注册即送10W Token,即刻开启你的AI之旅 广告
## 模块标识符 (Module Identifiers) 首先向项目中再添加一个模块 `print.js`: **src/print.js** ``` export default function print(text) { console.log(text); }; ``` **src/main.js** ``` import _ from 'lodash'; import print from './print'; print('hello webpack!') ``` 再次运行构建,然后我们期望的是,只有 `main` bundle 的 hash 发生变化,然而…… :-: ![](http://xiaoyulive.oss-cn-beijing.aliyuncs.com/%E6%88%AA%E5%9B%BE/QQ%E6%88%AA%E5%9B%BE20180224181524.png) ……我们可以看到这三个文件的 hash 都变化了。这是因为每个 [`module.id`](https://doc.webpack-china.org/api/module-variables#module-id-commonjs-) 会基于默认的解析顺序(resolve order)进行增量。也就是说,当解析顺序发生变化,ID 也会随之改变。因此,简要概括: - `main` bundle 会随着自身的新增内容的修改,而发生变化。 - `vendor` bundle 会随着自身的 `module.id` 的修改,而发生变化。 - `manifest` bundle 会因为当前包含一个新模块的引用,而发生变化。 第一个和最后一个都是符合预期的行为 -- 而 `vendor` 的 hash 发生变化是我们要修复的。幸运的是,可以使用两个插件来解决这个问题。第一个插件是 [`NamedModulesPlugin`](https://doc.webpack-china.org/plugins/named-modules-plugin),将使用模块的路径,而不是数字标识符。虽然此插件有助于在开发过程中输出结果的可读性,然而执行时间会长一些。第二个选择是使用 [`HashedModuleIdsPlugin`](https://doc.webpack-china.org/plugins/hashed-module-ids-plugin),推荐用于生产环境构建: **webpack.config.js** ``` const path = require('path'); const webpack = require('webpack'); const HtmlWebpackPlugin = require('html-webpack-plugin'); const CleanWebpackPlugin = require('clean-webpack-plugin'); module.exports = { entry: { main: './src/main.js', vendor: [ 'lodash' ] }, output: { path: path.resolve(__dirname, '..', 'dist'), filename: '[name].[chunkhash].js' }, plugins: [ new CleanWebpackPlugin(['dist'], { root: path.resolve(__dirname, '..'), exclude: [], verbose: true, dry: false }), new HtmlWebpackPlugin({ title: 'Output Management', filename: 'index.html', template: 'index.html' }), new HtmlWebpackPlugin({ // Also generate a test.html filename: 'static/test.html', // template: 'src/static/test.html' }), new webpack.HashedModuleIdsPlugin(), new webpack.optimize.CommonsChunkPlugin({ name: 'vendor' }), new webpack.optimize.CommonsChunkPlugin({ name: 'manifest' }) ] }; ``` 现在,不管再添加任何新的本地依赖,对于每次构建,`vendor` hash 都应该保持一致。 参考资料: https://doc.webpack-china.org/guides/caching