Question

我是webpack的新手，正在为传统的服务器端服务的html网站构建一个JS应用程序（只有vanilla JS）。

我对代码拆分，常见块，拆分块和htmlWebpackPlugin块感到困惑。我有一些工作，但我的一些应用程序代码正在捆绑中重复。

这就是我要做的事情（为了便于阅读而省略哈希）：

// ALL pages get this (node_modules stuff)
<script src="/static/vendors.js"></script>

// ALL pages get this (base JS for my app)
<script src="/static/app.js"></script>

// ONLY product pages get this.  This is where I am having problems 
// with modules from app.js getting copied in
<script src="/static/product.js"></script>

我有＆＃34;供应商＆＃34;部分工作了，我把它添加到我的webpack配置：

optimization: {
    splitChunks: {
        cacheGroups: {
          commons: { test: /[\\/]node_modules[\\/]/, name: "vendors", chunks: "all" }
        }
    }
},

我还在产品页面上有条件地包含了product.js软件包，只需将其包含在product.html模板中：

<script src="<%= htmlWebpackPlugin.files.chunks.product.entry %>">

然后在我的webpack配置中：

new HtmlWebpackPlugin({
    inject: false,
    template: './src/templates/product.html',
    filename: `${templates}/product.html`,
    chunks: ['app', 'product']
}),

除了product.js中的重复代码（来自app.js）

之外，这种方式有效

我可能会想到这个错误，但我怎样才能将product.js中的代码转换为引用 app.js中的代码...类似于app.js中的代码引用vendors.js中的代码（而不是将其复制）？

Webpack 4每页代码分割为＆＃34;传统＆＃34;网站

0 个答案: