Module parse failed: Unexpected character '@' (10:8)

问题出在哪？？

学习es6的decorator时，由于不兼容需要安装babel-plugin-transform-decorators-legacy

 "babel-plugin-transform-decorators-legacy": "^1.3.4",

安装完成后配置.babelrc文件

{
  "presets": ["es2015"],
  "plugins": ["transform-decorators-legacy"]
}

然后就报错了：

ERROR in ./app/js/class/demo16.js
Module parse failed: D:\nodejs\es6-base\app\js\class\demo16.js Unexpected character '@' (10:8)
You may need an appropriate loader to handle this file type.
SyntaxError: Unexpected character '@' (10:8)
    at Parser.pp$4.raise (D:\nodejs\es6-base\node_modules\webpack-stream\node_modules\acorn\dist\acorn.js:2221:15)
    at Parser.pp$7.getTokenFromCode (D:\nodejs\es6-base\node_modules\webpack-stream\node_modules\acorn\dist\acorn.js:2756:10)
    at Parser.pp$7.readToken (D:\nodejs\es6-base\node_modules\webpack-stream\node_modules\acorn\dist\acorn.js:2477:17)
    at Parser.pp$7.nextToken (D:\nodejs\es6-base\node_modules\webpack-stream\node_modules\acorn\dist\acorn.js:2468:15)
    at Parser.pp$7.next (D:\nodejs\es6-base\node_modules\webpack-stream\node_modules\acorn\dist\acorn.js:2413:10)
    at Parser.pp.eat (D:\nodejs\es6-base\node_modules\webpack-stream\node_modules\acorn\dist\acorn.js:536:12)
    at Parser.pp.expect (D:\nodejs\es6-base\node_modules\webpack-stream\node_modules\acorn\dist\acorn.js:597:10)
    at Parser.pp$1.parseClass (D:\nodejs\es6-base\node_modules\webpack-stream\node_modules\acorn\dist\acorn.js:1087:10)
    at Parser.pp$1.parseStatement (D:\nodejs\es6-base\node_modules\webpack-stream\node_modules\acorn\dist\acorn.js:697:19)
    at Parser.pp$1.parseBlock (D:\nodejs\es6-base\node_modules\webpack-stream\node_modules\acorn\dist\acorn.js:981:25)
 @ ./app/js/index.js 2:0-25

package.json文件：

{
  "name": "es6",
  "version": "1.0.2",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "babel-core": "^6.26.3",
    "babel-loader": "^7.1.5",
    "babel-plugin-transform-decorators-legacy": "^1.3.4",
    "babel-preset-env": "^1.7.0",
    "babel-preset-es2015": "^6.24.1",
    "connect-livereload": "^0.6.1",
    "del": "^4.0.0",
    "gulp": "^3.9.1",
    "gulp-concat": "^2.6.1",
    "gulp-if": "^2.0.2",
    "gulp-live-server": "0.0.31",
    "gulp-livereload": "^3.8.1",
    "gulp-plumber": "^1.2.1",
    "gulp-rename": "^1.4.0",
    "gulp-sequence": "^1.0.0",
    "gulp-uglify": "^3.0.2",
    "gulp-util": "^3.0.8",
    "require-dir": "^1.2.0",
    "vinyl-named": "^1.1.0",
    "webpack": "^3.12.0",
    "webpack-stream": "^3.2.0",
    "yargs": "^13.2.2"
  },
  "dependencies": {
    "babel-polyfill": "^6.26.0"
  }
}

解决问题

问题原因在task目录下的scripts.js文件中：

.pipe(gulpWebpack({
     module: {
         rules: [ {test: /\.js$/, loader: 'babel-loader'} ]
     }
 })

将rules修改为loaders就行了：

.pipe(gulpWebpack({
    module: {
        loaders: [ // 此处使用rules会使得index.js中使用 @或者import 语法报错
            {test: /\.js$/, loader: 'babel-loader'} ]
    }
})

找了半天各种尝试还是看看文档吧：
webpack从v1升级到v2或者v3