1

在阅读了一本关于 webpack 配置的小说的 SO 帖子后，我仍然无法克服这个module parse failed错误。

package.json（不是全部）

"dependencies": {
    "babel-core": "^6.7.6",
    "babel-loader": "^6.2.4",
    "babel-preset-es2015": "^6.6.0",
    "babel-preset-es2015-webpack": "^6.4.0",
    "babel-preset-react": "^6.5.0",
    "babel-preset-stage-0": "^6.5.0",
    "react": "^0.14.6",
    "react-dom": "^0.14.6",
    "react-hot-loader": "^1.3.0",
    "webpack": "^1.12.14",
    "webpack-dev-middleware": "^1.6.1",
    "webpack-hot-middleware": "^2.10.0"
}

结构体

package.json
node_modules
.babelrc
client/
    webpack.config.js
    .babelrc         # duplicated just for shits and giggles...
    src/
        index.jsx
        components/
server/
    index.js
    //more stuff

客户端/webpack.config.js

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

module.exports = {
  devtool: 'eval',
  context: __dirname + '/src',
  entry: [
    'webpack-hot-middleware/client',
    __dirname + '/src/index.jsx'
  ],
  output: {
    path: __dirname + '/public',
    filename: 'bundle.js',
    publicPath: 'http://localhost:12345'
  },
  plugins: [
    new webpack.optimize.OccurenceOrderPlugin(),
    new webpack.HotModuleReplacementPlugin(),
    new webpack.NoErrorsPlugin()
  ],
  module: {
    loaders: [
      {
        test: /\.jsx$/,
        include: __dirname + '/src',
        loaders: ['react-hot', 'babel-loader?presets[]=react,presets[]=es2015,presets[]=stage-0'],
        query: { 
          plugins: ['./babelRelayPlugin'],
          presets: ['es2015', 'react'] 
        }
      }
    ]
  }
};

.babelrc

{ "presets": ["react", "es2015", "stage-0"] }

客户端/src/index.jsx

import React from 'react';
import ReactDOM from 'react-dom';
import Layout from './src/components/layout.jsx';

ReactDOM.render(<Layout />, document.querySelector('#app'));

一直在黑暗中修改 webpack 配置，无法转换 es6。

其他 SO 帖子中反复出现的问题

  1. Loaders数组必须在module属性内
  2. 将presets数组添加到您的.babelrc
  3. npm install --save babel-preset-whatever
  4. hot-loader折旧，使用babel-preset-react-hmre
  5. 装载机从右到左，从上到下装载

不知所措。

4

2 回答 2

1

原来我的context财产把一切都搞砸了，但这些错误并没有那么有帮助。文档清楚地说明了什么context，我猜我没有足够仔细地注意这一点。

//webpack.config.js
context: __dirname + '/client/src/',
target: 'web'

//index.jsx

//this will break everything
import Layout from './src/components/Layout.jsx' 

//this will work
import Layout from './components/Layout.jsx'

我刚刚切换了它，现在一切都很好。

于 2016-04-10T17:06:55.533 回答
0

容易反应

我为自己创建了一个小型启动器。只需检查我的配置，它对我有用。

于 2016-04-10T06:20:49.870 回答