В настоящее время я написал задачу веб-пакета для компиляции файлов vue.
В рабочем режиме я использую UglifyJsPlugin для минимизации и сжатия index.js, он работает довольно долго.
Однако я обнаружил, что в производственном режиме стиль в scss
width: calc(100% / 3);
превращается в
width: 33.33333%;
что вызовет черную линию на моих страницах.
Я попытался удалить postcss, и это не сработало. Наконец, я обнаружил, что если я удалю UglifyJsPlugin, он будет работать очень хорошо, но файл будет слишком большим, и мне придется уменьшить его с помощью онлайн-сервиса сжатия.
Вот часть задачи webpack
if (process.env.NODE_ENV === 'production') {
const htmlFiles = glob.sync('./dev/*.html');
const htmlPlugins = htmlFiles.map((file, i) =>
new HtmlWebpackPlugin({
filename: path.basename(file),
template: file,
inject: false,
minify:{
removeComments: true,
collapseWhitespace: true,
},
}));
webpackConfig = merge(baseWebpackConfig, {
plugins: [
...htmlPlugins,
new webpack.optimize.UglifyJsPlugin({
compress: {
warnings: false,
drop_console: true,
},
}),
new CopyWebpackPlugin([
{
from: './dev',
},
], {
ignore: [
'*.html',
'router.js',
'style/**/*',
'script/**/*',
'store/**/*',
'vendor/**/*',
'component/**/*',
'data/**/*',
'font/**/*',
]}),
]});
}
и postcss.config.js
module.exports = {
plugins: [
require('postcss-cssnext')({
features: {
calc: false,
},
}),
require('postcss-sorting')(),
],
};
есть ли способ предотвратить изменение calc uglyfyJs?