워드프레스가 있는 웹팩 개발 서버

워드프레스가 있는 웹팩 개발 서버

WP 테마 개발을 위해 웹팩을 사용하고 있는데 HMR을 정말 사용하고 싶습니다. 그래서 보통의 웹팩 컨프(브라우저싱크 플러그인을 사용하여 실시간 재로드를 수행)를 기반으로 사용하기 위해 수정하고 싶습니다.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

이거 안 돼요.하지만 왜 그리고 어떻게 디버깅하는지 정말 알고 싶습니다(예: 웹팩-dev-server에서 사용하는 CSS/JS에 액세스하는 방법).

언급URL : https://stackoverflow.com/questions/52204987/webpack-dev-server-w-wordpress