dev-server 花费大量时间在 webpack 4 中重建项目

Posted 2023-02-22

【中文标题】dev-server 花费大量时间在 webpack 4 中重建项目

【英文标题】：dev-server taking lot time to rebuild project in webpack 4

【发布时间】：2019-03-02 12:54:34

【问题描述】：

我开发了 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 === 'production' 之外的缩小代码。这意味着您正在运行一个较慢的 Redux 开发版本。您可以对 browserify 使用松散环境 (https://github.com/zertosh/loose-envify) 或对 webpack (http://***.com/questions/30030031) 使用 DefinePlugin，以确保您的生产构建具有正确的代码。

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

我在开发模式下的 dev-server 有两个问题 1）如何减少在开发服务器上重建的时间 2）关于开发模式，为什么它会显示 production 错误。

【问题讨论】：

在development 模式下，webpack 添加new DefinePlugin(process.env.NODE_ENV) on its own。所以总是指定模式，不要明确使用DefinePlugin。你也可以在配置itself中指定mode。

【参考方案1】：

您的开发服务器正在生产模式下运行，因为您尚未在 dev-server NPM 脚本中设置 --mode development 参数。好像不需要，因为 webpack-dev-server 毕竟是开发服务器，但参数还是有必要的。

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

为了加快开发中的构建，请使用style-loader 将所有 CSS 注入 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,
    
;

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

【讨论】：

"dev-server": "webpack-dev-server --mode development --config webpack.dev.js" 给我错误。所以我使用了"dev-server": "webpack-dev-server --env development --config webpack.dev.js"，它正在工作，但我有同样的两个问题。在style-loader 代码上方，我认为它没有影响，因为重建需要相同的时间。

@AbdullaZulqarnain "dev-server": "webpack-dev-server --mode development --config webpack.dev.js" 给你什么错误？在您的case 中传递--env 毫无意义。您可以删除devtool 部分，这将默认为eval 源映射，即faster 用于构建/重建。

@AbdullaZulqarnain ...自webpack minifies 代码以来，您会看到错误。因为它在production 模式下运行。由于您没有指定 mode.

oohh，我使用的是 dev-server 2.3 版本，现在升级到 3，那么你的答案工作正常

【参考方案2】：

答案是：您使用的是inline-source-map devtool，这会导致构建和重建过程超级慢。

根据Official Webpack Document，他们说：

选择一种源映射样式以增强调试过程。这些值会显着影响构建和重建速度。

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

希望对您有所帮助！

【讨论】：

是的，这是真的，但我的问题 dev-server 每次构建整个项目时都会构建我所做的任何更改。顺便说一句，我在 v3 中使用了相同的 inline-source-map 但是它没有 v4 慢

这就是 webpack 的工作原理 Abdulla Zulqarmain，webpack 只生成一个文件并将这个文件注入到 html 中，所以每次 webpack 都必须重新编译整个 main.js || bundle.js 文件。

【参考方案3】：

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

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

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

【讨论】：

它给我错误 Invalid: presets: [option: value] Valid: presets: [['presetName', option: value]]

我的预设像这样"presets": [ ["es2015", "modules": false ], "stage-0", "env", "react" ] 如何更改，我使用了错误提示模式但也失败了

【参考方案4】：

我遇到了同样的问题，我完全删除了用于开发的源映射，现在速度超快。我的 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
  
);

使用这种方法，我们会在开发过程中丢失源映射并加快速度，如果您真的需要在开发模式下进行源映射，请选择一些轻量级的源映射，例如cheap-eval-source-map，并在何时更改它你进入生产构建到 inline-source-map 因为 inline-source-map 显着减小了 main.js 的大小 || bundle.js 文件。