Lỗi Webpack Uglify trong CSS

Question

Im nhấn mạnh cố gắng làm cho Uglify làm việc với dự án của tôi, trước đây tôi đã sử dụng Uglify và không đưa ra vấn đề nhưng bây giờ tôi nghĩ đó là SASS có liên quan.

ERROR in ./~/css-loader!./~/sass-loader!./app/scss/global-header.scss 
    Module build failed: TypeError: Cannot read property '4' of undefined 
     at reduce (/Users/contractor/centralefcom-global-components/node_modules/postcss-reduce-transforms/dist/index.js:121:23) 
     at walk (/Users/contractor/centralefcom-global-components/node_modules/postcss-value-parser/lib/walk.js:7:22) 
     at ValueParser.walk (/Users/contractor/centralefcom-global-components/node_modules/postcss-value-parser/lib/index.js:18:5) 
     at /Users/contractor/centralefcom-global-components/node_modules/postcss-reduce-transforms/dist/index.js:131:75 
     at /Users/contractor/centralefcom-global-components/node_modules/postcss/lib/container.js:92:28 
     at /Users/contractor/centralefcom-global-components/node_modules/postcss/lib/container.js:73:26 
... 
... 

Lỗi này được lặp lại nhiều lần, một lần cho mỗi gói.

Đây là cấu hình webpack của tôi.

var webpack = require('webpack') 
var HtmlWebpackPlugin = require('html-webpack-plugin'); 
var ExtractTextPlugin = require('extract-text-webpack-plugin'); 
var path = require('path'); 

module.exports = { 
    context: __dirname, 
    resolve: { 
    modulesDirectories: ['node_modules', 'bower_components'] 
    }, 
    entry: { 
    'all': [ 
     './app/global-all.js', 
     './app/scss/global-all.scss' 
    ], 
    'footer': [ 
     './app/global-footer.js', 
     './app/scss/global-footer.scss' 
    ], 
    'header': [ 
     './app/global-header.js', 
     './app/scss/global-header.scss' 
    ], 
    'footer.nodeps': [ 
     './app/global-footer-nodeps.js', 
     './app/scss/global-footer-nodeps.scss' 
    ], 
    'header.nodeps': [ 
     './app/global-header-nodeps.js', 
     './app/scss/global-header-nodeps.scss' 
    ], 
    }, 
    output: { 
    path: path.join(__dirname, 'dist'), 
    filename: 'js/global.[name].js', 
    }, 
    module: { 
    loaders: [ 
     { 
     test: /\.scss$/, 
     loader: ExtractTextPlugin.extract('style','css!sass!') 
     }, 
     { 
     test: /\.(woff|woff2|ttf|eot|svg)(\?v=[0-9]\.[0-9]\.[0-9])?$/, 
     loader: 'file?name=/assets/[name].[ext]' 
     }, 
     { 
     test: /\.(jpg|jpeg|png)$/, 
     loader: 'file?name=/assets/[name].[ext]' 
     } 
    ], 
    }, 
    plugins: [ 
    new webpack.EnvironmentPlugin([ 
     'NODE_ENV' 
    ]), 
    new ExtractTextPlugin('css/global.[name].css'), 
    new HtmlWebpackPlugin({ 
     template: 'underscore-template-loader!./app/views/secondary.html', 
     inject: false, 
     filename: 'secondary.html' 
    }), 
     new HtmlWebpackPlugin({ 
     template: 'underscore-template-loader!./app/views/secondary-transparent.html', 
     inject: false, 
     filename: 'secondary-transparent.html' 
    }), 
    new HtmlWebpackPlugin({ 
     template: 'underscore-template-loader!./app/views/secondary-academy.html', 
     inject: false, 
     filename: 'secondary-academy.html' 
    }), 
    new HtmlWebpackPlugin({ 
     template: 'underscore-template-loader!./app/views/hero-stage.html', 
     inject: false, 
     filename: 'hero-stage.html' 
    }), 

    // Only minify in build, check npm tasks 
    new webpack.optimize.UglifyJsPlugin({ 
     sourceMap: false, 
     mangle: false 
    }), 
    ] 
}; 

Nếu tôi nhận xét dòng uglifyJsPlugin, không có lỗi. Nhưng tôi phải giảm thiểu và không có cách nào để chạy, tôi đã thử mangler: giả và không có gì, không hoạt động.

Answer 1

Bạn đang cố chuyển tệp CSS qua plugin UglifyJs, không được hỗ trợ.

Để chỉ uglify nguồn JS của bạn, bạn có thể lọc dựa trên phần mở rộng tệp.

Ví dụ dưới đây sẽ chỉ làm xấu đi các file mà đã có một phần mở rộng .js hoặc .jsx:

new webpack.optimize.UglifyJsPlugin({ 
    sourceMap: false, 
    mangle: false, 
    test: /\.(js|jsx)$/ 
}) 

Answer 2

Bạn đang đặt file SCSS như một phần của điểm nhập của bạn. Trong webpack, thực hành phổ biến hơn là yêu cầu các tệp bạn cần (SCSS khôn ngoan) bên trong các tệp JS của bạn.

// Here, the ExtractTextPlugin will use sass-loader to extract and compile styles 
require('styles.scss'); 

// The rest of your code goes here 
// For instance, app.js 
function someCode() { 
    document.body.style.backgroundColor = 'blue'; 
} 

Sau đó, bạn thiết lập bộ nạp-sass để phát hiện và xử lý các yêu cầu đó mà bạn đã thực hiện với bộ tải sau.

{ 
    test: /\.scss$/, 
    loader: ExtractTextPlugin.extract('style','css!sass!') 
}