带有 uglify 的 webpack 结合 sass 加载器会出错，否则工作正常

Question

我有一个 webpack 配置可以毫无问题地编译我所有的 es2015。它被丑化了，等等

配置如下：

const webpack = require('webpack');
const ExtractTextPlugin = require('extract-text-webpack-plugin');
const nodeEnv = process.env.NODE_ENV || 'production';

module.exports = {
    devtool: 'source-map',
    entry: {
      filename: './src/index.js'
    },
    // entry: ['./src/index.js', './src/scss/main.scss'],
    output: {
        filename: './app/index.min.js'
    },
    module: {
        loaders: [{
            test: /\.js$/,
            exclude: /node_modules/,
            loader: 'babel-loader',
            query: {
                presets: [
                    ['es2015', { 'modules': false }]
                ]
            }
        }]//,
        // rules: [{
        //     test: /\.css$/,
        //     use: ExtractTextPlugin.extract({
        //         use: 'css-loader?importLoaders=1',
        //     }),
        // }, {
        //     test: /\.scss$/,
        //     use: ExtractTextPlugin.extract({
        //         fallback: 'style-loader',
        //         use: ['css-loader', 'sass-loader'],
        //         publicPath: '/app'
        //     })
        // }]
    },
    plugins: [
        new webpack.DefinePlugin({
            'proccess.env': { NODE_ENV: JSON.stringify(nodeEnv) }
        }),
        // new ExtractTextPlugin({
        //     filename: './app/main.css',
        //     disable: false,
        //     allChunks: true
        // }),
        new webpack.optimize.UglifyJsPlugin({
            compress: { warnings: false },
            output: { comments: false },
            sourceMap: true
        })
    ]
}

但是当我取消插件和加载程序的注释并替换入口文件时，我从 uglifyjs 收到错误消息：

ERROR in ./app/index.min.js from UglifyJs
Invalid assignment [./src/js/modules/requests.js:19,0][./app/index.min.js:2083,38]

正确的是，它不知道如何处理 => 函数。但是为什么额外的加载器会打乱加载器的顺序（现在假设这是问题所在）？始终开放以寻求更好的方法来解决此问题或者可能是一个很好的例子（找不到我自己）

Answer 1

您同时使用了 module.rules 和 module.loaders。当 webpack 看到 module.rules 时，它会完全忽略 module.loaders，这意味着您的 .js 规则不存在，因此您根本不会转换 JavaScript。 module.loaders 仅出于兼容性原因而存在，您应该只使用 module.rules.

module: {
    rules: [{
        test: /\.js$/,
        exclude: /node_modules/,
        loader: 'babel-loader',
        options: {
            presets: [
                ['es2015', { 'modules': false }]
            ]
        }
    }, {
        test: /\.css$/,
        use: ExtractTextPlugin.extract({
            use: 'css-loader?importLoaders=1',
        })
    }, {
        test: /\.scss$/,
        use: ExtractTextPlugin.extract({
            fallback: 'style-loader',
            use: ['css-loader', 'sass-loader'],
            publicPath: '/app'
        })
    }]
}

带有 uglify 的 webpack 结合 sass 加载器会出错，否则工作正常

webpack with uglify combined with sass loaders give an error, otherwise works fine

javascript

uglifyjs

ecmascript-6

webpack