如何使用 webpack4 禁用塊（代碼拆分）？

Question

我創建了反應項目：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 的默認代碼拆分？

Answer 1

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

試試這是否有效。 手動安裝這個LimitChunkCountPlugin

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

Answer 2

如果您使用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

注意：如果你選擇這個選項，不要忘記用react-app-rewired替換build腳本。 像這樣：

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

來源： 在 CRA2 中禁用代碼拆分 #5306