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当前正在使用NODE_ENV ==='production'之外的缩小代码。这意味着您正在运行较慢的Redux开发版本。您可以对浏览器使用松散envify（https://github.com/zertosh/loose-envify）或对webpack使用DefinePlugin（http://stackoverflow.com/questions/30030031），以确保您具有用于生产构建的正确代码。

但是如果console是我的process.env.NODE_ENV变量，则表明我发展

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

Answer 1

您的开发服务器正在生产模式下运行，因为尚未在--mode development NPM脚本中设置dev-server自变量。毕竟似乎不是必需的，因为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,
    }
};

构建源地图也会降低构建速度，因此请考虑是否确实需要它们。

Answer 2

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

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

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

Answer 3

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

根据Official Webpack Document，他们说：

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

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

希望这会有所帮助！

Answer 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文件。

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

4 个答案: