是否可以通过Webpack启用Wordpress的热模块替换?
对我来说,最重要的是更换CSS自动功能,因此我不必一直刷新页面。有什么办法吗?
我通常使用Prepros实时编译我的S / CSS,并且效果很好,但是现在我需要更灵活,更强大的功能,因此我考虑使用webpack。另外,我遇到了一些问题,因此我认为这可能是一个不错的选择。
我需要做的是:
- 配置可与Wordpress配合使用的服务器-尝试使用
devserver
选项但没有成功 - 进行热模块更换工作-不走运
有人有经验吗?
我的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