意想不到的令牌进口，Babel-Loader无法正常工作

错误中的错误/app/main.js模块解析失败： /USERS/dz2048/myapplication/app/main.js第1行：意外的令牌可能需要适当的加载程序来处理此文件类型。|进口反应从"反应";

我无法弄清楚为什么在运行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>

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

将加载程序零件更改为此

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

我想你错过了这个部分

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

相关内容

最新更新

热门标签：