I typically develop React apps but due to some client concerns I am having to develop a site for them on top of Wordpress. There are some very dynamic portions of the site, so I decided to implement webpack so that I enjoy some of the luxuries of a modern framework along the way. And it's working great. With the exception of the fact that it can take around 10 seconds for a BrowserSync live reload to complete.
Granted, I'm new to webpack, so I'm sure I'm missing something. I know that with React in the past I have used webpack-dev-server with HMR. And here I am using BrowserSync, a la this tutorial: https://www.kirstencassidy.com/incorporting-webpack-wordpress-theme-part-2/
I've implemented things like hardsource plugin and cache-loader to try to speed things up. And I've followed the suggestions offered here: BrowserSync extremely slow having to do with IPv6 proxying and adding ::1 [site].com.test entries to /etc/hosts. But nothing seems to help speed things up.
webpack.config.js:
const path = require('path')
const webpack = require('webpack')
const ExtractTextPlugin = require('extract-text-webpack-plugin')
const UglifyJsPlugin = require('uglifyjs-webpack-plugin')
const BrowserSyncPlugin = require('browser-sync-webpack-plugin')
const HardsourceWebpackPlugin = require('hard-source-webpack-plugin')
const config = require('./config')
module.exports = function(env) {
return {
entry: {
main: "./js/index.js",
home: "./js/components/pages/home.js",
connect: "./js/components/pages/connect/index.js",
learn: "./js/components/pages/learn/index.js",
community: "./js/components/pages/learn/community.js",
founders: "./js/components/pages/learn/founders.js"
},
output: {
path: path.resolve(__dirname + "/dist"),
filename: "[name].bundle.js"
},
module: {
rules: [
{
test: /\.js$/,
exclude: /node_modules/,
use: [
{
loader: "cache-loader"
},
{
loader: "babel-loader",
options: {
presets: ["env"]
}
}
]
},
{
test: /\.html$/,
use: [
{
loader: "cache-loader"
},
{
loader: "raw-loader"
}
],
exclude: /node_modules/
},
{
test: /\.scss$/,
use: ExtractTextPlugin.extract({
fallback: "style-loader",
use: [
{
loader: "cache-loader"
},
{
loader: "css-loader"
},
{
loader: "sass-loader"
}
]
}),
exclude: /node_modules/
},
{
test: /\.woff($|\?)|\.woff2($|\?)|\.ttf($|\?)|\.eot($|\?)/,
loader: 'url-loader',
exclude: /node_modules/
},
{
test: /\.(png|svg|jpg|gif)$/,
use: [
'file-loader'
],
exclude: /node_modules/
}
]
},
devServer: {
historyApiFallback: true,
compress: true,
port: 3001,
https: config.url.indexOf('https') > -1 ? true : false,
publicPath: config.fullPath,
proxy: {
'*': {
'target': config.url,
'secure': false
},
'/': {
target: config.url,
secure: false
}
}
},
plugins: [
new HardsourceWebpackPlugin(),
new ExtractTextPlugin({
filename: 'styles/[name].css',
allChunks: true
}),
new webpack.optimize.CommonsChunkPlugin({
name: 'common'
}),
// new UglifyJsPlugin({
// sourceMap: true,
// uglifyOptions: {
// ie8: false,
// ecma: 8,
// mangle: true,
// output: {
// comments: false,
// beautify: false
// },
// warnings: false
// }
// }),
new BrowserSyncPlugin({
proxy: config.url,
files: [
'**/*.php'
],
reloadDelay: 0,
online: true
})
]
}
}config.js:
module.exports = {
url: 'http://fakewebsite.com.test/',
themeDir: '/wp-content/themes/CGO/',
fullPath: 'http://fakewebsite.com.test/wp-content/themes/CGO/',
ip: '127.0.0.1'
}and here's a screenshot of cli log if this gives anyone some clues:
Any clue what I might be doing wrong? What can I do to speed up webpack performance? Is it just because I am compiling so many scss/js files at once? Live reloads are great but when rapid iterations are being made the 10 second interval is really annoying.
