Webpack引发了Uglify错误

时间:2017-08-07 13:35:30

标签: reactjs webpack

我有以下webpack文件:

const path = require('path');
const webpack = require('webpack');
const ExtractTextPlugin = require('extract-text-webpack-plugin');

module.exports = {
    context: path.resolve(__dirname, './src'),
    entry: {
        app: './app.js'
    },
    output: {
        filename: '[name].bundle.js',
        path: path.resolve(__dirname, './dist/assets'),
        publicPath: '/assets',

    },
    devServer: {
        contentBase: path.resolve(__dirname, './src')
    },
    module: {
        rules: [
            {
                test: /\.js$/,
                exclude: [/node-modules/],
                use: [
                    {
                        loader: 'babel-loader',
                        options: { presets: [ 'es2015' ] }
                    }
                ],
                test: /\.css$/,
                use: ExtractTextPlugin.extract({
                    use: [{
                        loader: 'css-loader',
                        options: { importLoaders: 1 }
                    }]
                }),
                test: /\.(sass|scss)$/,
                use: [
                    'style-loader',
                    'css-loader',
                    'sass-loader'
                ]
            }
        ]
    },
    resolve: {
        modules: [ 
            path.resolve(__dirname, './src'),
            'node_modules'
        ]
    },
    plugins: [
        new webpack.optimize.CommonsChunkPlugin({
            name: 'common'
        }),
        new ExtractTextPlugin({
            filename: '[name].bundle.css',
            allChunks: true
        })
    ]
}

我跑的时候:

node_modules / .bin / webpacl -p(如果我运行node_modules / .bin / webpack -d,就不会发生这种情况)

我收到以下错误:

来自UglifyJs的app.bundle.js中的错误

Unexpected token: name (name) [app.bundle.js:11,4]

APP.JS

import styles from './css/style.scss';

let name = "alessandro";
var showName = name => {
    console.log(name);
}

showName(name);

1 个答案:

答案 0 :(得分:0)

您的配置已损坏:您没有声明单独的规则,而是声明只有一个具有多个test/use/exclude字段的规则(相互覆盖)。

这可能导致你的JS没有被编译,因此,Uglify会抛出错误。

试试这个:

module: {
  rules: [
    {
      test: /\.js$/,
      exclude: [/node-modules/],
      use: [
        {
          loader: "babel-loader",
          options: { presets: ["es2015"] }
        }
      ]
    },
    {
      test: /\.css$/,
      use: ExtractTextPlugin.extract({
        use: [
          {
            loader: "css-loader",
            options: { importLoaders: 1 }
          }
        ]
      })
    },
    {
      test: /\.(sass|scss)$/,
      use: ["style-loader", "css-loader", "sass-loader"]
    }
  ];
}