意外的令牌导入，babel-loader 不工作？答案

【问题标题】：Unexpected Token Import, babel-loader not working?意外的令牌导入，babel-loader 不工作？
【发布时间】：2018-06-06 10:06:54
【问题描述】：

./app/main.js 中的错误模块解析失败： /Users/dz2048/myapplication/app/main.js 第 1 行：Unexpected token You 可能需要适当的加载程序来处理这种文件类型。 |进口从“反应”做出反应；

我无法弄清楚为什么我在运行 webpack-dev-server 时会收到此错误。我看到很多人都收到了这个错误，但是出于不同的原因。我怀疑 babel-loader 完全跳过而不是编译我的 main.js 文件。第一次自己设置，我认为我很好地遵循了 webpack 文档，但我想不是。

依赖：

"dependencies": {
  "babel-core": "^6.26.0",
  "babel-loader": "^7.1.2",
  "prop-types": "^15.6.0",
  "react": "^16.2.0",
  "react-redux": "^5.0.6",
  "redux": "^3.7.2",
  "seamless-immutable": "^7.1.2"
},
"devDependencies": {
  "babel-preset-env": "^1.6.1",
  "webpack": "^3.10.0"
}

webpack.config.dev.js：

const path = require('path');

module.exports = {
  entry: {
    main: './app/main.js'
  },
  output: {
    filename: 'bundle.js',
    path: path.join(__dirname, '../public')
  },
  module: {
    rules: [
      {
        test: /\.js$/,
        exclude: /node_modules/,
        use: {
          loader: 'babel-loader',
          options: {
            presets: ['@babel/preset-env']
          }
        }
      }
    ]
  }
};

来自 package.json 的脚本

  "scripts": {
    "web-dev": "webpack-dev-server --config web/webpack/webpack.config.dev.js --colors"
  },

最后，我的文件结构：

myapplication/
  app/
    main.js

  node_modules/
  web/
    public/
    webpack/
      webpack.config.dev.js
  package.json

web/public/index.html：

<!DOCTYPE html>
<html>
  <head>
    <meta name="viewport" content="width=device-width">
  </head>
  <body>
    <div id="root"></div>
    <script src="bundle.js"></script>
  </body>
</html>

【问题讨论】：

尝试在 .babelrc 文件中设置预设并将其从 webpack 配置文件中删除
@monssef - 谢谢。我试过了，结果是一样的。
你也可以添加你的html文件内容吗？
已添加
将预设更改为 'babel-preset-env' 而不是 '@babel/preset-env'

标签： javascript webpack webpack-dev-server babel-loader

【解决方案1】：

我发现了这个问题。我在 package.json 中的脚本使用 webpack-dev-server 而不是 webpack。适合我从我不完全理解的示例项目中复制代码。

【讨论】：

【解决方案2】：

把加载器部分改成这个

       {
            test: /\.js$/,
            loader: 'babel-loader',
            exclude: /node_modules/
        },

我想你错过了这部分

resolve: {
    alias: {
        'react$': 'your react location',
        ...
    }
}

【讨论】：