javascript - 为开发构建 webpack 时出现语法错误

Question

我无法使用 webpack 构建项目，因为我一直遇到语法错误。此外，当我的 friend 在 Linux 上运行相同的代码时(我在 Windows 10 上工作)他没有收到任何错误并且一切正常。

这是我的 webpack 配置

const path = require('path');

const autoprefixer = require('autoprefixer');
const CopyWebpackPlugin = require('copy-webpack-plugin');
const ExtractTextPlugin = require('extract-text-webpack-plugin');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const WebpackMd5Hash = require('webpack-md5-hash');

const CommonsChunkPlugin = require('webpack/lib/optimize/CommonsChunkPlugin');
const DefinePlugin = require('webpack/lib/DefinePlugin');
const HMRPlugin = require('webpack/lib/HotModuleReplacementPlugin');
const LoaderOptionsPlugin = require('webpack/lib/LoaderOptionsPlugin');
const NamedModulesPlugin = require('webpack/lib/NamedModulesPlugin');
const OccurrenceOrderPlugin = require('webpack/lib/optimize/OccurrenceOrderPlugin');
const ProgressPlugin = require('webpack/lib/ProgressPlugin');
const UglifyJsPlugin = require('webpack/lib/optimize/UglifyJsPlugin');

//=========================================================
//  VARS
//---------------------------------------------------------
const NODE_ENV = process.env.NODE_ENV;
const DEVELOPMENT = NODE_ENV === 'development';
const PRODUCTION = NODE_ENV === 'production';

const HOST = process.env.HOST || '127.0.0.1';
const PORT = process.env.PORT || '3000';

//=========================================================
//  LOADERS
//---------------------------------------------------------
const rules = {
    js: {
        test: /\.js$/,
        exclude: /node_modules/,
        loader: 'babel-loader',
    },

    json: {
        test: /\.json$/,
        loader: 'json-loader',
    },

    css: {
        test: /\.css$/,
        loader: ExtractTextPlugin.extract({
            fallback: 'style-loader',
            use: ['css-loader', 'resolve-url-loader', 'postcss-loader'],
        }),
    },

    scss: {
        test: /\.scss$/,
        loader: ExtractTextPlugin.extract({
            fallback: 'style-loader',
            use: ['css-loader', 'resolve-url-loader', 'postcss-loader', 'sass-loader'],
        }),
    },

    fonts: {
        test: /\.(eot|svg|ttf|woff|woff2)$/,
        loader: 'file-loader',
        query: {
            name: `[name].[ext]`,
            publicPath: '/assets/fonts/',
        }
    },

    images: {
        test: /\.(svg|png|jpg|jpeg|gif)$/,
        loader: 'file-loader',
        query: {
            limit: 10000,
            name: `[name].[ext]`,
            publicPath: '/assets/images/',
        }
    }
};

//=========================================================
//  CONFIG
//---------------------------------------------------------
const config = {};

config.entry = {
    polyfills: './src/application/polyfills.js',
    main: ['./src/application/index.js'],
};

config.output = {
    filename: 'assets/js/[name].js',
    path: path.resolve('./dist'),
    // publicPath: '/',
};

config.resolve = {
    extensions: ['.js', '.json'],
    modules: [
        path.resolve('./src'),
        'node_modules',
    ]
};

config.module = {
    rules: [
        rules.js,
        rules.css,
        rules.json,
        rules.scss,
        rules.fonts,
        rules.images,
    ]
};

