npm run build

Sedang membuat beberapa file 'potongan', seperti:

  1. /dist/js/app.*.js
  2. /dist/js/chunk-2413.js
  3. /dist/js/chunk-5133.js

Tujuan saya adalah memiliki semuanya dalam satu file app.*.js!

Saya telah menyetel 'splitChunks' ke false di vue.config.js, namun ini tidak akan menempatkan semua potongan di file app.*.js yang sama, karena saya mengimpor banyak file teks ke dalam proyek (saya Saya memilih file teks daripada variabel konfigurasi internal karena saya lebih suka format ini untuk tujuan aplikasi).

Inilah kode saya yang berhasil mengembalikan janji dan memuat data dari file teks ke dalam array 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);
    });
});

Data dari file teks ini, menyebabkan file 'dist/js/chunk...' dibuat. Yang saya butuhkan adalah menghentikan mereka melakukan itu - tetapi bagaimana caranya? Apakah ada cara untuk menghentikan perilaku ini?

Perbarui untuk menyertakan 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()
  }
}

Contoh data dari salah satu file chunk js: (hanya memuat file txt yang isinya seperti '### 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\";"}}]);
0
NAMAssist 24 Mei 2020, 10:41

1 menjawab

Jawaban Terbaik

Menggunakan raw-loader dengan sintaks "impor" adalah alasan membuatnya autosplitting. Dan jalur ke textFiles dalam kode Anda memiliki spasi di bagian akhir, saya tidak tahu apakah itu salah ketik

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

Anda dapat mencoba mengubah dengan cara ini. Ini dapat membantu sebagai solusi solusi untuk mencegah pemisahan

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

Semoga membantu

1
Jake Lam 24 Mei 2020, 09:18