'webpack, really disable Terser and CSS minification
Webpack by default enables Terser and CSS minification that seem to could not be turned off.
Problem that those minifications do not work correctly and produce results I do not want. For example CSS minification is not removing comments like /*! */ and splitted CSS chunks have huge duplicated includes of vendor libraries (e.g bootstrap-vue).
Trying to disable those not making any results. I am logging webpack config on every production build and this is what I get
chainWebpack: (config) => {
console.log(config.optimization.minimizers.store.keys());
}
// output: { 'terser', 'css' }
console.log(config.optimization.plugins.store.keys());
{
'vue-loader',
'define',
'case-sensitive-paths',
'friendly-errors',
'extract-css', // Why this one is even here ?
'copy'
}
I do not want these modifications. I want optimization of CSS at least be done by postcss plugins like cssnano.
But webpack can not get it set. It runs terser, it is trying to split chunks even I did not ask for this. It is insisting on doing CSS minification by throwing error
Syntax Error: Error: You forgot to add 'mini-css-extract-plugin' plugin (i.e. `{ plugins: [new MiniCssExtractPlugin()] }`), please read https://github.com/webpack-contrib/mini-css-extract-plugin#getting-started
I do not want this plugin. I have not asked for it to be turned on. But webpack is asking for it anyway.
configureWebpack: (webpack) => {
return {
resolve: RESOLVE,
mode: 'production',
stats: {warnings: false},
optimization: {
minimizer: [],
minimize: false,
chunkIds: false,
runtimeChunk: 'single',
removeEmptyChunks: true,
mergeDuplicateChunks: true,
removeAvailableModules: true,
flagIncludedChunks: false,
},
//MODULE config
module: {
rules: [
//process scss
{
test: /\.s|css$/,
use: [
"postcss-loader",
'sass-loader'
],
},
],
},
output: {
path: path.resolve(__dirname, 'dist'),
filename: '[name].bundle_[fullhash].js',
clean: true,
},
plugins: [
new NodePolyfillPlugin(),
//create standard index.html file
new HtmlWebpackPlugin({
template: 'public/index.html',
}),
],
entry: {
index: './src/main.js',
},
}
},
Sources
This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.
Source: Stack Overflow
| Solution | Source |
|---|
