巴貝爾裝載機不承認ES2015代碼

Question

更新：

我上傳了一個示例項目的GitHub：https://github.com/guocheng/debug-webpack

在此示例項目，我有兩個相同的index.js文件。一個在項目根目錄下，另一個在/src之下。

經過npm install，運行此命令webpack-dev-server --config webpack.dev.config.js。您應該看到此錯誤：

ERROR in ./index.js 
Module parse failed: /Users/cheng/Dev/debug-webpack/index.js Line 1: Unexpected token 
You may need an appropriate loader to handle this file type. 
| import React, { Component } from 'react'; 
| 
| export default class App extends Component { 
@ multi main 

但是，如果你在webpack.dev.config.js改變Line #9到./src/index，相同的命令將工作。

所以我把index.js的位置影響輸出。

爲什麼會發生這種情況的任何想法？

---

這裏是我的.babelrc文件：

{ 
    "presets": ["es2015", "stage-0", "react"], 
    "plugins": ["transform-decorators-legacy", "transform-runtime"], 
    "ignore": ["node-modues/**/*.js"] 
} 

我已經安裝了babel-preset-2015, stage-0 and react。

我這個CLI命令運行webpack-dev-server：node ./webpack/server.js

這裏是server.js

const webpack = require('webpack'), 
     WebpackDevServer = require('webpack-dev-server'), 
     config = require('./dev.config') 

new WebpackDevServer(webpack(config), { 
    contentBase: './build', 
    // webpack-dev-server options 
    hot: true, 
    historyApiFallback: true, 
    inline: true, 
    // webpack-dev-middleware options 
    noInfo: false, 
    quiet: false, 
    lazy: false, 
    publicPath: config.output.publicPath, 
    headers: {'Access-Control-Allow-Origin': '*'}, 
    stats: { colors: true } 
}).listen(port, ip, function(err, result) { 
    if (err) { 
     console.log(err) 
    } 
}) 

下面是我用的WebPack配置文件：

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

const PATHS = { 
    app: path.join(__dirname, 'app'), 
    build: path.join(__dirname, 'build'), 
    dist: path.join(__dirname, 'dist') 
} 

module.exports = { 
    devtool: 'inline-source-map', 
    entry: { 
     javascript: [ 
      'webpack-dev-server/client?http://127.0.0.1:5555', 
      'webpack/hot/only-dev-server', 
      './app/index.js' 
     ] 
    }, 
    output: { 
     path: PATHS.dist, 
     filename: 'bundle.js', 
     publicPath: '/static/' 
    }, 
    module: { 
     loaders: [{ 
      test: /\.jsx?$/, 
      loaders: ['react-hot', 'babel?cacheDirectory'], 
      exclude: /(node_modules|bower_components)/, 
      include: path.join(__dirname, 'app'), 
     },{ 
      test: /\.css$/, 
      loader: ExtractTextPlugin.extract('style-loader', 'css-loader!cssnext-loader') 
     },{ 
      test: /\.(woff|woff2|eot|ttf)$/, 
      loader: 'url-loader?limit=8192&name=fonts/[name].[ext]' 
     },{ 
      test: /\.(png|jpg|svg)$/, 
      loader: 'url-loader?limit=8192&name=img/[name].[ext]' 
     }] 

    }, 
    cssnext: { 
     browsers: 'last 2 versions' 
    }, 
    resolve: { 
     extensions: ['', '.js', '.jsx'] 
    }, 
    plugins: [ 
     new webpack.HotModuleReplacementPlugin(), 
     new webpack.NoErrorsPlugin(), 
     new ExtractTextPlugin(
      'bundle.css', 
      {allChunks: true}), 
     new webpack.DefinePlugin({ 
      '__DEVELOPMENT__': true, 
      '__DEVTOOLS__': true 
     }) 
    ] 
} 

當我運行開發服務器，這裏是錯誤信息：

。

出於某種原因，presets沒踢我試圖用babel CLI手動測試文件：

babel index.js // note: .babelrc is used for configuring the presets 

其實我可以看到正確的輸出。對可能導致問題的任何建議？

包版本我已經安裝：

├── babel-core@6.7.2 
├── babel-eslint@5.0.0 
├── babel-loader@6.2.3 
├── babel-plugin-transform-decorators-legacy@1.3.4 
├── babel-plugin-transform-runtime@6.6.0 
├── babel-preset-es2015@6.6.0 
├── babel-preset-react@6.5.0 
├── babel-preset-stage-0@6.5.0 
├── webpack-dev-server@1.14.1 

---

這裏是我的項目摺疊的結構：

project_name 
    |── app 
     |── index.js 
    |── dist 
    |── build 
    |── webpack 
      |── dev.config.js 
      |── server.js 
    |── .babelrc 

我試圖運行在項目的根目錄下面的命令，它給我的同樣的錯誤：

webpack-dev-server --config ./webpack/dev.config.js 

但babel ./app/index.js的作品。

Answer 1

您已經無效包括JS裝載機路徑，因爲你的配置位於webpack目錄：

{ 
     test: /\.jsx?$/, 
     loaders: ['react-hot', 'babel?cacheDirectory'], 
     exclude: /(node_modules|bower_components)/, 
     include: path.join(__dirname, 'app'), 
    } 

你的情況包含路徑是root/webpack/app而且必須是root/webpack/../app：

path.join(__dirname, '..', 'app')