时间戳

首页 > 解决方案 > 拆分块需要将所有文件加载到索引文件中

javascript - 拆分块需要将所有文件加载到索引文件中

问题描述

我一直在使用本文中关于使用 webpack 进行块拆分的一些代码。https://medium.com/hackernoon/the-100-correct-way-to-split-your-chunks-with-webpack-f8a9df5b7758

我有一个非常简单的 React 模块，我正在测试 Rollup 和 Webpack 捆绑。

import React from 'react';
import { render } from 'react-dom';

render(<div>hello world</div>, document.getElementById('root'));
console.log('hello');

我希望以此为基础并添加额外的模块来测试这两个捆绑器。

通过optimization下面 Webpack 中的设置，我可以将我的包拆分为多个块。

  optimization: {
    runtimeChunk: 'single',
    splitChunks: {
      chunks: 'all',
      maxInitialRequests: Infinity,
      minSize: 0,
      cacheGroups: {
        vendor: {
          test: /[\\/]node_modules[\\/]/,
          name(module) {
            const packageName = module.context.match(/[\\/]node_modules[\\/](.*?)([\\/]|$)/)![1];
            return `npm.${packageName.replace('@', '')}`;
          },
        },
      },
    },
  },
  output: {
    path: path.join(__dirname, 'dist'),
    filename: '[name].bundle.js',
    chunkFilename: '[name].chunk.js',
  },

这会将我的捆绑包分成几个文件。我期望发生的是有一个bundle可以包含在我的 index.html 文件中的主文件，它将加载到其余的块中，但这不起作用。我必须像这样加载每个捆绑文件：

<html>
  <head>
    <title>Example</title>
  </head>
  <body>
    <div id="root"></div>
    <script src="main.chunk.js"></script>
    <script src="npm.object-assign.chunk.js"></script>
    <script src="npm.react-dom.chunk.js"></script>
    <script src="npm.react.chunk.js"></script>
    <script src="npm.scheduler.chunk.js"></script>
    <script src="runtime.bundle.js"></script>
  </body>
</html>

根据这些块的文件名，我希望这可以工作，但它不会：

<html>
  <head>
    <title>Example</title>
  </head>
  <body>
    <div id="root"></div>
    <script src="runtime.bundle.js"></script>
  </body>
</html>

我已经在实际项目中使用过这个 Webpack 配置，之前没有遇到过这样的问题。我没有正确指定配置的捆绑输出吗？

标签： javascriptreactjswebpack

解决方案

我发现自己也遇到了同样的问题。但我认为您正在检查错误的index.html文件。

您必须签入构建文件夹，在您的情况下，它是dist/index.html.

而不是签到public/index.html。

推荐阅读