I'm trying to set up a basic dev environment for my WordPress work flow. I want to basically use the HMR capabilities of Webpack for reloading parts of the site without reloading. Currently, It's using Syncloader to watch php, css changes and reloading but I went one step further and use webpack-dev-server so it doesn't have to reload every time but localhost just points to the folder.
Here is my webpack config.
dev:
const merge = require( 'webpack-merge' );
const commonConfig = require( './webpack.common.js' );
const webpack = require( 'webpack' );
module.exports = merge( commonConfig, {
devtool: 'eval',
devServer: {
compress: true,
hot: true,
proxy: {
"/api": {
target: "mysite.dev",
pathRewrite: {"^/api" : ""}
}
}
},
module: {
rules: [
{
test: /\.scss$/,
use: [
'style-loader',
'css-loader',
{
loader: 'postcss-loader',
options: {
config: {
path: './config/postcss.config.js'
}
}
},
'sass-loader'
]
}
]
},
plugins: [
new webpack.HotModuleReplacementPlugin(),
new webpack.NamedModulesPlugin(),
new webpack.DefinePlugin({
'process.env': {
'NODE_ENV': JSON.stringify( 'development' )
}
})
]
});
common:
const path = require( 'path' );
module.exports = {
entry: path.resolve( __dirname, '../assets/scripts/bundle.js' ),
output: {
filename: "[name].js",
path: path.resolve( __dirname, '../dist' ),
publicPath: ''
},
module: {
rules: [
{
test: /\.js$/,
exclude: /node_modules/,
loader: 'babel-loader',
query: {
presets: [ 'es2015' ]
}
},
{
test: /\.css$/,
use: [ 'style-loader', 'css-loader' ]
},
{
test: /\.(ttf|eot|woff|woff2|svg)$/,
loader: 'file-loader',
options: {
name: 'fonts/[name].[ext]'
}
}
]
},
plugins: [
]
};