Webpack 3 Hot Reload Very Slow
Info: I am using webpack 3.4.1 with webpack-dev-server 2.5.1
Using the below configuration with '-hot -inline' I get a very slow reboot. I can remove the "-hot" and do a very fast reload, but I would rather change the css on the fly using hot reload.
common.js
const webpack = require('webpack');
const htmlWebpackPlugin = require('html-webpack-plugin');
const ExtractTextPlugin = require('extract-text-webpack-plugin');
const { resolvePath } = require('./helpers');
const env = process.env.NODE_ENV;
const cssLoader = {
test: /\.css$/,
loader: ExtractTextPlugin.extract('css-loader?sourceMap')
};
const lessLoader = {
test: /\.less$/,
loaders: ['style-loader', 'css-loader', 'less-loader']
}
const babelLoader = {
test: /\.js?$/,
include: [
resolvePath('src/app'),
],
exclude: /(node_modules)/,
loader: 'babel-loader',
};
const htmlLoader = {
test: /\.html$/,
loader: 'ngtemplate-loader?relativeTo=' + resolvePath('src') + '/!html-loader'
};
const fontLoader = {
test: /\.woff(2)?(\?v=[0-9]\.[0-9]\.[0-9])?$/,
loader: 'url-loader?limit=10000&mimetype=application/font-woff'
};
const fileLoader = {
test: /\.(ttf|eot|svg|otf|png|jpg|gif|ico)(\?v=[0-9]\.[0-9]\.[0-9])?$/,
loader: 'file-loader'
};
const jsonLoader = {
test: /\.json$/,
loader: 'json-loader'
};
const tinyMCELoader = {
test: require.resolve('tinymce/tinymce'),
loaders: [
'imports-loader?this=>window',
'exports-loader?window.tinymce'
]
}
const tinyMCEThemeLoader = {
test: /tinymce\/(themes|plugins)\//,
loader: 'imports-loader?this=>window'
}
const config = {
devtool: 'inline-source-map',
entry: {
vendor: resolvePath('src/app/vendor.js'),
app: resolvePath('src/app/app.js')
},
target: 'web',
output: {
path: resolvePath('public'),
publicPath: '/',
filename: '[name].js'
},
module: {
loaders: [
babelLoader,
lessLoader,
htmlLoader,
cssLoader,
fontLoader,
fileLoader,
jsonLoader,
tinyMCELoader,
tinyMCEThemeLoader
]
},
plugins: [
new webpack.ProvidePlugin({
$: 'jquery',
jQuery: 'jquery',
'window.jQuery': 'jquery'
}),
new webpack.optimize.CommonsChunkPlugin({
name: 'vendor'
}),
new ExtractTextPlugin('[name].[contenthash].css'),
new htmlWebpackPlugin({
template: resolvePath('public/index.ejs'),
favicon: resolvePath('src/favicon.ico'),
inject: true,
env
})
],
resolve: {
alias: {
api: resolvePath('src/app/api/apiUrl.js')
}
}
};
module.exports = config;
and dev.js
const webpackMerge = require('webpack-merge');
const commonConfig = require('./common.js');
const UglifyJsPlugin = require('uglifyjs-webpack-plugin');
const { resolvePath } = require('./helpers');
const { HOST, PORT } = process.env;
const port = PORT || 1337;
const host = HOST || 'localhost';
const devConfig = {
devtool: 'cheap-module-source-map',
devServer: {
contentBase: resolvePath('public'),
port,
host,
historyApiFallback: true,
watchOptions: {
aggregateTimeout: 300,
poll: 1000
}
},
plugins: [
new UglifyJsPlugin({
include: ['vendor.js']
})
]
};
module.exports = () => webpackMerge(commonConfig, devConfig);
I tried to uninstall Extract-Text-Plugin but to no avail. Any ideas for a quick reboot? I was thinking about disabling vendor.js compilation, but I don't know here to add that. Thank.
+3
source to share
No one has answered this question yet
Check out similar questions: