Question

./app/main.js中的错误模块解析失败： /Users/dz2048/myapplication/app/main.js第1行：意外的令牌你可能需要一个合适的加载器来处理这种文件类型。 |进口来自＆＃39;反应＆＃39 ;;
的反应

当我运行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

网/公共/ 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>

Answer 1

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

Answer 2

将加载程序部分更改为此

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

我认为你错过了这部分

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

意外的令牌导入，babel-loader无法正常工作？

2 个答案: