8

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.

Improve this question
1
  • When in development mode, webpack adds new DefinePlugin(process.env.NODE_ENV) on its own. So always specify mode, and don't explicitly use DefinePlugin for that. You can also specify mode in config itself. Commented Sep 27, 2018 at 7:17

4 Answers 4

Reset to default
5

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.

Improve this answer
Sign up to request clarification or add additional context in comments.

4 Comments

"dev-server": "webpack-dev-server --mode development --config webpack.dev.js" giving me error. so i used "dev-server": "webpack-dev-server --env development --config webpack.dev.js" it is working but i have same both problems.above style-loader code i think it is not effecting because it is taking same time to rebuild.
@AbdullaZulqarnain What error does "dev-server": "webpack-dev-server --mode development --config webpack.dev.js" give you? Passing --env makes no sense in your case. You can drop devtool part, that would default to eval source maps, which are faster to build/rebuild.
@AbdullaZulqarnain ...You're seeing the error since webpack minifies the code. Because it's running in production mode. Since you're not specifying the mode.
oohh, i was using dev-server 2.3 version now upgrade to 3 then your answer is working fine
3

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!

Improve this answer

2 Comments

yeah,its true but my problem dev-server every time building whole project instead building what ever changes i made.by the way same inline-source-map i used in v3 but it was not that slow as v4
This is how webpack works Abdulla Zulqarmain,webpack make only one file and inject this file into html ,so every time webpack must recompile whole main.js || bundle.js file.
0

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

Improve this answer

2 Comments

it is giving me error Invalid: { presets: [{option: value}] } Valid: { presets: [['presetName', {option: value}]] }
my presets like this "presets": [ ["es2015", { "modules": false }], "stage-0", "env", "react" ] how to change,i used error hint patter but also failed
0

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.

Improve this answer

Comments

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.