new webpack.HashedModuleIdsPlugin()这个到底是干啥的(webpack2)?

发布于 2022-09-04 15:53:32 字数 1552 浏览 18 评论 0

假如配置文件是这样的:

    //入口文件
    entry: {
        index: './src/js/entry1.js',
        about: './src/js/entry2.js',
        vendor: ['./src/js/content/a.js']
    },
    //输出目录
    output: {
        path: path.resolve(__dirname, 'dist'),
        filename: 'js/[name]-[chunkhash:6].js',
        chunkFilename: 'js/[name]-[chunkhash:6].js',
        publicPath: '/dist/'
    },

还分离了css并抽离公共js/CSS部分

    plugins: [
        new webpack.optimize.CommonsChunkPlugin({
            name: 'vendor'
        }),
        new ExtractTextPlugin('css/[name]-[contenthash:6].css'),
        new webpack.HashedModuleIdsPlugin()
    ]

然后先打包一次,出现了一个dist文件夹

-dist
  -css
    -index-hash6.css
    -about-hash6.css
    -vendor-hash6.css
  -js
    -index-hash6.js
    -about-hash6.js
    -vendor-hash6.js

现在修改一下entry1.js文件,再打包
发现得到2个新文件:

    -index-hash6(被改变).js
    -vendor-hash6(被改变).js

发现vendor.js的hash还是跟着引入它的entry1,js文件变化了

再修改css文件,发现引入css文件的js的hash并没有改变,只有被修改的css的hash变化了,这个倒是和webpack1不同了。。但是这个不需要new webpack.HashedModuleIdsPlugin()也能实现。

看打包后的代码,变化就是:

__webpack_require__(0);

__webpack_require__(3);

这些chunkID变成了英文字母

__webpack_require__("jcZh");

__webpack_require__("A0gR");

所以new webpack.HashedModuleIdsPlugin()到底是干啥用的?

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(2

甜柠檬 2022-09-11 15:53:32

https://sebastianblade.com/us...这篇文章,好像有说到,看看有没有帮助

夏夜暖风 2022-09-11 15:53:32

现在改成这样。。vendor的hash是不会随entry1.js变动了,但是manifest.js又跟着变了。。

        new webpack.optimize.CommonsChunkPlugin({
            names: ['vendor', 'manifest'],
            minChunks: Infinity
        }),

虽然manifest并不需要替换了。。但是每次都生成一个新的manifest好多余啊。。

~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文