javascript - 如何禁用 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

你可以使用 webpack 的 LimitChunkCountPlugin 限制代码拆分产生的 block 数:

在您的 webpack.config.js文件:

const webpack = require('webpack');   

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

你也可以 pass the --optimize-max-chunks option到 webpack直接命令。

所以，在你的 package.json文件:

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

现在，当你运行 npm run build , webpack 将只构建一个文件(或“ block ”)。