How to get Webpack, Wordpress, and BrowserSync to work together?

Things may have changed with new version of Webpack and BrowserSync for Wordpress by mid-2018 – but I have a very simple, modern Webpack and BrowserSync recipe for Wordpress that has live reload for JS, CSS, and PHP. This uses React, but isn't specific to a React setup, just ES6 module importing/exporting.

Folder structure:

theme⊢⊸ api  ⊢⊸ models  ⊢⊸ controllers  ⊢⊸  index.php⊢⊸ frontend  ⊢⊸ src    ⊢⊸ App.js    ⊢⊸ App.css    ⊢⊸ index.js  ⊢⊸ .babelrc  ⊢⊸ package.json  ⊢⊸ postcss.config.js  ⊢⊸ webpack.config.js  ⊢⊸ yarn.lock⊢⊸ main.js⊢⊸ functions.php⊢⊸ index.php⊢⊸ style.css

Package.json:

"scripts": {  "start": "webpack --mode development --watch",  "build": "webpack --mode production"},"devDependencies": {  "autoprefixer": "^8.5.0",  "babel-core": "^6.26.3",  "babel-loader": "^7.1.4",  "babel-preset-env": "^1.7.0",  "babel-preset-react": "^6.24.1",  "browser-sync": "^2.24.4",  "browser-sync-webpack-plugin": "^2.2.2",  "css-loader": "^0.28.11",  "extract-text-webpack-plugin": "^4.0.0-beta.0",  "postcss-loader": "^2.1.5",  "react": "^16.4.0",  "react-dom": "^16.4.0",  "style-loader": "^0.21.0",  "webpack": "^4.8.3",  "webpack-cli": "^2.1.3",  "webpack-dev-server": "^3.1.4"}

Webpack.config.json

const path = require('path');const ExtractTextPlugin = require('extract-text-webpack-plugin');const BrowserSyncPlugin = require('browser-sync-webpack-plugin');module.exports = {  entry: { main: './src/index.js' },  output: {    path: path.resolve(__dirname, './../'),    filename: 'main.js'  },  devtool: 'inline-source-map',  devServer: {    openPage: '',  },  module: {    rules: [      {        test: /\.js$/,        exclude: /node_modules/,        use: {          loader: "babel-loader"        }      },      {        test: /\.css$/,        use: ExtractTextPlugin.extract(          {            fallback: 'style-loader',            use: ['css-loader', 'postcss-loader']          }        )      }    ]  },  plugins: [     new ExtractTextPlugin({filename: 'style.css'}),    new BrowserSyncPlugin({      files: [        './../',        './../api/**/*.php',        './../api/*.php',        './',         '!./node_modules',        '!./yarn-error.log',        '!./package.json',        '!./style.css.map',        '!./app.js.map'      ],      reloadDelay: 0    })  ]};

Postcss.config.js

module.exports = {  plugins: [    require('autoprefixer')  ]}

.babelrc

{  "presets": ["env", "react"]}

Other recommendations include Prettier on precommit (using Lint-Staged and Husky) for code formatting on all JS projects, appropriate .gitignore usage where applicable here, and ACF Builder for WP devs.

Well, not exactly a well-crafted answer but I have a very basic Webpack setup in my Gutenberg Boilerplate that will help you get started with ESNext, React, Webpack in WordPress.

Check out the Block #02 and it's configuration.

I wanted to answer this for you with a link:https://css-tricks.com/combine-webpack-gulp-4/

This article goes through everything needed to solve the problem. Works great for me. It does use gulp, but you could simply strip that out of the config and hack around a bit. The basics of the setup are all there though.