带Wordpress的Webpack开发服务器

Question

我正在使用Webpack进行WP主题开发，我真的很想使用HMR。因此，基于我通常的webpack conf（使用BrowserSync插件执行实时重载），我想对其进行修改，以便正确地将webpack-dev-server与hot选项一起使用。

这是我到目前为止所做的：

const webpack = require('webpack');
const merge = require('webpack-merge');
const common = require('./webpack.common.js');
const ExtractTextPlugin = require('extract-text-webpack-plugin');
const PostCSSCSSNext = require('postcss-cssnext')();
const WPThemeConfig = require('./wp.config');
// const BrowserSyncPlugin = require('browser-sync-webpack-plugin');
const extractSass = new ExtractTextPlugin(`css/${WPThemeConfig.cssFileName}.min.css`);


module.exports = merge(common, {
  mode: 'development',
  plugins: [
    extractSass,    
    new webpack.ProvidePlugin({
      $: 'jquery',
      jQuery: 'jquery',
    }),
    // new BrowserSyncPlugin({
    //   host: 'localhost',
    //   port: 3000,
    //   proxy: 'http://localhost:8888/'
    // })
  ],
  devServer: {    
    open: true,
    hotOnly: true,
    hot: true, 
    port: 3000,
    proxy: {
      '/': {
        target: 'http://localhost:8888',
        secure: false,
        changeOrigin: true,
        autoRewrite: true,
        headers: {
          'X-ProxiedBy-Webpack': true,
        },
      },
    },
    publicPath: "/wp-content/themes/my-theme/assets/",
  },
  module: {
    rules: [
      {
        test: /\.scss$/,
        exclude: /node_modules/,
        use: extractSass.extract({
          fallback: 'style-loader',
          use: [
            'css-loader',
            {
              loader: 'postcss-loader',
              options: {
                plugins: [
                  PostCSSCSSNext,
                ],
              },
            },
            'sass-loader',
          ],
        }),
      },
      {
        test: /\.js$/,
        exclude: /(node_modules|bower_components)/,
        use: {
          loader: 'babel-loader',
          options: {
            presets: ['@babel/preset-env']
          }
        }
      },
      {
        test: /\.css$/,
        exclude: /node_modules/,
        use: extractSass.extract({
          fallback: 'style-loader',
          use: [
            'css-loader',
            {
              loader: 'postcss-loader',
              options: {
                plugins: [
                  PostCSSCSSNext,
                ],
              },
            },
          ],
        }),
      },
      { test: /\.(png|jpg)$/, use: 'url-loader?limit=65000&mimetype=image/png&name=../img/[name].[ext]' },
      { test: /\.svg$/, loader: 'url-loader?limit=65000&mimetype=image/svg+xml&name=public/fonts/[name].[ext]' },
      { test: /\.woff$/, loader: 'url-loader?limit=650000&mimetype=application/font-woff&name=public/fonts/[name].[ext]' },
      { test: /\.woff2$/, loader: 'url-loader?limit=65000&mimetype=application/font-woff2&name=public/fonts/[name].[ext]' },
      { test: /\.[ot]tf$/, loader: 'url-loader?limit=650000&mimetype=application/octet-stream&name=public/fonts/[name].[ext]' },
      { test: /\.eot$/, loader: 'url-loader?limit=650000&mimetype=application/vnd.ms-fontobject&name=public/fonts/[name].[ext]' },

    ],
  },
});

运行此命令： webpack-dev-server --config webpack.dev.js

这不起作用。但是我真的想知道为什么，以及如何对其进行调试（例如，如何访问webpack-dev-server使用的CSS / JS）？