config.plugins = [
    new LoaderOptionsPlugin({
        debug: !PRODUCTION,
        cache: !PRODUCTION,
        minimize: PRODUCTION,
        options: {
            postcss: [
                autoprefixer({
                    browsers: ['last 3 versions'],
                })
            ],
            sassLoader: {
                outputStyle: PRODUCTION ? 'compressed' : 'expanded',
                precision: 10,
                sourceComments: false,
                sourceMap: PRODUCTION,
            }
        }
    }),
    new DefinePlugin({
        'process.env.NODE_ENV': JSON.stringify(NODE_ENV),
    }),
    new OccurrenceOrderPlugin(true),
    new NamedModulesPlugin(),
    new CommonsChunkPlugin({
        name: 'polyfills',
        chunks: ['polyfills'],
    }),
    // This enables tree shaking of the vendors modules
    new CommonsChunkPlugin({
        name: 'vendor',
        chunks: ['main'],
        minChunks: module => /node_modules/.test(module.resource),
    }),
    new CommonsChunkPlugin({
        name: ['polyfills', 'vendor'].reverse(),
    }),
    new CopyWebpackPlugin([
        {
            from: './src/assets',
            to: 'assets',
            ignore: ['**/*.scss'],
        }
    ]),
    new ExtractTextPlugin({
        filename: 'assets/css/[name].css',
        disable: !PRODUCTION,
        allChunks: true,
    }),
    new HtmlWebpackPlugin({
        filename: 'index.html',
        hash: false,
        inject: 'body',
        chunksSortMode: 'dependency',
        template: './src/index.html',
    })
];


//=====================================
//  DEVELOPMENT
//-------------------------------------

if (DEVELOPMENT) {
    config.devtool = 'cheap-module-source-map';

    config.entry.main.unshift(
        'react-hot-loader/patch',
        `webpack-dev-server/client?http://${HOST}:${PORT}`,
        'webpack/hot/only-dev-server',
    );

    config.plugins.push(
        new HMRPlugin(),
        new ProgressPlugin(),
    );

    config.devServer = {
        contentBase: path.resolve(__dirname, 'dist'),
        historyApiFallback: true,
        host: HOST,
        hot: true,
        port: PORT,
        stats: {
            cached: true,
            cachedAssets: true,
            children: false,
            chunks: false,
            chunkModules: false,
            colors: true,
            modules: false,
            hash: false,
            reasons: true,
            timings: true,
            version: false,
        }
    };
}


//=====================================
//  PRODUCTION
//-------------------------------------
if (PRODUCTION) {
    config.devtool = 'hidden-source-map';

    config.plugins.push(
        new WebpackMd5Hash(),
        new UglifyJsPlugin({
            comments: false,
            compress: {
                unused: true,
                dead_code: true,
                screw_ie8: true,
                warnings: false,
            },
            mangle: {
                screw_ie8: true,
            }
        })
    );
}

module.exports = config;

这是我的 package.json 脚本

"scripts": {
    "test": "jest",
    "server:dev": "set NODE_ENV='development' && webpack-dev-server --color",
    "start": "npm run server:dev",
    "build": "set NODE_ENV='production' && webpack --color"
  },

当我尝试运行“npm start”时，出现此错误

C:\Users\vellgreen\Desktop\my_webpack_react\webpack.config.js:184
        );
        ^
SyntaxError: Unexpected token )

当我将其放入评论中时，一切正常。

config.entry.main.unshift(
        'react-hot-loader/patch',
        `webpack-dev-server/client?http://${HOST}:${PORT}`,
        'webpack/hot/only-dev-server',
    );

    config.plugins.push(
        new HMRPlugin(),
        new ProgressPlugin(),
    );

当我运行生产代码时，一切都很好。我的操作系统是 Windows 10，webpack v3.1.0，npm v5.3.0，node v6.10.3。

有谁知道什么可能导致这样的错误？

Answer 1

函数中的尾随逗号是一个相对较新的特性，Node 在 version 8 开始支持它。 .您的 friend 只是在使用支持它的版本(它与操作系统无关)。

config.entry.main.unshift(
    'react-hot-loader/patch',
    `webpack-dev-server/client?http://${HOST}:${PORT}`,
    'webpack/hot/only-dev-server',
//                               ^ --- remove this comma
);

config.plugins.push(
    new HMRPlugin(),
    new ProgressPlugin(),
//                      ^ --- and this comma
);