CODEWITHSUNDEEP
reactjswebpackwebpack-dev-serverwebpack-4
zulqarnain
zulqarnain

Reputation: 1626

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

i developed react app,before that i built same app on webpack v3 now i upgrade to v4.
on v3 dev-server it worked fine but on v4 it is taking lot of time to build and every time its building whole project again(may be that's why)
my 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,
    }
};

and my scripts in 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"
  }

it showing me error

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 (http://stackoverflow.com/questions/30030031) to ensure you have the correct code for your production build.

but if console my process.env.NODE_ENV varialbe it showing me developement

i have two problems with dev-server on development mode
1) how can i reduce time of rebuilding on dev-server 2)on development mode also why it showing me production error.

Upvotes: 8

Views: 7923

Answers (4)

Goran_Ilic_Ilke
Goran_Ilic_Ilke

Reputation: 868

I have had the same issue and i completely remove source map for development and now is super-fast.My webpack.common.js file looks like this

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()
  ]
};

and my webpack.dev.js looks like this one 

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
  }
});

With this aproach we losing source-map in development and get fast at speed,if you really need source-mapping in dev-mode choose some light-weight source-map like cheap-eval-source-map and change it when you go in production build to inline-source-map because inline-source-map decreases dramatically size of main.js || bundle.js file.

Upvotes: 0

Tu Nguyen
Tu Nguyen

Reputation: 10179

The answer is: you are using the inline-source-map devtool which causes the build & rebuild process super slow.

According to the Official Webpack Document, they said:

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

enter image description here

For more information, you could read it here: https://webpack.js.org/configuration/devtool/#devtool

Hopefully, that helps!

Upvotes: 3

DanielFGray
DanielFGray

Reputation: 81

Adding caching to babel-loader can shave off some time:

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

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

Upvotes: 0

Adam
Adam

Reputation: 3965

Your development server is being run in production mode because you haven't set the --mode development argument in your dev-server NPM script. It seems like it isn't required since webpack-dev-server is, after all, a development server, but the argument is still necessary.

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

To speed up the build in development, inject all CSS into the HTML with style-loader instead of extracting the CSS to a separate file. See the following code where I removed mini-css-extract-plugin and its loader.

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,
    }
};

Building source maps will slow the build down as well, so consider if you truly need them.

Upvotes: 5

Related Questions