Javascript 如何让Webpack、Wordpress和BrowserSync协同工作？

我已经做了大约一个星期了，我还没能让这三个人一起工作。如果有人能帮我，我将永远感激，我已经浪费了这么多时间

问题：
如果我代理myserver.dev热重新加载404s。更改公共路径没有任何作用。我将url附加到webpack hot middleware/client，它修复了路径，但hmr文件最终在控制台中出现“GET”错误，没有任何信息。如果我将其保留为HTML，而忽略任何php/MAMP，则热重新加载工作正常。总的来说，我真的很困惑，我可能缺少一个简单的概念

我想让大家一起工作的内容：
-Wordpress的REST API
-对视图和ui作出反应
-本地主机和MySQL的MAMP
-用于跨设备测试的BrowserSync
-用于编译和热重新加载的网页包

这是我使用的样板文件：

主题目录结构：
-/公司
-/src
--/组件
--/容器
--/样式
--app.js
-bundle.js
-functions.php
-index.php
-package.json
-server.js
-style.css
-webpack.config.js

我已经尝试了一百万种配置，因此为了简单起见，我删掉了下面的代码。

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'] }
    ]
  }
};

{
  "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"
  }
}

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:

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'] }
    ]
  }
};

{
  "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"
  }
}

---

嗯，这不是一个精心设计的答案，但我有一个非常基本的网页设置，可以帮助你开始使用ESNext，React，WordPress中的网页

---

请查看和。

我想通过一个链接为您解答这个问题：

---

本文介绍了解决该问题所需的一切。这对我很有用。它确实使用了gulp，但您可以简单地将其从配置中删除，并稍加修改。不过，基本的设置都在那里。

到2018年年中，Wordpress的新版本Webpack和BrowserSync可能已经改变了一切，但我有一个非常简单、现代的Wordpress Webpack和BrowserSync配方，可以实时重新加载JS、CSS和PHP。这使用React，但不特定于React设置，仅用于ES6模块的导入/导出

文件夹结构：

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
    })
  ]
};

postss.config.js

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

B.法律改革委员会

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

---

其他建议包括对所有JS项目上的代码格式进行预提交（使用Lint Staged和Husky），适当的

.gitignore

用法（如适用），以及对WP开发人员。

publicPath

指定在浏览器中引用时输出文件的公共URL地址<代码>\uuu dirname在这里是错误的，应该是

http://localhost:3000

。你有没有想过？嗨。你知道如何通过设置实现CSS更改的热重新加载吗？@Chopnut使用此设置，CSS应该是热重新加载的。如果2年的版本有任何变化，我建议您在

BrowserSyncPlugin中的
文件列表中添加
*.css
行