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

【问题标题】：Error in React: unknown word when using webpackReact 中的错误：使用 webpack 时出现未知单词
【发布时间】：2017-06-25 15:12:56
【问题描述】：

我已经用 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 文件中。对此有何建议？

【问题讨论】：

标签： javascript webpack babeljs webpack-dev-server

【解决方案1】：

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

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

其他使用resolve的行应该是

path.resolve(__dirname, 'src');

或

path.join(__dirname, 'src');

甚至

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

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

【讨论】：