webpack htmlwebpackplugin检测新模板文件

问题描述

我已经设法为前端设置了新的样板，到目前为止，我们一直使用gulp。

到目前为止，在为pug文件夹中的每个文件生成html的地方，一切正常，但是问题在于，只有在执行npm start或npm run build时才编译这些文件。

我要使其“监视” pug文件夹，并且对于每个新模板，它都应该初始化HtmlWebpackPlugin的新实例，因此我无需重新启动webpack即可看到新模板。

这是我的webpack配置

/* global __dirname */
const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const fs = require('fs');

function generateHtmlPlugins(templateDir) {
    const templateFiles = fs.readdirSync(path.resolve(__dirname,templateDir),{withFileTypes: true});
    return templateFiles.filter(item => item.isFile()).map(item => item.name).map(item => {
        const parts = item.split('.')
        const name = parts[0]
        const extension = parts[1]
        return new HtmlWebpackPlugin({
            filename: `${name}.html`,template: path.resolve(__dirname,`${templateDir}/${name}.${extension}`)
        })
    })
}

class WatchExternalFilesPlugin {

}

WatchExternalFilesPlugin.prototype.apply = (compiler) => {
    compiler.plugin('after-compile',(compilation,callback) => {
        [path.join(__dirname,'fe/src/pug')].forEach(path => compilation.contextDependencies.add(path));
        callback();
    });
};

module.exports = {
    entry: path.join(__dirname,'fe/src/js/app.js'),output: {
        path: path.join(__dirname,'fe/public'),filename: 'app.min.js'
    },plugins: [
        ...generateHtmlPlugins('./fe/src/pug'),new MiniCssExtractPlugin({
            filename: 'app.min.css',minify: true,}),new WatchExternalFilesPlugin(),],module: {
        rules: [
            {test: /\.js$/,include: [path.resolve(__dirname,'fe/src/js')],loader: 'babel-loader'},{
                test: /\.scss$/,'fe/src/scss')],use: [
                    MiniCssExtractPlugin.loader,'css-loader','postcss-loader','sass-loader',]
            },{
                test: /\.pug$/,'fe/src/pug')],use: [
                    "pug-loader"
                ]
            },{
                test: /\.(woff(2)?|ttf|eot|svg|otf)(\?v=\d+\.\d+\.\d+)?$/,'fe/src/fonts')],use: [{
                    loader: 'file-loader',options: {
                        name: '[name].[ext]',outputPath: 'fonts/',}
                }]
            },{
                test: /\.(png|jpe?g|gif|svg)$/i,'fe/src/img')],options: {
                        name: '[path]/[name].[ext]',outputPath: (url,resourcePath,context) => {
                            const relativePath = path.relative(context,resourcePath);
                            return relativePath.replace('fe\\src','').replace('fe/src','');
                        },]
    },devServer: {
        contentBase: path.join(__dirname,compress: false,open: true,port: 8080,},}

谢谢您的时间

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）