Node.js 如何在Webpack 4中使用Reactjs的开发版本

这是我当前的网页包配置。我已经有一段时间没有这么做了，上一次我这么做的时候，第2页刚刚出来。那时有一个插件可以让我定义我的输出。现在该插件不再有效

我需要做的是使用ReactJS的开发版本，但我的构建会继续使用生产版本。所以错误处理几乎是不可能的，因为react会删除生产构建中的大量错误

const fs = require('fs');
const os = require('os');
const path = require('path');
const webpack = require('webpack');

const files = fs.readdirSync('./src/scripts/').filter(function (file) {
    return path.extname(file) === '.js';
});

const entries = files.reduce(function (obj, file, index) {
    const key = path.basename(file, '.js');
    obj[key] = [
        './src/scripts/' + key
    ];
    return obj;
}, {});

entries.hotreload = 'react-hot-loader/patch';

console.log(argv.mode);

module.exports = {
    mode: 'development',
    entry: entries,
    module: {
        rules: [
            {
                test: /\.(js|jsx)$/,
                exclude: /node_modules/,
                use: ['babel-loader']
            }
        ]
    },
    resolve: {
        extensions: ['*', '.js', '.jsx']
    },
    output: {
        path: __dirname + '/dist/scripts',
        publicPath: '/',
        filename: '[name].js'
    },
    plugins: [
        new webpack.HotModuleReplacementPlugin()
    ],
    devServer: {
        contentBase: './dist/scripts',
        hot: true
    }
};

---

这也是我如何启动webpack

webpack dev server--config./webpack.config.js--mode development

，这似乎对我没有任何好处。

好吧，我创建了一个脚本来运行webpack服务器。这就是我如何启动dev服务器

npm start

以下是我的脚本：

"scripts": {
    "dev": "webpack --mode development",
    "start": "webpack-dev-server",
    "build": "cross-env NODE_ENV=production webpack-dev-server --client-log-level none --color --compress"
  },

这里是我的webpack.config.js：

const modoDev = process.env.NODE_ENV != "production";
const webpack = require('webpack');
const ExtractTextPlugin = require('mini-css-extract-plugin');
const UglifyJsPlugin = require('uglifyjs-webpack-plugin');
const OptimizeCssAssetsPlugin = require('optimize-css-assets-webpack-plugin');
const path = require('path');

module.exports = {
    mode: modoDev ? 'development' : 'production',
    entry: './src/index.jsx',
    output: {
        path: __dirname + '/public',
        filename: './app.js',
        publicPath: '/'
    },
    optimization: {
        minimizer: [
            new UglifyJsPlugin({
                cache: true,
                parallel: true
            }),
            new OptimizeCssAssetsPlugin({})
        ]
    },
    devServer: {
        host: '0.0.0.0',
        port: 8080,
        contentBase: './public',
        historyApiFallback: {
            index: "/"
        },
    },
    resolve: {
        extensions: ['*', '.js', '.jsx'],
        alias: {
            modules: path.resolve(__dirname + '/node_modules/')
        }
    },
    plugins: [new ExtractTextPlugin({
        filename: 'app.css'
    }), new webpack.ProvidePlugin({
        $: "jquery",
        jQuery: "jquery"
    })],
    module: {
        rules: [{
                test: /.js[x]?$/,
                exclude: /node_modules/,
                use: {
                    loader: "babel-loader"
                }
            },
            {
                test: /\.(sa|sc|c)ss$/,
                use: [ExtractTextPlugin.loader, 'css-loader', 'sass-loader']
            }, {
                test: /\.woff|.woff2|.ttf|.eot|.svg|.png|.jpg*.*$/,
                use: ['file-loader']
            },
        ],
    }
};