如何使用 webpack4 禁用块（代码拆分）？答案

【问题标题】：How can I disable chunk(code splitting) with webpack4?如何使用 webpack4 禁用块（代码拆分）？
【发布时间】：2019-09-23 10:07:27
【问题描述】：

我创建了 react 项目：yarn create react-app。我正在使用 webpack 4.29.6，反应 16.8.6。

我想禁用代码拆分，因为我只需要 build/static/js 文件夹中的一个“main.js”文件。（我已经从他们的名字中删除了哈希。）

我试过了：

new webpack.optimize.LimitChunkCountPlugin({
    maxChunks: 1
  }),

和

      splitChunks: {
        chunks: 'all',
        name: false,
        cacheGroups: {
          default:false
        }
      }

但是这些解决方案给了我这些文件：

build
  /static
   /js
   -2.chunk.js
   -2.chunk.js.map
   -main.chunk.js
   -main.chunk.js.map
   -runtime~main.js
   -runtime~main.js.map

我认为 runtime~main.js 文件和 .map 文件还可以，但我想要没有块的确切的“main.js”文件，没有 2.chunk.js。如何禁用 webpack 4 的默认代码拆分？

【问题讨论】：

嗨，这个问题有解决办法吗？
@Kishore Barik 是的，但我不确定这是否是理想的解决方案。我刚刚删除了所有与块相关的选项。
是否就像拥有 1 个输入和 1 个输出文件一样简单？ webpack.js.org/guides/code-splitting

标签： reactjs webpack

【解决方案1】：

如果您使用 create-react-app 创建项目但尚未弹出，则您目前有两个可用选项：

选项 1 - 创建自定义构建脚本

首先，安装包rewire作为依赖：

npm install rewire

创建一个scripts 文件夹，在里面创建一个新文件并为其命名，例如build-non-split.js，然后添加：

const rewire = require('rewire');
const defaults = rewire('react-scripts/scripts/build.js');
let config = defaults.__get__('config');

config.optimization.splitChunks = {
    cacheGroups: {
        default: false,
    },
};

config.optimization.runtimeChunk = false;

修改package.json，在"scripts" 内部并将build 替换为：

"build": "node ./scripts/build-non-split.js",

最后，运行npm run build 或yarn build

选项 2 - 安装包 react-app-rewire-disable-chunks

注意：如果您选择此选项，请不要忘记将 build 脚本替换为 react-app-rewired。像这样：

"build": "react-app-rewired build",

来源：Disabling code splitting in CRA2 #5306

【讨论】：

【解决方案2】：

plugins: [
    new webpack.optimize.LimitChunkCountPlugin({
        maxChunks: 1
    })
]

试试这是否可行。手动安装这个LimitChunkCountPlugin

https://webpack.js.org/plugins/limit-chunk-count-plugin/

【讨论】：