0

目前，我已经编写了一个 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 改变计算吗？

4

1 回答 1

0

在 scss 加载器中，我添加了 -minimize

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

它工作得很好。

此外，我发现在 webpack2 中，uglyfyJs 的效果非常好。不要以为未来会有很多人想到它。

于 2017-03-01T07:40:44.977 回答