Question

目前，我已经编写了一个webpack任务来编译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')(),
    ],
};

是否有一些方法可以防止uglyfyJs改变计算？

Answer 1

在scss loader中，我添加了-minimize

scss: 'style!css?-minimize!postcss!sass',

它工作得很好。

更多，我发现在webpack2中，uglyfyJs的效果非常好。不要以为将来很多人会发生这种情况。

Webpack和Vue 2.0 UglifyJsPlugin scss calc转换问题

1 个答案: