Question

我试图通过在Webpack4中使用优化来创建单个供应商块文件。即使在阅读文档之后，我对命名如何工作有点困惑。

...
output: {
    path: path.resolve(__dirname, 'dist'),
    filename: "RootSite/SiteAssets/js/[Name]_bundle.js",
    libraryTarget: "var",
    library: ["spdict", "[name]"],
},
...
optimization: {
    splitChunks: {
        cacheGroups: {
            vendor: {
                test: /[\\/]node_modules[\\/]/,
                name: "vendor",
                chunks: "all"
            }
        }
    }
},

当我运行webpack --mode development时，它会生成以下文件：

vendor.vendor_bundle.js
vendor.vendor_bundle.js.map

当我运行webpack --mode production时，会生成以下内容：

0.vendor_bundle.js
0.vendor_bundle.js.map

为什么两种模式之间的命名存在差异？

另外，为什么 vendor.vendor_bundle.js 而不仅仅是 vendor_bundle.js ？

Answer 1

[Name]不是webpack可识别模式，这会导致意外行为。尝试：

...
output: {
    path: path.resolve(__dirname, 'dist'),
    filename: "RootSite/SiteAssets/js/[name]_bundle.js",
    libraryTarget: "var",
    library: ["spdict", "[name]"],
},

webpack 4优化dev和prod构建之间的不同块命名

1 个答案: