如何在Wordpress网站上使用Webpack热模块替换?

是否可以通过Webpack启用Wordpress的热模块替换?

对我来说,最重要的是更换CSS自动功能,因此我不必一直刷新页面。有什么办法吗?

我通常使用Prepros实时编译我的S / CSS,并且效果很好,但是现在我需要更灵活,更强大的功能,因此我考虑使用webpack。另外,我遇​​到了一些问题,因此我认为这可能是一个不错的选择。

我需要做的是:

  1. 配置可与Wordpress配合使用的服务器-尝试使用devserver选项但没有成功
  2. 进行热模块更换工作-不走运

有人有经验吗?

我的webpack.config.js:

const path = require('path');

const MiniCssExtractPlugin = require("mini-css-extract-plugin");
const OptimizeCssAssetsplugin = require("optimize-css-assets-webpack-plugin");
const TerserPlugin = require("terser-webpack-plugin");

module.exports = {
    entry: {
        main: './src/main.js',},mode: 'development',devserver: {
        contentBase: path.join(__dirname,'dist'),port: 9000,hot: true,// proxy: { // I assume there is a catch here...not sure
        // }
    },output: {
        filename: '[name].min.js',path: path.resolve(__dirname,'dist')
    },optimization: {
        minimizer: [
            new OptimizeCssAssetsplugin(),new TerserPlugin(),]
    },module: {
        rules: [
            {
                test: /\.(sa|sc|c)ss$/,use: [ 
                    {
                        loader: MiniCssExtractPlugin.loader,{
                        loader: 'css-loader',options: {
                            url: false
                        }
                    },{
                        loader: 'postcss-loader',{
                        loader: 'resolve-url-loader'
                    },{
                        loader: 'sass-loader'
                    },]
            },{
                test: /\.(svg|png|jpg|gif)$/,use: {
                    loader: "file-loader",options: {
                        name: "[name].[ext]",outputPath: "images"
                    }
                }
            },{
                test: /\.(woff(2)?|ttf|eot)$/,use: [
                    {
                        loader: 'file-loader',options: {
                            name: '[name].[ext]',outputPath: 'fonts/'
                        }
                    },]
            }
        ],plugins: [
        new MiniCssExtractPlugin({
            path: path.resolve(__dirname,filename: "style.css",}),],}

我的主题结构:

-themeName/
-- index.php
-- functions.php
-- style.css
-- assets/
----- package.json
----- webpack.config.js
----- node_modules/
----- dist/
------- fonts/
------- images/
------- style.css
------- main.js
----- src/
------- css/
--------- style.css
------- fonts/
------- images/
------- main.js
iCMS 回答:如何在Wordpress网站上使用Webpack热模块替换?

暂时没有好的解决方案,如果你有好的解决方案,请发邮件至:iooj@foxmail.com
本文链接:https://www.f2er.com/2020943.html

大家都在问