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时出现未知单词

1 个答案: