webapck 2.x 'webpack' SyntaxError: Unexpected identifier

问题描述

问 题

配置文件如下：

var path = require('path');
var webpack = require('webpack');
var autoprefixer = require('autoprefixer');

module.exports = {
    entry: './js/main.js',
    output: {
        path: path.resolve(__dirname, './dist'),
        publicPath: './dist/',
        filename: 'build.js'
    },
    module: {
        loaders: [
            {
                test:   /\.css$/,
                loader: "style-loader!css-loader!postcss-loader"
            }
        ]
    },
    plugins: {
      new webpack.LoaderOptionsPlugin({
        options: {
          postcss: [autoprefixer]
        }
      })
    }
}

出现如下异常信息，但我自己重复检查了多次，仍未找到错误：

E:\workspace_hbuilder\test4webpackSprite\webpack.config.js:21
          new webpack.LoaderOptionsPlugin({
              ^^^^^^^
SyntaxError: Unexpected identifier
    at Object.exports.runInThisContext (vm.js:76:16)
    at Module._compile (module.js:542:28)
    at Object.Module._extensions..js (module.js:579:10)
    at Module.load (module.js:487:32)
    at tryModuleLoad (module.js:446:12)
    at Function.Module._load (module.js:438:3)
    at Module.require (module.js:497:17)
    at require (internal/module.js:20:19)
    at requireConfig (C:\Users\Administrator\AppData\Roaming\npm\node_modules\webpack\bin\convert-argv.js:96:18)
    at C:\Users\Administrator\AppData\Roaming\npm\node_modules\webpack\bin\convert-argv.js:109:17

解决方案

需要使用webpack2的规则编写配置文件：

var path = require('path');
var webpack = require('webpack');
var autoprefixer = require('autoprefixer');

module.exports = {
    entry: './js/main.js',
    output: {
        path: path.resolve(__dirname, './dist'),
        publicPath: './dist/',
        filename: 'build.js'
    },
    module: {
        rules: [
            {
                test:   /\.css$/,
                use: ['style-loader','postcss-loader']
            }   
        ]
    }
}

这篇关于webapck 2.x 'webpack' SyntaxError: Unexpected identifier的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！