0

有人在我的 webpack.config.js 文件中看到我做错了什么吗？浏览器给我一个错误提示“unexpected token 'import'”，这意味着它无法识别 ES6 语法。我对装载机做错了吗？我已经多次安装和重新安装依赖项，所以我认为这不是问题所在。

webpack.config.js

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

module.exports = {
  devtool: 'eval',
  entry: [
    'webpack-dev-server/client?http://localhost:3000',
    'webpack/hot/only-dev-server',
    './public/index.jsx'
  ],
  output: {
    path: path.join(__dirname, 'dist'),
    filename: 'bundle.js',
    publicPath: '/static/'
  },
  resolve: {
    root: __dirname,
    alias: {
      App: 'public/components/App.jsx',
      Home: 'public/components/Home.jsx',
      Footer: 'public/components/Footer.jsx',
      Inventory: 'public/components/Inventory.jsx',
      Login: 'public/components/nav/Login.jsx',
      Navbar: 'public/components/nav/Navbar.jsx',
      ProductSearch: 'public/components/Product-Search.jsx',
      SingleProduct: 'public/components/Single-Product.jsx',
      Product: 'public/components/Product.jsx',
      Signup: 'public/components/Signup.jsx',
      LandingNavbar: 'public/components/nav/LandingNavbar.jsx',
      ProductSearch: 'public/components/ProductSearch.jsx',
      Examples: 'public/components/Examples.jsx',
      Pricing: 'public/components/Pricing.jsx',
      Profile: 'public/components/Profile.jsx',
      Checkout: 'public/components/Checkout.jsx',
      Receipt: 'public/components/Receipt.jsx',
      RequireAuth: 'public/components/auth/require_auth.jsx',
      Signout: 'public/components/Signout.jsx',
      Tour: 'public/components/tour/Tour.jsx',
      BusinessTypes: 'public/components/tour/BusinessTypes.jsx',
      Customers: 'public/components/tour/Customers.jsx',
      Features: 'public/components/tour/Features.jsx',
      GettingStarted: 'public/components/tour/GettingStarted.jsx',
      MultiStore: 'public/components/tour/MultiStore.jsx',
      Support: 'public/components/tour/Support.jsx',
      Actions: 'public/actions/index.js'
    },
    extensions: ['', '.js', '.jsx']
  },
  plugins: [
    new webpack.HotModuleReplacementPlugin()
  ],
  module: {
    loaders: [{
      test: /\.jsx$/,
      loaders: ['react-hot','babel-loader', 'babel?presets[]=es2015,presets[]=stage-0,presets[]=react'], 
      include: path.join(__dirname, 'public')
    }]
  }
};
4

3 回答 3

0

你有两次 babel loader。只需从您的加载程序数组中删除“babel-loader”。这是因为“babel?...”已经在调用加载器了。

于 2016-04-29T11:37:26.947 回答
0

你的 package.json 中必须有 babel-loader。所以确保你运行：

npm install babel-loader babel-core babel-preset-es2015 babel-preset-react babel-preset-stage-0 --save-dev

然后在你的 webpack 配置文件中：

  module: {
    loaders: [{
      test: /\.jsx$/,
      loader: 'babel-loader',
      query: {
        presets: ['es2015', 'stage-0', 'react']
      },
      include: path.join(__dirname, 'public')
    }]
  }

如果可行，请尝试将“react-hot”添加到您的加载程序列表中。

于 2016-04-29T11:38:02.860 回答
0

什么文件给你这个错误？public/actions/index.js? 您没有将.js文件传递给 babel。你正在调用 babel-loader 两次。首先是没有任何预设的“babel-loader”，其次是带有预设的“babel”。

正确的装载机应该是：

loaders: [{
      test: /\.jsx?$/,
      loaders: ['react-hot', 'babel?presets[]=es2015,presets[]=stage-0,presets[]=react'], 
      include: path.join(__dirname, 'public')
    }]

注意更改了测试正则表达式。现在它涵盖了 .js 和 .jsx 文件。我建议将预设移动到 .babelrc 文件中

于 2016-04-29T11:29:16.277 回答