Ich verwende Webpack für meine WP-Theme-Entwicklung und würde wirklich gerne das HMR verwenden. Basierend auf meiner üblichen Webpack-Conf (unter Verwendung des BrowserSync-Plugins zum Durchführen eines Live-Neuladens) möchte ich sie ändern, um sie zu verwenden webpack-dev-server mit dem hot Option richtig.
Folgendes habe ich bisher gemacht:
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: {
"https://stackoverflow.com/": {
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]' },
],
},
});
Ausführen dieses Befehls:
webpack-dev-server --config webpack.dev.js
Das funktioniert nicht. Aber ich würde wirklich wissen, warum und wie man es debuggt (z. B. wie man auf CSS/JS zugreift, das vom Webpack-Dev-Server verwendet wird)?
