Question

我用以下命令创建了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文件都可以，但是我想要没有块，没有2.chunk.js的确切“ main.js”文件。如何禁用webpack 4的默认代码拆分？

Answer 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

Answer 2

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

尝试一下是否可行。手动安装LimitChunkCountPlugin

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

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

2 个答案: