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

【问题标题】：dev-server taking lot time to rebuild project in webpack 4dev-server 花费大量时间在 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://stackoverflow.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。

标签： reactjs webpack webpack-dev-server webpack-4

【解决方案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 文件。

【讨论】：