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

Question

I have been doing this for about a week, and I have not been able to get them to work together. I will be eternally grateful if anyone can help me, I spent so much time.

Problem:
If I proxy myserver.dev hot reboot 404s. Changing publicPath does nothing. I attach the url to webpack-hot-middleware / client, it fixes the path, but the "GET" error appears in the hmr file in the console without information. A hot reload works fine if I keep it in HTML and ignore any php / MAMP. I am generally very confused, and I probably missed a simple concept.

What I'm trying to work together:
- Wordpress for its REST API
- Respond to species and ui
- MAMP for localhost and MySQL
- BrowserSync for testing on different devices
- Webpack for compilation and hot restart

This is the template I used: https://github.com/Browsersync/recipes/tree/master/recipes/webpack.react-hot-loader

Style Catalog Structure:
- / on
- / center
-/Components
- / containers
- / styles
--app.js
-bundle.js
-functions.php
-index.php
-package.json
-server.js
-style.css
-webpack.config.js

I tried a million configurations, so I touched the code below for simplicity.

webpack.config.js:

var webpack = require('webpack'); var path = require('path'); module.exports = { context: path.join(__dirname, 'src'), entry: [ 'webpack/hot/dev-server', 'webpack-hot-middleware/client', './app' ], output: { path: __dirname, publicPath: __dirname, filename: 'bundle.js' }, plugins: [ new webpack.optimize.OccurenceOrderPlugin(), new webpack.HotModuleReplacementPlugin(), new webpack.NoErrorsPlugin() ], module: { loaders: [ { test: /\.jsx?$/, exclude: /node_modules/, loaders: ['react-hot', 'babel'] } ] } }; 

server.js:

 /** * Require Browsersync along with webpack and middleware for it */ var browserSync = require('browser-sync'); var webpack = require('webpack'); var webpackDevMiddleware = require('webpack-dev-middleware'); var webpackHotMiddleware = require('webpack-hot-middleware'); /** * Require ./webpack.config.js and make a bundler from it */ var webpackConfig = require('./webpack.config'); var bundler = webpack(webpackConfig); /** * Run Browsersync and use middleware for Hot Module Replacement */ browserSync({ proxy: { target: 'http://myserver.dev', middleware: [ webpackDevMiddleware(bundler, { // IMPORTANT: dev middleware can't access config, so we should // provide publicPath by ourselves publicPath: webpackConfig.output.publicPath, // pretty colored output stats: { colors: true } // for other settings see // http://webpack.imtqy.com/docs/webpack-dev-middleware.html }), // bundler should be the same as above webpackHotMiddleware(bundler) ] }, // prevent opening a new window. open: false, // no need to watch '*.js' here, webpack will take care of it for us, // including full page reloads if HMR won't work files: [ ] }); 

package.json:

 { "main": "server.js", "scripts": { "build": "webpack", "start": "node ." }, "dependencies": { "babel-core": "^5.8.9", "babel-loader": "^5.3.2", "browser-sync": "^2.8.0", "react": "^0.13.3", "react-hot-loader": "^1.2.8", "webpack": "^1.10.5", "webpack-dev-middleware": "^1.2.0", "webpack-hot-middleware": "^1.1.0" } } 

Answer 1

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

In this article we will consider everything necessary to solve the problem. Works great for me. It uses gulp, but you can just remove this from the configuration and hack a bit. The basics of customization do exist.

Answer 2

Well, not a well-thought out answer, but I have a very simple Webpack setup in my Gutenberg Boilerplate , which will help you get started with ESNext, React, Webpack in WordPress.

Pay attention to Block # 02 and configuration .