开发服务器花费大量时间在 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"
  }

它显示我错误

您当前正在使用 NODE_ENV === '生产' 之外的精简代码。这意味着您正在运行较慢的 Redux 开发版本。您可以将loose-envify ( https://github.com/zertosh/loose-envify ) 用于 browserify 或 DefinePlugin 用于 webpack ( http://stackoverflow.com/questions/30030031 ) 以确保您的生产拥有正确的代码建造。

但如果console我的process.env.NODE_ENV变量显示了我的发展

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

Answer 1

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

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

为了加快开发中的构建速度，请将所有 CSS 注入到 HTML 中，而style-loader不是将 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,
    }
};

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