HtmlWebpackPlugin 使用属性块呈现 htmlWebpackPlugin.files.css 空

Question

我的 webpack.config.js 中有以下设置。

我使用 chunks，因为我需要生成的捆绑包按特定顺序出现。

下面的设置有效，但我的捆绑 css 在 htmlWebpackPlugin.files.css 中找不到了。

plugins: [
  new HtmlWebpackPlugin({
    filename: path.join(__dirname, '/dist/app/index.html'),
    favicon: 'assets/favicon.ico',

    chunks: [
      'scripts/jquery.js',
      'scripts/angular.js',
      'scripts/angular-animate.js',
      'scripts/uirouter.js',
      'scripts/app.js',
    ],
    chunksSortMode: 'manual',

    hash: true,
    inject: false,
    title: 'App',
    template: path.join(__dirname, '/index.template'),
  }),
];

我的模板如下所示

<% for (var item in htmlWebpackPlugin.files.css) { %>
<link href="<%= htmlWebpackPlugin.files.css[item] %>" rel="stylesheet">
<% } %> <-------------- empty when I use chunks

<% for (var item in htmlWebpackPlugin.options.chunks ) { %>
<script src="<%= htmlWebpackPlugin.options.chunks[item] %>"></script>
<% } %> <-------------- works, but the output does not have any hash

此外，当我使用 chunks 时，它会使 hash 属性变得无用，因为它不再 post 使用散列修复文件名。

是不是应该这样工作？也就是说，如果我使用 chunks 那么我还需要在其中包含捆绑的 css 文件吗？

已更新

添加了一个小的 example，它产生了我想知道的问题

Answer 1

不需要指定chunks（也不需要顺序），webpack会使用import order作为chunks的顺序

因此，如果您删除 chunks & chunksSortMode & inject: false，HtmlWebpackPlugin 将正确地注入文件。

我已经通过修复向您的存储库提交了 PR。

HtmlWebpackPlugin 使用属性块呈现 htmlWebpackPlugin.files.css 空

HtmlWebpackPlugin use property chunks renders htmlWebpackPlugin.files.css empty

webpack

html-webpack-plugin

HtmlWebpackPlugin 使用 属性 块呈现 htmlWebpackPlugin.files.css 空

HtmlWebpackPlugin use property chunks renders htmlWebpackPlugin.files.css empty

webpack

html-webpack-plugin

HtmlWebpackPlugin 使用属性块呈现 htmlWebpackPlugin.files.css 空