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

dev-server taking lot time to rebuild project in webpack 4

我开发了 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 () to ensure you have the correct code for your production build.

但是如果 console 我的 process.env.NODE_ENV 变量显示我 developement

我在开发模式下的开发服务器有两个问题
1) 我怎样才能减少在开发服务器上重建的时间 2）关于开发模式，为什么它显示 production 错误。

您的开发服务器 运行 处于生产模式，因为您尚未在 dev-server NPM 脚本中设置 --mode development 参数。 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,
    }
};

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

向 babel-loader 添加缓存可以节省一些时间：

{
  test: /\.jsx?$/,
  exclude: /node_modules/,
  use: [
    {
      loader: 'babel-loader',
      options: {
        cacheDirectory: true,
        cacheCompression: false
      }
    }
  ]
}

https://github.com/babel/babel-loader#options

答案是：您正在使用 inline-source-map 开发工具，这会导致构建和重建过程 超级慢。

根据Official Webpack Document，他们说：

Choose a style of source mapping to enhance the debugging process. These values can affect build and rebuild speed dramatically.

更多信息，您可以在这里阅读：https://webpack.js.org/configuration/devtool/#devtool

希望对您有所帮助！

我遇到了同样的问题，我完全删除了用于开发的源映射，现在是超级fast.My webpack.common.js 文件看起来像这样

const { CleanWebpackPlugin } = require('clean-webpack-plugin');
const HtmlWebPackPlugin = require('html-webpack-plugin');
const path = require('path');
module.exports = {
  entry: './src/app.js',
  output: {
    filename: '[name].[hash].js',
    path: path.resolve('./dist')
  },
  module: {
    rules: [{
      test: /\.js$/,
      exclude: /node_modules/,
      use: [{
        loader: 'babel-loader'
      },
      {
        loader: 'eslint-loader'
      }]
    }, {
      test: /\.s?css$/,
      use: [
        {
          loader: 'css-loader',
          options: {
            sourceMap: false
          }
        },
        {
          loader: 'sass-loader',
          options: {
            sourceMap: false
          }
        }
      ]
    }]
  },
  optimization: {
    minimize: true
  },
  plugins: [
    new HtmlWebPackPlugin({
      template: 'index.html'
    }),
    new CleanWebpackPlugin()
  ]
};

我的 webpack.dev.js 看起来像这个 

const merge = require('webpack-merge');
const common = require('./webpack.common.js');

module.exports = merge(common, {
  mode: 'development',
  devServer: {
    host: 'localhost',
    disableHostCheck: true,
    port: 3000,
    open: true,
    historyApiFallback: true
  }
});

通过这种方法，我们在开发中丢失了 source-map 并且速度很快，如果你真的需要在开发模式下进行 source-mapping，选择一些轻量级的 source-map，比如 cheap-eval-source-map 并改变当你进入生产构建到 inline-source-map 时，因为 inline-source-map 显着减小了 main.js || 的大小bundle.js 文件。