Question

我正在尝试为React设置开发人员环境，但是我遇到了一些webpack路径问题。通常，快速谷歌解决这些问题，但我没有看到任何人有同样的问题，这可能意味着我是一个白痴，并搞砸了一些东西。

所以，我遵循了一个教程，我有一个dev - 文件夹和一个output - 文件夹。在output我有output.js，我希望webpack输出我的所有内容。所以，根据指南，我应该运行./node_modules/.bin/webpack它应该使用我的配置，但它显示错误的文件路径。我希望它转到react-test/output/output.js，但它会投入/dev，使其成为react-test/dev/output/output.js。我的webpack.config.js看起来像这样：

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

var DEV = path.resolve(__dirname, "dev");
var OUTPUT = path.resolve(__dirname, "output");

var config = {
  entry: DEV + "/index.jsx",
  output: {
    path: OUTPUT,
    filename: "output.js"
  },
  module: {
    loaders: [{
        include: DEV,
        loader: "babel-loader"
    }]
  }
};

module.exports = config;

我看不到添加dev的位置。

Answer 1

我会将文件修改为以下内容：

var path = require('path');

module.exports = {
  entry: path.join(__dirname, '/dev/index.js'),
  output: {
    path: path.join(__dirname, '/output'),
    filename: 'output.js'
  },
  module: {
    loaders: [
      {
        test: /\.js$/,
        exclude: /(node_modules|bower_components)/,
        loader: 'babel-loader',
        query: {
          presets: ['react', 'es2015']
        }
      }
    ]
  }
};

您不需要在此文件中要求webpack，但您需要告诉模块加载器要测试的内容。我包含的预设假设您使用的是ReactJS和ES6，您可能需要根据需要进行更改。

Answer 2

webpack.config

var path = require("path");
var HtmlWebpackPlugin = require("html-webpack-plugin");
module.exports = {
    entry: './dev/index.js',
    output: {
        path: path.resolve(__dirname, 'output'),
        filename: 'output.js',
        publicPath: '/'
    },
    module: {
        rules: [
            { test: /\.(js)$/, use: 'babel-loader' },
            { test: /\.css$/, use: ['style-loader', 'css-loader'] }  
        ]
    },
    devServer: {
        historyApiFallback: true
    },
    plugins: [
        new HtmlWebpackPlugin({
            template: 'app/Index.html'  // Copy Index.html with script tag refrencing output.js in Output folder
        })
    ]
}

Answer 3

尝试将 context 选项设置为react-test目录并设置 DEV 和 OUTPUT 路径：

var DEV = path.resolve(__dirname, "./dev");
var OUTPUT = path.resolve(__dirname, "./output");

var config = {
  context: path.resolve(__dirname, './'),
  entry: DEV + "/index.jsx",
  output: {
    path: OUTPUT,
    filename: "output.js"
  },
  ...

React + webpack dev环境设置 - 错误的文件路径

3 个答案: