React 中的错误：使用 webpack 时出现未知词

Question

我已经用 webpack 和 babel 搭建了一个 React 环境。但是，当我运行 webpack-dev-server --progress --colors 时，我得到这样的错误：

ERROR in multi (webpack)-dev-server/client?http://localhost:8080 E:/src/index.js

Module not found: Error: can't resolve 'E:\src/index.js' in 'E:\personal_projects\web-site-name'

...

(2:1) Unknown word

1: var url = require("url");
   ^

我的 webpack.config.js 文件是这样的：

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

var BUILD_DIR = path.resolve(__dirname, '/public');
var APP_DIR = path.resolve(__dirname, '/src');

var config = {
  entry: APP_DIR + '/index.js',
  output: {
    path: BUILD_DIR,
    filename: 'bundle.js'
  },
  module: {
    rules: [
      {
        test: /\.js$/,
        exclude: /(node_modules|bower_components)/,
        use: {
          loader: 'babel-loader',
          options: {
            presets: ['env']
          }
        }
      },
      {
        test: /(\.css$)/,
        loaders: ['style-loader', 'css-loader', 'postcss-loader']
      },
      {
        loader: 'postcss-loader',
        options: {
          plugins: () => [require('autoprefixer')]
        }
      }
    ]
  }
};

module.exports = config;

我认为 babel 存在一些问题，它将我的 index.js 编译成我的 bundle.js 文件。对此有何建议？

Answer 1

您需要使用 path.join 或删除斜杠，例如

path.resolve(__dirname, '/src');

和其他使用 resolve 的行应该是

path.resolve(__dirname, 'src');

或

path.join(__dirname, 'src');

甚至

path.join(__dirname, '/src');

您对 .resolve 的使用传递了绝对路径 /src，这意味着第一个参数基本上被丢弃了。

React 中的错误：使用 webpack 时出现未知词

Error in React: unknown word when using webpack

javascript

webpack

babeljs

webpack-dev-server