如何禁用 webpack 4 代码拆分？

Question

我正在使用 webpack 4.43.0。

如何防止在 webpack 中发生代码拆分？所有这些文件被创建-0.bundle.js多达11.bundle.js（旁边的预期bundle.js），当我运行webpack。这是我的 webpack 配置：

/* eslint-env node */

const path = require('path');

module.exports = {
    entry: './media/js/src/main.jsx',
    mode: process.env.WEBPACK_SERVE ? 'development' : 'production',
    output: {
        path: path.resolve(__dirname, 'media/js'),
        filename: 'bundle.js'
    },
    resolve: {
        extensions: ['*', '.js', '.jsx']
    },
    module: {
        rules: [
            {
                test: /\.(js|jsx)$/,
                include: path.resolve(__dirname, 'media/js/src'),
                exclude: /node_modules/,
                use: {
                    loader: 'babel-loader',
                    options: {
                        presets: ['@babel/preset-env', '@babel/preset-react']
                    }
                }
            }
        ]
    }
};

Answer 1

您可以使用 webpackLimitChunkCountPlugin来限制代码拆分产生的块数：

在您的webpack.config.js文件中：

const webpack = require('webpack');   

module.exports = {
  plugins: [
    new webpack.optimize.LimitChunkCountPlugin({
      maxChunks: 1
    })
  ],
  ...
};

您也可以直接将--optimize-max-chunks选项传递给webpack命令。

因此，在您的package.json文件中：

{
  "scripts": {
    "build": "webpack --optimize-max-chunks 1",
    ...
  },
  ...
}

现在，当您运行 时npm run build，webpack 将只构建一个文件（或“块”）。