[英]How to use uglifyjs to minify and compress css/scss in webpack/vue cli?
I have vue application with the cli.我有带有 cli 的 vue 应用程序。 I want to use uglifyjs plugin .我想使用uglifyjs 插件。
So I add this code to my vue.config.js:所以我将此代码添加到我的 vue.config.js 中:
configureWebpack: {
optimization: {
minimizer: [
new UglifyJsPlugin({
uglifyOptions: {
warnings: false,
parse: {},
compress: {},
mangle: true, // Note `mangle.properties` is `false` by default.
output: null,
toplevel: false,
nameCache: null,
ie8: false,
keep_fnames: false,
},
}),
],
},
I want to compress all the css that exist in *.scss and *.vue files.我想压缩 *.scss 和 *.vue 文件中存在的所有 css。 How to configure UglifyJsPlugin
to compress and minify?如何配置UglifyJsPlugin
来压缩和缩小? for example, I have this selector: .some-thing
the output should be: .x
.例如,我有这个选择器: .some-thing
输出应该是: .x
。
Here what is not working:这里有什么不起作用:
app.vue应用程序
<template>
<div class="some">appp</div>
</template>
<script>
export default {
name: 'App',
};
</script>
<style lang="scss" scoped>
.some { border:1px solid red;}
</style>
I run this command (which vue cli build):我运行这个命令(哪个 vue cli build):
npm run build (for production).
My full vue.config.js:我的完整 vue.config.js:
const merge = require('lodash/merge');
const UglifyJsPlugin = require('uglifyjs-webpack-plugin');
module.exports = {
css: {
loaderOptions: {
sass: {
prependData: `
@import "~@/sass/mixins.scss";
`,
},
},
},
configureWebpack: {
optimization: {
minimizer: [
new UglifyJsPlugin({
uglifyOptions: {
warnings: false,
parse: {},
compress: {},
mangle: true, // Note `mangle.properties` is `false` by default.
output: null,
toplevel: false,
nameCache: null,
ie8: false,
keep_fnames: false,
},
}),
],
},
},
};
The css/app.css is with the following content: css/app.css 的内容如下:
.some[..] {border:1px solid red;}...
** Edit ** After @Tony Ngo answer: ** 编辑 ** @Tony Ngo 回答后:
const LodashModuleReplacementPlugin = require('lodash-webpack-plugin');
const UglifyJsPlugin = require('uglifyjs-webpack-plugin');
const OptimizeCSSAssetsPlugin = require('optimize-css-assets-webpack-plugin');
const CompressionPlugin = require('compression-webpack-plugin');
module.exports = {
css: {
loaderOptions: {
sass: {
prependData: `
@import "~@/sass/mixins.scss";
`,
},
},
},
configureWebpack: {
optimization: {
minimizer: [
new UglifyJsPlugin({
cache: true,
parallel: true,
sourceMap: false,
extractComments: 'all',
uglifyOptions: {
compress: true,
output: null,
},
}),
new OptimizeCSSAssetsPlugin({
cssProcessorOptions: {
safe: true,
discardComments: {
removeAll: true,
},
},
}),
],
},
plugins: [
new CompressionPlugin({
test: /\.(js|css)/,
}),
new UglifyJsPlugin(),
],
},
chainWebpack: (config) => {
// nothing here yet
},
};
Still .some
is in my app.css bundle. .some
仍然在我的 app.css 包中。 I want to minify and compress so I expect to something like .x
我想缩小和压缩,所以我希望像.x
You can view my full code here你可以在这里查看我的完整代码
Here is the base setup you will need to uglify your code这是您丑化代码所需的基本设置
module.exports = {
optimization: {
minimizer: [
new UglifyJsPlugin({
cache: true,
parallel: true,
sourceMap: false,
extractComments: 'all',
uglifyOptions: {
compress: true,
output: null
}
}),
new OptimizeCSSAssetsPlugin({
cssProcessorOptions: {
safe: true,
discardComments: {
removeAll: true,
},
},
})
]
},
plugins: [
new MiniCssExtractPlugin({
filename: "[name].css",
chunkFilename: "[id].css"
}),
new CompressionPlugin({
test: /\.(js|css)/
}),
new UglifyJsPlugin(),
],
module: {
rules: [{
test: /\.scss$/,
use: [
'style-loader',
MiniCssExtractPlugin.loader,
{
loader: "css-loader",
options: {
minimize: true,
sourceMap: true
}
},
{
loader: "sass-loader"
}
]
},
{
test: /\.(js|jsx)$/,
exclude: /node_modules/,
loader: ["babel-loader", "eslint-loader"]
},
{
test: /\.(jpe?g|png|gif)$/i,
loader: "file-loader"
},
{
test: /\.(woff|ttf|otf|eot|woff2|svg)$/i,
loader: "file-loader"
}
]
}
};
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.