如何禁用 webpack 4 代码拆分？

Posted 2023-02-19

【中文标题】如何禁用 webpack 4 代码拆分？

【英文标题】：How do I disable webpack 4 code splitting?

【发布时间】：2020-09-14 19:49:27

【问题描述】：

我正在使用 webpack 4.43.0。

如何防止在 webpack 中发生代码拆分？当我运行 webpack 时，所有这些文件都被创建 - 0.bundle.js 到 11.bundle.js（以及预期的 bundle.js）。这是我的 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']
                    
                
            
        ]
    
;

【问题讨论】：

尝试从扩展中删除'*'

@AntoniSilvestrovič 感谢您的建议，但这并没有解决问题：paste.victor.computer/BkvcgXns8

你确定你没有加载一些其他的 webpack 配置吗？从我在这里看到的情况来看，它不应该进行代码拆分。如果没有，我会尝试重新安装 webpack。

@AntoniSilvestrovič 是的，我很确定。如果您想自己看一下，这是我的项目 - 请参阅 package.json。 github.com/ccnmtl/mediathread

@nnyby 这是一个 React 应用吗？

【参考方案1】：

你可以使用webpack的LimitChunkCountPlugin来限制代码拆分产生的块数：

在您的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 将只构建一个文件（或“块”）。

【参考方案2】：

// Full list of options: https://quasar.dev/quasar-cli/quasar-conf-js#Property%3A-build
build: 
  scopeHoisting: true,
  vueRouterMode: 'history', // available values: 'hash', 'history'
  showProgress: true,
  gzip: false,
  analyze: false,
  distDir: 'dist',
  productName:'pos_host_ui',
  minify:true,
  
  // Options below are automatically set depending on the env, set them if you want to override
  // extractCSS: false,

  // https://quasar.dev/quasar-cli/cli-documentation/handling-webpack
  extendWebpack (cfg) 
      const webpack = require('webpack');   
      cfg.plugins.push(
            new webpack.optimize.LimitChunkCountPlugin(
              maxChunks: 1
                )
      );
      
      cfg.module.rules.push(
        resourceQuery: /blockType=i18n/,
        type: 'javascript/auto',
        use: [
           loader: '@kazupon/vue-i18n-loader' ,
           loader: 'yaml-loader' ,
        ]
      );