将所有 JS 合并为一个 bundle.js |网络包 4

Posted 2023-02-16

【中文标题】将所有 JS 合并为一个 bundle.js |网络包 4

【英文标题】：Merge all JS into a single bundle.js | webpack 4

【发布时间】：2021-10-12 09:15:19

【问题描述】：

我正在使用 Vuetify 主题并尝试将所有 JS 代码捆绑到单个 bundle.js 中，但是代码是分块生成的，这里是 vue.config.js 文件

module.exports = 
  chainWebpack: config => 
    
  ,
  configureWebpack: 
    devtool: false,
    mode: 'production',
    entry: './src/main.js',
    optimization: 
      splitChunks: false,
      concatenateModules: true
    ,
    module: 
        rules: [
            
                test: /\.scss$/,
                use: ['style-loader', 'css-loader', 'sass-loader'],
            ,
        ],
    ,
    output: 
      //path: path.resolve(__dirname, 'dist/assets'),
      //outputDir: path.resolve(__dirname, 'dist/private'),
      //formats: ['iife'],
      filename: 'asset/js/[name].js',
      chunkFilename: 'asset/js/[name].js' 
    
  ,
  transpileDependencies: ['vuetify']

package.json

  "name": "@vuetify-themes/material-dashboard-pro",
  "version": "1.2.1",
  "private": true,
  "scripts": 
    "serve": "vue-cli-service serve",
    "dev": "yarn serve",
    "build": "vue-cli-service build",
    "lint": "vue-cli-service lint",
    "postversion": "node scripts/postversion.js"
  ,
  "dependencies": 
    "vue": "^2.6.11",
    "vue-meta": "^2.3.3",
    "vue-router": "^3.1.6",
    "vuetify": "^2.3.13",
    "vuex": "^3.4.0",
    "vuex-pathify": "^1.4.1",
    "vuex-router-sync": "^5.0.0"
  ,
  "devDependencies": 
    "@babel/core": "^7.9.0",
    "@vue/cli-plugin-babel": "^4.3.1",
    "@vue/cli-plugin-eslint": "^4.3.1",
    "@vue/cli-plugin-router": "~4.3.1",
    "@vue/cli-plugin-vuex": "~4.4.0",
    "@vue/cli-service": "^4.3.1",
    "@vue/eslint-config-standard": "^5.1.2",
    "@vuetify/vue-cli-plugin-preset-base": "~0.3.2",
    "archiver": "^4.0.1",
    "babel-core": "7.0.0-bridge.0",
    "babel-eslint": "^10.1.0",
    "compression-webpack-plugin": "^8.0.1",
    "deepmerge": "^4.2.2",
    "dotenv": "^8.2.0",
    "eslint": "^6.8.0",
    "eslint-config-standard": "^14.1.1",
    "eslint-config-vuetify": "^0.6.0",
    "eslint-plugin-import": "^2.20.2",
    "eslint-plugin-node": "^11.1.0",
    "eslint-plugin-promise": "^4.2.1",
    "eslint-plugin-standard": "^4.0.1",
    "eslint-plugin-vue": "^6.2.2",
    "eslint-plugin-vuetify": "^1.0.0-beta.8",
    "lodash": "^4.17.15",
    "mini-css-extract-plugin": "^2.2.0",
    "open": "^7.0.3",
    "sass": "^1.32.13",
    "sass-loader": "^8.0.2",
    "shelljs": "^0.8.4",
    "uglifyjs-webpack-plugin": "^2.2.0",
    "vue-chartist": "^2.3.1",
    "vue-cli-plugin-vuetify": "^2.0.5",
    "vue-template-compiler": "^2.6.11",
    "vuetify-loader": "^1.4.3",
    "webfontloader": "^1.6.28",
    "webpack": "^4.46.0"
  

有没有办法将所有 JS 捆绑在一个文件中，将 CSS 捆绑在一个单独的 CSS 文件中，例如 style.css

这就是我现在得到的。

编辑：

文件名替换为main.js

filename: 'asset/js/main.js'

它显示了这个错误。

可以从这里下载源代码。 https://drive.google.com/file/d/1nMhgr1uphmS9JQnfIi-pHAK1u8l--15y/view?usp=sharing

谢谢

【参考方案1】：

splitChunks 接受一个对象，提供一个您已禁用合并的布尔值。

optimization: 
      // remove this line.
      splitChunks: false,

如果您想配置它，请参阅文档here。默认情况下，它会在超过 250kb 后拆分（对您来说应该没问题）。

【讨论】：

@mathiasgiger 它不起作用，我在这里得到了 splitChunks github.com/vuejs/vue-cli/issues/932 谢谢

【参考方案2】：

尝试将concatenateModules 更改为false 并删除chunkFilename: 'asset/js/[name].js'

【讨论】：

是的，我已经试过了，还是一样，生成大量文件。谢谢

【参考方案3】：

将filename 替换为所需值：

filename: 'asset/js/main.js'

然后在configureWebpack 中删除chunkFilename 并添加：

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

【讨论】：

@MZH 此解决方案适用于从 Vuetify 主题页面下载的项目。