防止JS文件拆分成块（vue cli 4 + webpack）

Question

npm run build

正在创建多个 'chunk' 文件，例如：

/dist/js/app.*.js
/dist/js/chunk-2413.js
/dist/js/chunk-5133.js

我的目标是将它们全部放在一个 app.*.js 文件中！

我在 vue.config.js 中将 'splitChunks' 设置为 false，但是这不会将所有块放在同一个 app.*.js 文件中，因为我导入了一堆将文本文件添加到项目中（我选择文本文件而不是内部配置变量，因为出于应用程序的目的我更喜欢这种格式）。

这是我的代码，它成功地 returns 承诺并将文本文件中的数据加载到 allContents 数组中：

const textFiles = require.context('../assets/textfiles', true, /\.txt$/i);
var self = this;    
var fileContents = textFiles .keys();
fileContents.forEach(function (item, index){
    console.log(item+' - '+index);
    var val = import('raw-loader!../assets/textFiles '+item.replace('.',''));
    val.then( (resp) => {
        console.log(resp.default);
        self.allContents.push(resp.default);
    });
});

来自这些文本文件的数据导致创建 'dist/js/chunk...' 文件。我需要做的是阻止他们那样做——但是怎么做呢？有没有办法阻止这种行为？

更新以包含 vue.config.js：

const ScriptExtHtmlWebpackPlugin = require('script-ext-html-webpack-plugin')

module.exports = {
    publicPath: '',
    productionSourceMap: false,
    css: {
        extract: false,
    },
    configureWebpack: {
        optimization: {
            splitChunks: false
        },
        plugins: [
            new ScriptExtHtmlWebpackPlugin({
                preload: /\.js$/,
                defaultAttribute: 'async'
            })
        ]       
    },
    chainWebpack: config => {
        config.module
          .rule('raw')
          .test(/\.txt$/)
          .use('raw-loader')
          .loader('raw-loader')
          .end()
  }
}

来自块 js 文件之一的示例数据： （它只是加载到一个 txt 文件中，该文件的内容类似于“### Config：### blah blah”）

(window["webpackJsonp"]=window["webpackJsonp"]||[]).push([["chunk-2d0a2dc4"],{"005c":function(e,t,n){"use strict";n.r(t),t["default"]="export default \"##########\r\n# Config:\r\n##########\r\n\r\n$type: Chat\";"}}]);

Answer 1

使用具有 "import" 语法的原始加载程序是使其自动拆分的原因。你的代码中 textFiles 的路径最后有一个 space ，我不知道这是不是错字

var val = import('raw-loader!../assets/textFiles '+item.replace('.',''));

你可以试试改成这样。它可能有助于作为防止分裂的解决方案

fileContents.forEach(function (item, index) {
  console.log(item + ' - ' + index)
  var val = require('raw-loader!./assets/textFiles' + item.replace('.', ''))
  self.allContents.push(val.default)
})

希望对您有所帮助

防止JS文件拆分成块（vue cli 4 + webpack）

Prevent JS files from splitting into chunks (vue cli 4 + webpack)

webpack

vue.js

vue-cli-4