zoukankan      html  css  js  c++  java
  • webpack打包第三方类库的正确姿势

    webpack 的使用越来越广泛,但其中不乏很多鲜为人知的细节设置,甚至很多人会认为这是 webpack 的 bug。这次,我们就来聊一聊 webpack.optimize.CommonsChunkPlugin。
    这个 plugin 我相信几乎90%的用 webpack 的都用了这个,但我同样相信几乎 90% 的用了这个 plugin 的人都没有正确的使用。

        entry: {
            index: './app/main.jsx',
            vendor: ['react', 'react-dom', 'react-router', 'classnames']
        },
        output: {
            path: path.resolve(__dirname, './dist'),
            filename: "[name].[chunkHash:8].js",
            publicPath: '',
            chunkFilename: "[name].[chunkHash:8].js",
        },
        plugins: [
            new webpack.optimize.CommonsChunkPlugin({
                names: ['vendor'],
            }),
        ]
    
    

    上面这个配置应该大家都不陌生吧?打包第三方 vendor。
    其实这样写是有问题的。有什么问题呢?我们根据这个配置来操作一下。
    首先,运行起来,我们会得到 vendor.js 的添加 hash 值过后的输出;
    然后,修改index入口里面的任意文件,再次编译,得到 vendor.js 的添加 hash 值过后的输出;
    最后,比较 vendor.js 两次编译的hash的值,你会惊讶的发现,为什么hash值改变了?我并没有修改vendor啊。
    hash值改变了,那我们打包这个vendor也就没有意义了。
    置于为什么会造成这个问题,我就不班门弄斧了,想要知道的人自己去研究一下webpack的底层。
    在这里,我只是抛出一个解决方案:

        entry: {
            index: './app/main.jsx',
            vendor: ['react', 'react-dom', 'react-router', 'classnames']
        },
        output: {
            path: path.resolve(__dirname, './dist'),
            filename: "[name].[chunkHash:8].js",
            publicPath: '',
            chunkFilename: "[name].[chunkHash:8].js",
        },
        plugins: [
            new webpack.optimize.CommonsChunkPlugin({
                names: ['vendor', 'manifest'],
            }),
        ]
    
    

    没错,就是上面这个配置,只是简单的加了 'manifest' 。
    再次做我们前面的测试,你会发现多了一个manifest.js,但是vendor的hash值不再变化了。
    点到为止,江湖再见。

  • 相关阅读:
    UOJ #455 [UER #8]雪灾与外卖 (贪心、模拟费用流)
    Codeforces 482E ELCA (LCT)
    Codeforces 798D Mike and distribution (构造)
    AtCoder AGC017C Snuke and Spells
    HDU 6089 Rikka with Terrorist (线段树)
    HDU 6136 Death Podracing (堆)
    AtCoder AGC032D Rotation Sort (DP)
    jenkins+python+kubectl实现批量更新k8s镜像
    Linux 下载最新kubectl版本的命令:
    jenkins X 和k8s CI/CD
  • 原文地址:https://www.cnblogs.com/myqianlan/p/5626505.html
Copyright © 2011-2022 走看看