Jak zmusić Webpacka, Wordpressa i BrowserSync do współpracy?

Question

Jestem w tym od około tygodnia i nie byłem w stanie zmusić trójki do wspólnej pracy. Będę wiecznie wdzięczny, jeśli ktoś mi pomoże, zmarnowałem tyle godzin.

Emisja:
Gdybym myserver.dev proxy błędy 404 hot przeładowaniem. Zmiana publicznej ścieżki nic nie robi. Załączam URL do webpack-hot-middleware/client, naprawia ścieżkę, ale plik hmr kończy się błędem "GET" w konsoli bez informacji. Gorące ponowne ładowanie działa dobrze, jeśli trzymam go w HTML i pomijam php/MAMP. Jestem ogólnie bardzo zdezorientowany i prawdopodobnie brakuje mi prostej koncepcji.

Próbuję dostać się do pracy razem:
- Wordpress za REST API
- React dla poglądów i ui
- MAMP dla localhost & MySQL
- BrowserSync do testowania różnych urządzeniach
- WebPACK do kompilowania i gorący przeładunku

to jest boilerplate użyłem: https://github.com/Browsersync/recipes/tree/master/recipes/webpack.react-hot-loader

Struktura Motyw katalog:
-/inc
-/src
-/komponenty
-/pojemniki
-/style
--app.js
-bundle .js
-functions.php
-index.php
-package.json
-server.js
-style.css
-webpack.config.js

Próbowałem milion konfiguracje więc wypatroszone poniższy kod na litość uproszczeń.

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.github.io/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

Chciałem odpowiedzieć na to dla ciebie z linkiem: https://css-tricks.com/combine-webpack-gulp-4/

Ten artykuł przechodzi przez wszystko, co potrzebne, aby rozwiązać ten problem. Działa doskonale dla mnie. Używa ona połknąć, ale można po prostu usunąć go z config i hack dookoła. Podstawy konfiguracji są jednak dostępne.

Answer 2

Cóż, niezupełnie dobrze napisana odpowiedź, ale mam bardzo prostą konfigurację Webpack w moim Gutenberg Boilerplate, która pomoże ci rozpocząć pracę z ESNext, React, Webpack w WordPress.

Sprawdź numer Block #02 i numer configuration.