My Vue projects contains, in the public folder, a large index.html. Currently it is simply copied to the output folder when I build my project as described here.
How can I get webpack to minify it too like it does for all my other files?
I added this to my vue.config.js
module.exports = {
chainWebpack: config => {
config
.plugin('html')
.tap(args => {
if (process.env.NODE_ENV === 'production')
args[0].minify = {
minifyCSS: true,
minifyJS: true,
minifyURLs: true,
removeComments: true,
collapseWhitespace: true,
collapseBooleanAttributes: true,
removeScriptTypeAttributes: true,
removeAttributeQuotes: true,
removeEmptyAttributes: true,
removeStyleLinkTypeAttributes: true
};
return args;
})
},
... // Other configs
}
More details here
Related
I am trying to create a production build with the following configureWebpack but Terser doesnt run during build.
Code is not minimized or uglified. Ialso tried hidden-source-map
Using "terser-webpack-plugin": "^5.3.3" with #vue/cli#5.0.7
isProd is correctly set to true.
const TerserPlugin = require('terser-webpack-plugin');
const isProd = process.env.NODE_ENV === 'production';
module.exports = {
publicPath: '/',
devServer: {
host: 'staging-beta.myDomain.com',
port: 9000,
allowedHosts: 'all',
},
transpileDependencies: ['vuetify'],
chainWebpack: (config) => {
// reducted code
},
configureWebpack: {
devtool: 'source-map',
optimization: {
minimize: isProd,
minimizer: isProd
? [
new TerserPlugin({
minify: TerserPlugin.uglifyJsMinify,
terserOptions: {
compress: {
drop_console: true,
},
output: {
comments: false,
},
},
}),
]
: [],
},
},
};
The correct setup is:
module.exports = defineConfig({
terser: {
minify: 'uglifyJs',
terserOptions: {
compress: {
drop_console: true,
},
},
},
})
You also need to npm install uglify-js
comments under output is deprecated.
I used to have this in vue.config.js but it no longer works after latest upgrade of vue or its deps:
chainWebpack: config => {
// disable eslint nag screen when building for different environments
if (!isProduction) config.module.rules.delete('eslint');
}
There is a part of the docs of vue-cli that says I can do this:
devServer: {
overlay: {
warnings: false,
errors: false
},
But it says overlay is not a valid option
Vue CLI 5 uses Webpack 5, which has moved devServer.overlay to devServer.client.overlay:
// vue.config.js
const { defineConfig } = require('#vue/cli-service')
module.exports = defineConfig({
devServer: {
client: {
overlay: {
warnings: false,
errors: false,
},
// or
overlay: false,
}
}
})
Here is my vue.config.js file. I have followed the instructions given here: https://github.com/JayeshLab/demo-vue-console-log-removal
Still I can see logs in browser, what else am I missing?
const TerserPlugin = require("terser-webpack-plugin");
const isProd = true
module.exports = {
lintOnSave: false,
devServer: {
proxy: 'http://localhost:3000/'
},
chainWebpack: config => {
config.module
.rule('vue')
.use('vue-loader')
.tap(args => {
})
},
configureWebpack: {
optimization: {
minimize: true,
minimizer: isProd ? [
new TerserPlugin({
terserOptions: {
compress: {
drop_console: true
},
output: {
comments: false
}
}
})
] : []
}
}
}
Managed to solve it by changing babel.config.js configuration. Added transform-remove-console plugin
const removeConsolePlugin = []
if(process.env.NODE_ENV == 'staging' || process.env.NODE_ENV == 'production') {
removeConsolePlugin.push("transform-remove-console")
}
module.exports = {
presets: [
'#vue/cli-plugin-babel/preset'
],
plugins: removeConsolePlugin
}
Normally, Vue CLI with vue.config.js places the .js and .css assets in /dist/[css|js]/. However, I want the .js and .css files in the root dist folder.
I can get the .js file in the root folder with the following config:
module.exports = {
productionSourceMap: false,
filenameHashing: false,
configureWebpack: {
optimization: {
splitChunks: false
}
},
chainWebpack: config => {
config.externals({
...config.get("externals"),
moment: "moment"
});
config.output.filename("[name].js");
}
};
How do I do this with the .css file?
This can be accomplished with the following Vue CLI config (from vuejs/vue-cli#1967):
// vue.config.js
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',
}
}
}
Having added also a vue.config.js next to my babel.config.js I realized that the code doesn't get transpiled to ES5 anymore, probably because babel.config.js is fully ignored once there's a vue.config.js (?)
How can I keep babel transpiling the code when building with the presets given while yet having a vue.config.js with other configurations?
babel.config.js
module.exports = {
presets: [['#vue/app', { useBuiltIns: 'entry', corejs: 'core-js#2' }]],
}
vue.config.js
const TerserPlugin = require('terser-webpack-plugin')
module.exports = {
configureWebpack: config => {
if (process.env.NODE_ENV === 'production') {
config.optimization.minimizer = [
new TerserPlugin({
terserOptions: {
// needed for vuex-typex to work in production:
keep_fnames: true,
},
}),
]
}
},
css: {
loaderOptions: {
sass: {
data: `#import "./src/core/style/core/_variables.scss";`,
},
},
},
runtimeCompiler: true,
}