Проблема преобразования вычислений Webpack и Vue 2.0 UglifyJsPlugin scss

В настоящее время я написал задачу веб-пакета для компиляции файлов 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?


person Heath Yang    schedule 28.02.2017    source источник


Ответы (1)


В загрузчике scss я добавил -minimize

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

и это работает очень хорошо.

Более того, я обнаружил, что в webpack2 uglyfyJs работает очень хорошо. Не думайте, что многим это придет в голову в будущем.

person Heath Yang    schedule 01.03.2017