5

My webpack-dev-server gets work very slow. I have the following webpack.config.js file:

'use strict'; var path = require('path'); var webpack = require('webpack'); var glob = require("glob"); module.exports = { entry: { wit: [babel-polyfill', './index.js', './src/shared/styles.less'] }, output: { path: path.resolve(__dirname, 'dist/'), //publicPath: '/', filename: 'bundle.[name].js' }, module: { rules: [ { test: /(\.js[\S]{0,1})$/i, exclude: /node_modules/, loaders: ['babel-loader?presets[]=env&presets[]=react&presets[]=stage-0&presets[]=stage-2'] }, { test: /\.(htm|html|xhtml|hbs|handlebars|php|ejs)$/i, exclude: /node_modules/, loader: "file?name=[name].[ext]", }, { test: /\.css$/i, exclude: [/node_modules/], loader: 'style-loader!css-loader' }, { test: /\.less$/i, exclude: /node_modules/, use: [{ loader: "style-loader" // creates style nodes from JS strings }, { loader: "css-loader" // translates CSS into CommonJS }, { loader: "less-loader" // compiles Less to CSS }] }, // this rule handles images { test: /\.woff(2)?(\?v=[0-9]\.[0-9]\.[0-9])?$/, loader: "url-loader?limit=10000&mimetype=application/font-woff" }, { test: /\.(ttf|eot|svg)(\?v=[0-9]\.[0-9]\.[0-9])?$/, loader: "file-loader" }, { test: /\.(jpe?g|png|gif)$/i, exclude: /node_modules/, use: [ 'url-loader?limit=10000', 'img-loader', 'file-loader?name=[name].[ext]?[hash]' ] }, { test: /\.json$/, exclude: /node_modules/, loader: "json-loader" }, // the following 3 rules handle font extraction { test: /\.woff(2)?(\?v=[0-9]\.[0-9]\.[0-9])?$/, loader: 'url-loader?limit=10000&mimetype=application/font-woff' }, { test: /\.(ttf|eot)(\?v=[0-9]\.[0-9]\.[0-9])?$/, loader: 'file-loader' }, { test: /\.otf(\?.*)?$/, use: 'file-loader?name=/fonts/[name]. [ext]&mimetype=application/font-otf' } ] }, plugins : [ new webpack.ProvidePlugin({ "React": "react", 'react-dom': 'ReactDOM' }) ], resolve: { extensions: ['.js', '.es6', '.jsx', 'less','config','variables','overrides'] }, performance: { hints: false }, watch: false, target: 'web', devServer: { stats: { colors: true, chunks: false, hash: false, version: false, timings: false, assets: false, reasons: false, children: false, source: false, errors: false, errorDetails: false, warnings: false, noInfo: true } }, externals: [ {pg: true} ], node: { fs: 'empty' } }; 

1 Answer 1

1

I found a solution to remove the following: instead of

 entry: { pit: [babel-polyfill', './index.js', './src/shared/styles.less'] }, 

you need remove heavy loaded babel-polyfill'. So you have in this part:

 entry: { pit: [ './index.js', './src/shared/styles.less'] }, 

and you need to remove heavy executable rule:

 { test: /\.(htm|html|xhtml|hbs|handlebars|php|ejs)$/i, exclude: /node_modules/, loader: "file?name=[name].[ext]", }, 

As a result you will have quite quick script for webpack-dev-server:

'use strict'; var path = require('path'); var webpack = require('webpack'); var glob = require("glob"); module.exports = { entry: { pit: [ './index.js', './src/shared/styles.less'] }, output: { path: path.resolve(__dirname, 'dist/'), //publicPath: '/', filename: 'bundle.[name].js' }, module: { rules: [ { test: /(\.js[\S]{0,1})$/i, exclude: /node_modules/, loaders: ['babel-loader?presets[]=env&presets[]=react&presets[]=stage-0&presets[]=stage-2'] }, { test: /\.css$/i, exclude: [/node_modules/], loader: 'style-loader!css-loader' }, { test: /\.less$/i, exclude: /node_modules/, use: [{ loader: "style-loader" // creates style nodes from JS strings }, { loader: "css-loader" // translates CSS into CommonJS }, { loader: "less-loader" // compiles Less to CSS }] }, // this rule handles images { test: /\.woff(2)?(\?v=[0-9]\.[0-9]\.[0-9])?$/, loader: "url-loader?limit=10000&mimetype=application/font-woff" }, { test: /\.(ttf|eot|svg)(\?v=[0-9]\.[0-9]\.[0-9])?$/, loader: "file-loader" }, { test: /\.(jpe?g|png|gif)$/i, exclude: /node_modules/, use: [ 'url-loader?limit=10000', 'img-loader', 'file-loader?name=[name].[ext]?[hash]' ] }, { test: /\.json$/, exclude: /node_modules/, loader: "json-loader" }, // the following 3 rules handle font extraction { test: /\.woff(2)?(\?v=[0-9]\.[0-9]\.[0-9])?$/, loader: 'url-loader?limit=10000&mimetype=application/font-woff' }, { test: /\.(ttf|eot)(\?v=[0-9]\.[0-9]\.[0-9])?$/, loader: 'file-loader' }, { test: /\.otf(\?.*)?$/, use: 'file-loader?name=/fonts/[name]. [ext]&mimetype=application/font-otf' } ] }, plugins : [ new webpack.ProvidePlugin({ "React": "react", 'react-dom': 'ReactDOM' }) ], resolve: { extensions: ['.js', '.es6', '.jsx', 'less','config','variables','overrides'] }, performance: { hints: false }, watch: false, target: 'web', devServer: { stats: { colors: true, chunks: false, hash: false, version: false, timings: false, assets: false, reasons: false, children: false, source: false, errors: false, errorDetails: false, warnings: false, noInfo: true } }, externals: [ {pg: true} ], node: { fs: 'empty' } }; 
Sign up to request clarification or add additional context in comments.

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.