Как добавить куски в html с помощью HtmlWebpackPlugin - PullRequest
Новая
       22

Как добавить куски в html с помощью HtmlWebpackPlugin

0 голосов
/ 04 сентября 2018

Проблема в том, что когда я использую 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,
        },
      },
    },
  },
};

Шаблон 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>

Когда я запускаю yarn build, он генерирует main.[hash].js, 1.[hash].js и index.html. Но 1.[hash].js не вводится в html. Версия HtmlWebpackPlugin - 3.2.0. Как я могу решить эта проблема? Спасибо!

Ответы [ 2 ]

0 голосов
/ 30 июля 2019

Наконец я исправил это, обновив html-webpack-plugin до 4.0.0-alpha и добавив chunks: 'all' к конфигурации плагина: 

      new HtmlWebpackPlugin({
        filename: `${f}.html`,
        template: paths.appHtml,
        inject: true,
        minify: {
          removeComments: true,
          collapseWhitespace: true,
          removeRedundantAttributes: true,
          useShortDoctype: true,
          removeEmptyAttributes: true,
          removeStyleLinkTypeAttributes: true,
          keepClosingSlash: true,
          minifyJS: true,
          minifyCSS: true,
          minifyURLs: true
        },
        chunks: "all"
      })
0 голосов
/ 04 сентября 2018

Поскольку я использую react-loadable, порции не будут вставлены в сгенерированный html. Так что это не проблема。

...