Question

我从来没有在我的项目中使用过这个，但是我在自然界中发现了这个 webpack.make.js 。

此代码：

 config.plugins.push(new CommonsChunkPlugin({
    name: 'vendor',

    // filename: "vendor.js"
    // (Give the chunk a different name)

    minChunks: Infinity
    // (with more entries, this ensures that no other module
    //  goes into the vendor chunk)
}));



   config.output = {
    // Absolute output directory
    path: BUILD ? path.join(__dirname, '/dist/client/') : path.join(__dirname, '/.tmp/'),

    // Output path from the view of the page
    // Uses webpack-dev-server in development
    publicPath: BUILD || DEV || E2E ? '/' : `http://localhost:${8080}/`,
    //publicPath: BUILD ? '/' : 'http://localhost:' + env.port + '/',

    // Filename for entry points
    // Only adds hash in build mode
    filename: BUILD ? '[name].[hash].js' : '[name].bundle.js',

    // Filename for non-entry points
    // Only adds hash in build mode
    chunkFilename: BUILD ? '[name].[hash].js' : '[name].bundle.js'
};

为什么我们使用[hash]和CommonsChunkPlugin？这是什么意思？

我可以使用这些工具获得简单的示例吗？

Answer 1

[hash]由捆绑文件的校验和组成。

当包的内容发生变化时，它会发生变化，否则会保持不变。这对于浏览器缓存优化很有用 - 如果将新版本的JS代码部署到服务器，它将具有与先前版本不同的文件名，并且浏览器将获取最新版本，而不管其缓存设置如何。

→see webpack documentation on long term caching

CommonsChunkPlugin用于将捆绑包拆分为不同的捆绑包以优化加载时间。

想象一下，你有一个带有bundle-a.js的页面A和带有bundle-b.js的页面B.两个包都包含相同的库模块X和Y.您可以创建一个单独的块包，让它称之为bundle-lib.js，它加载在页面A和B上，并包含库模块X和Y.

→see webpack documentation on code splitting

→see webpack documentation on the plugin, with examples

webpack工作如何长期缓存？

1 个答案: