Сервер разработки Webpack с Wordpress - PullRequest
Новая
       8

Сервер разработки Webpack с Wordpress

0 голосов
/ 06 сентября 2018

Я использую Webpack для разработки своей темы WP, и я действительно хотел бы использовать HMR. Итак, основываясь на моем обычном веб-пакете 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

Это не работает. Но я действительно хотел бы знать, почему и как его отладить (например, как получить доступ к CSS / JS, используемому webpack-dev-server)?

...