reactjs - 开发服务器花费大量时间在 webpack 4 中重建项目

Question

我开发了 React 应用程序，之前我在 webpack v3 上构建了相同的应用程序，现在我升级到 v4。
在 v3 dev-server 上它工作正常，但在 v4 上它需要很多时间构建的时间以及每次构建整个项目的时间(可能就是这个原因)
我的webpack.dev.js

const webpack = require('webpack');
const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const MiniCssExtractPlugin = require("mini-css-extract-plugin");

module.exports = {
    entry: './src/app.js',
    output: {
        path: path.join(__dirname, 'public'),
        filename: 'bundle.js'
    },
    devtool: 'inline-source-map',  
    module: {
        rules: [
            {
                test: /\.js$/,
                exclude: /node_modules/,
                use: {
                loader: "babel-loader"
                }
            },
            {
                test: /\.s?css$/,
                use: [
                    MiniCssExtractPlugin.loader,
                    {
                        loader: 'css-loader',
                        options: {
                            sourceMap: true,
                            minimize:false,
                            importLoaders: 1,
                        }
                    },
                    {
                        loader: 'sass-loader',
                        options: {
                            sourceMap: true
                        }
                    }
                ]
            },{
            test: /\.(gif|svg|jpg|png|ttf|eot|woff(2)?)(\?[a-z0-9=&.]+)?$/,
            loader: "file-loader",
            }
        ]
    },
    plugins: [ 
        new MiniCssExtractPlugin({
            filename: 'styles.css',
        }),
        new HtmlWebpackPlugin({
        template: './src/index.html',
        filename: 'index.html'
        }),
        new webpack.DefinePlugin({
            'process.env': {
            'NODE_ENV': JSON.stringify('development')
            }
        })
    ],
    devServer: {
        contentBase: path.join(__dirname, 'public'),
        historyApiFallback: true,
        host:'0.0.0.0',
        disableHostCheck: true,
    }
};

package.json 中的

和我的脚本

"scripts": {
    "start": "node server/server.js",
    "build": "webpack --mode production --config=webpack.prod.js",
    "dev": "webpack --mode development --config=webpack.dev.js",
    "dev-server": "webpack-dev-server --config=webpack.dev.js"
  }

它显示错误

ou are currently using minified code outside of NODE_ENV === 'production'. This means that you are running a slower development build of Redux. You can use loose-envify (https://github.com/zertosh/loose-envify) for browserify or DefinePlugin for webpack (http://stackoverflow.com/questions/30030031) to ensure you have the correct code for your production build.

但是如果控制台我的process.env.NODE_ENV变量，它会向我显示开发

我在开发模式下的开发服务器有两个问题
1)如何减少开发服务器上的重建时间 2)在开发模式下，为什么它显示我生产错误。

Answer 1

您的开发服务器正在生产模式下运行，因为您尚未在 dev-server NPM 脚本中设置 --modedevelopment 参数。看起来似乎不需要，因为 webpack-dev-server 毕竟是一个开发服务器，但这个参数仍然是必要的。

"dev-server": "webpack-dev-server --mode development --config webpack.dev.js"

为了加快开发中的构建速度，请使用 style-loader 将所有 CSS 注入(inject)到 HTML 中，而不是将 CSS 提取到单独的文件中。请参阅以下代码，其中我删除了 mini-css-extract-plugin 及其加载器。

const webpack = require('webpack');
const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');


module.exports = {
    entry: './src/app.js',
    output: {
        path: path.join(__dirname, 'public'),
        filename: 'bundle.js'
    },
    devtool: 'inline-source-map',  
    module: {
        rules: [
            {
                test: /\.js$/,
                exclude: /node_modules/,
                use: 'babel-loader'
            },
            {
                test: /\.s?css$/,
                use: [
                    'style-loader',
                    {
                        loader: 'css-loader',
                        options: {
                            sourceMap: true,
                            minimize:false,
                            importLoaders: 1,
                        }
                    },
                    {
                        loader: 'sass-loader',
                        options: {
                            sourceMap: true
                        }
                    }
                ]
            },
            {
                test: /\.(gif|svg|jpg|png|ttf|eot|woff(2)?)(\?[a-z0-9=&.]+)?$/,
                loader: 'file-loader'
            }
        ]
    },
    plugins: [
        new HtmlWebpackPlugin({
            template: './src/index.html',
            filename: 'index.html'
        })
    ],
    devServer: {
        contentBase: path.join(__dirname, 'public'),
        historyApiFallback: true,
        host:'0.0.0.0',
        disableHostCheck: true,
    }
};

构建源映射也会减慢构建速度，因此请考虑您是否确实需要它们。