npm run build
Is creating multiple 'chunk' files, such as:
/dist/js/app.*.js
/dist/js/chunk-2413.js
/dist/js/chunk-5133.js
My goal is to have them all within a single app.*.js file!
I've set 'splitChunks' to false in vue.config.js, however this won't put all the chunks in the same app.*.js file, since I'm importing a bunch of text files into the project (I'm opting for text files over internal configuration variables as I prefer this format for the purpose of the application).
Here's my code that successfully returns promises and loads the data from the text files into the allContents array:
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);
});
});
The data from these text files, is causing the 'dist/js/chunk...' files to be created. What I need to is stop them from doing that - but how? Is there a way to stop this behaviour?
Update to include 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()
}
}
Sample data from one of the chunk js files:
(it's just loading in a txt file which has contents like '### 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\";"}}]);
Using raw-loader with "import" syntax is the reason make it autosplitting. And the path to textFiles in your code has a space at the end, I dont know is it a typo
var val = import('raw-loader!../assets/textFiles '+item.replace('.',''));
You can try change to this way. It may help as a workaround solution to prevent splitting
fileContents.forEach(function (item, index) {
console.log(item + ' - ' + index)
var val = require('raw-loader!./assets/textFiles' + item.replace('.', ''))
self.allContents.push(val.default)
})
Hope this help
Related
I'm trying to compile a webcomponent based on the monaco editor (in a lit element context). Having tried a lot of options I now have got the result down to two files
rmx-monaco.abc123.js
style.css
My top priority is to get rid of the hash (abc123), but I would also like to get down to a single file with the js and css in. Thanks in advance
My config reads:
import { resolve } from "path";
export default defineConfig({
base: "/",
build: {
rollupOptions: {
input:
// main: resolve(__dirname, "index.html"),
resolve(__dirname, "src/rmx-monaco.ts"),
output: {
// Prevent vendor.js being created
manualChunks: undefined,
// chunkFileNames: "zzz-[name].js",
// this got rid of the hash on style.css
assetFileNames: "assets/[name].[ext]",
},
},
// Prevent vendor.css being created
cssCodeSplit: false,
// prevent some warnings
chunkSizeWarningLimit: 60000,
},
});
My js entry files has these lines
import * as monaco from "monaco-editor/esm/vs/editor/editor.api";
import { languages } from "monaco-editor/esm/vs/editor/editor.api";
import styles from "monaco-editor/min/vs/editor/editor.main.css";
(I can add more if it would help)
I needed to add output: {entryFileNames: "[name].js",...
Still working on getting a single file
add this:
export default defineConfig({
...
build: {
rollupOptions: {
output: {
entryFileNames: `assets/[name].js`,
chunkFileNames: `assets/[name].js`,
assetFileNames: `assets/[name].[ext]`
}
}
}
})
Long time passed but for future viewers who visit this thread, try this package for single bundled .html file using ViteJS:
https://github.com/richardtallent/vite-plugin-singlefile
version 4.3 of vue cli is in use.
I hope the external css file will be created separately after the build.
I have to use that file somewhere else.
**current result**
root
┗dist
┗css
┗app.dsfe23f.css
┗js
┗app.ds3fe23f.js
┗app.ds1fe23f.map
┗chunk-vendors.ds3fe23f.js
┗chunk-vendors.ds1fe23f.map
┗public
┗index.html
┗src
┗assets
┗css
┗GiftStyle.css
┗router
┗index.js
┗view
┗Home.vue
┗Gift.vue
┗App.vue
┗main.vue
**What I want**
root
┗dist
┗css
┗app.dsfe23f.css
┗GiftStyle.dsf231.css
┗js
┗app.ds3fe23f.js
┗app.ds1fe23f.map
┗chunk-vendors.ds3fe23f.js
┗chunk-vendors.ds1fe23f.map
┗public
┗index.html
┗src
┗assets
┗css
┗GiftStyle.css
┗router
┗index.js
┗view
┗Home.vue
┗Gift.vue
┗App.vue
┗main.vue
*****vue.config.js
const ExtractTextPlugin = require('mini-css-extract-plugin')
module.exports = {
chainWebpack: config => { config.plugin('extract-css').use(ExtractTextPlugin, [{
filename: 'css/[name].css',
allChunks: true
}])
},
configureWebpack:{
},
assetsDir: 'resources'
}
My app used to work fine until I updated VueJS this morning. Now when I build, it shows the following error:
Error: Conflict: Multiple assets emit to the same filename img/default-contractor-logo.0346290f.svg
There's only one file like this in the repo.
Here's my vue.config.js:
module.exports = {
baseUrl: '/my/',
outputDir: 'dist/my',
css: {
loaderOptions: {
sass: {
data: `
#import "#/scss/_variables.scss";
#import "#/scss/_mixins.scss";
#import "#/scss/_fonts.scss";
`
}
}
},
devServer: {
disableHostCheck: true
}
};
I tried webpack fixes recommended in similar cases, but non helped.
I had the same error when importing SVG files using dynamically generated path in the require statement:
const url = require("../assets/svg/#{value}");
<img src={{url}} />
In this case file-loader processes all SVG files and saves them to the output path. My file-loader options were:
{
loader: "file-loader",
options: { name: "[name].[ext]" }
}
The folders structure has duplicate file names, something like this:
assets
|__ one
|____ file.svg
|__ two
|____ file.svg
In this case file-loader saves both file.svg files to the same output file: build/assets/file.svg - hence the warning.
I managed to fix it by adding [path] to the name option:
{
loader: "file-loader",
options: { name: "[path][name].[ext]" }
}
The answer by #ischenkodv is definitely correct, but because of my inexperience with webpack, I needed a little more context to use the information to fix the problem.
For the benefit of anyone else in the same situation, I'm adding the following details which I hope will be useful.
This section of the Vue.js documentation was particularly helpul:
VueJS - Modifying Options of a Loader
For the TL;DR fix, here is the relevant chunk of my vue.config.js:
// vue.config.js
module.exports = {
// ---snip---
chainWebpack: config =>
{
config.module
.rule('svg')
.test(/\.svg$/)
.use('file-loader')
.tap(options =>
{
return { name: "[path][name].[ext]" };
});
}
// ---snip---
};
In my project it was the flag-icon-css NPM package that was causing the Multiple assets emit to the same filename conflict errors. The above update to the vue.config.js file resolved the problem for me.
I suspect that the regular expression in the test could be tightened up to target just the items in the flag-icon-css package rather than matching all SVG files, but I haven't bothered since it's not causing any adverse effects so far.
I am using vue-cli3, when i build using npm run build -- --mode=production, it gives 2 css files and 2 js files.
Everytime i make a code change the name of the file also changes like app.de90cdf7.js and chunk-vendors.a9204242.js.
Is there a way in vue-cli to hardcode the files names as app.js and chunk-vendors.js ?
I'm little late to the party. We can chain webpack to apply name changes.
Using version #vue/cli 5.0.4 in year 2022
const { defineConfig } = require("#vue/cli-service");
module.exports = defineConfig({
transpileDependencies: true,
chainWebpack : (config) => {
config.output.filename('[name].js');
},
css: {
extract: {
filename: '[name].css',
chunkFilename: '[name].css'
}
}
});
I need some assistance or at least to be pointed in the right direction. I am attempting to deploy a vuejs app using Vue CLI 3. When I run the build command the files are built into the dist folder, which works fine. There is also a js and css folder inside dist that contain the respective files. In my index.html is created the paths as /css/app.css or /js/app.js. I want the files to just be placed in the dist folder along with index.html and the paths to read simply app.css or app.js. My goal is to remove the /css/.
I am assuming this is accomplished in the vue.config.js by configuring webpack. I can’t seem to figure this out. I understand the baseURL setting but I can figure this part out..any help would be appreciated.
Thanks
it's answered here
https://github.com/vuejs/vue-cli/issues/1967
basically config should look like this
module.exports = {
chainWebpack: (config) => {
config.module
.rule('images')
.use('url-loader')
.tap(options => Object.assign({}, options, {
name: '[name].[ext]'
}));
},
css: {
extract: {
filename: '[name].css',
chunkFilename: '[name].css',
},
},
configureWebpack: {
output: {
filename: '[name].js',
chunkFilename: '[name].js',
}
}
};