0

./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

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

2 回答 2

0

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

于 2017-12-25T21:44:11.160 回答
0

将加载器部分更改为此

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

我想你错过了这部分

resolve: {
    alias: {
        'react$': 'your react location',
        ...
    }
}
于 2017-12-26T02:55:16.427 回答