如何使用HtmlWebpackPlugin将块注入html

Question

如何使用HtmlWebpackPlugin将块注入html

问题是，当我使用HtmlWebpackPlugin和splitChunks时，无法将块注入到生成的html中。我对Webpack 4的配置是

var loading = {
  ejs: fs.readFileSync(path.resolve(__dirname, 'template/loading.ejs')),
  css: fs.readFileSync(path.resolve(__dirname, 'template/loading.css')),
};

module.exports = {
  entry: './main.js',
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'main.[hash].js',
    chunkFilename: '[name].[chunkhash].js',
  },
  mode: 'production',
  // ...
  module: {
    rules: [
      {
        test: /\.(js|jsx)$/,
        include: path.resolve(__dirname, 'src'),
        exclude: path.resolve(__dirname, 'node_modules'),
        use: 'happypack/loader?id=babel',
      },
    ],
  },
  plugins: [
    new CleanWebpackPlugin(['dist']),
    new HappyPack({
      id: 'babel',
      loaders: ['babel-loader?cacheDirectory'],
    }),
    new HtmlWebpackPlugin({
      template: path.resolve(__dirname, 'template/index.ejs'),
      loading: loading,
    }),
    new ScriptExtHtmlWebpackPlugin({
      defaultAttribute: 'defer',
    }),
  ],
  optimization: {
    splitChunks: {
      chunks: 'all',
      name: true,
      automaticNameDelimiter: '-',
      cacheGroups: {
        vendors: {
          test: /[\\/]node_modules[\\/]/,
          priority: -10,
        },
        default: {
          minChunks: 2,
          priority: -20,
          reuseExistingChunk: true,
        },
      },
    },
  },
};

Run Code Online (Sandbox Code Playgroud)

模板index.ejs是

<!DOCTYPE html>
<html lang="en">

<head>
    // ...
    <title>React</title>
    <style>
        <%=htmlWebpackPlugin.options.loading.css %>
    </style>
</head>

<body>
    <div id="root">
        <%= htmlWebpackPlugin.options.loading.ejs %>
    </div>
    <script crossorigin src="https://unpkg.com/react@16/umd/react.production.min.js" defer></script>
    <script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.production.min.js" defer></script>
    <script src="https://cdn.polyfill.io/v2/polyfill.min.js" defer></script>

</body>

</html>

Run Code Online (Sandbox Code Playgroud)

当我运行yarn build，就会产生main.[hash].js，1.[hash].js并index.html。但1.[hash].js不注入html.The HtmlWebpackPlugin的版本是3.2.0.How我能解决这个问题？谢谢！

Answer 1

Win*_*ike -1

因为我使用的是react-loadable，块不会被注入到生成的html中。所以，这不是问题\xe3\x80\x82

\n

归档时间：	7 年，2 月前
查看次数：	1281 次
最近记录：	6 年，3 月前