网页包 4 | pug 文件不会自动编译

Question

我正在做一个项目，在这个项目中我使用 Pugjs 作为模板引擎。和 webpack 4 作为捆绑器。

当我更改 .pug 文件中的任何内容时，我必须手动重新运行编译器。

关于如何设置它以便编译器运行一旦我编辑文件的任何帮助？

webpack.config.js

const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const WebpackMd5Hash = require('webpack-md5-hash');
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
const CleanWebpackPlugin = require('clean-webpack-plugin');


module.exports = {
entry: {
    main: './src/index.js'
},
output: {
    path: path.resolve(__dirname, 'dist'),
    filename: '[name].[chunkhash].js'
},
module: {
    rules: [
        {
            test: /\.scss$/,
            use: ['style-loader', MiniCssExtractPlugin.loader, 'css-loader', 'postcss-loader', 'sass-loader']
        },
        {
            test: /\.(woff(2)?|ttf|eot|svg)(\?v=\d+\.\d+\.\d+)?$/,
            exclude: [/images/],
            use: [{
                loader: 'file-loader',
                options: {
                    name: '[name].[ext]',
                    outputPath: './assets/fonts/'
                }
            }]
        },
        {
            test: /\.(png|svg|jpg|gif)$/,
            exclude: [/fonts/],
            use: {
                loader: 'file-loader',
                options: {
                    outputPath: './assets/images/',
                    name: '[name].[ext]',
                }
            }
        },
        {
            test: /\.js$/,
            exclude: /node_modules/,
            use: {
                loader: "babel-loader"
            }
        },
        {
            test: /\.pug$/,
            use: ['html-loader?interpolate', 'pug-html-loader']
        }
    ]
},
plugins: [
    new CleanWebpackPlugin('dist', {}),
    new MiniCssExtractPlugin({
        filename: 'style.[contenthash].css',
    }),

    new HtmlWebpackPlugin({
        // inject: false,
        hash: true,
        template: './src/index.pug',
        filename: 'index.html',
        title:'home'
    }),
    new HtmlWebpackPlugin({
        filename: 'contact.html',
        hash: true,
        template: './src/contact.pug',
        // inject: false,
        title: 'contact'
    }),
    new WebpackMd5Hash()
 ]
};

更新 1 当我使用 webpack 命令时它工作正常但它不会为 sue 创建开发服务器但是当我使用 webpack-dev-server 它创建服务器但是 dist 文件夹没有在终端中没有错误地创建！

Answer 1

您有 2 个选择：

使用 Webpack 的监视模式
使用 webpack-dev-server

Webpack 观看模式 只是运行带有 --watch 参数的 webpack

webpack --watch

使用上面的命令，webpack 将监视您的文件，并在进行任何更改后重新编译您的代码。这是最简单的方法。

webpack-dev-server webpack-dev-server 为您提供了一个简单的网络服务器，并在您每次对文件进行任何更改时重新加载浏览器。

安装webpack-dev-server:

npm install --save-dev webpack-dev-server

同时添加 devServer 您的 webpack.config.js 文件：

module.exports = {
    devServer: {
        contentBase: './dist'
    }
}

现在运行它与 webpack-dev-server。您可以在 localhost:8080 上访问您的网页，对您的文件所做的任何更改也会重新编译您的包并重新加载您的浏览器。

请注意，您可能需要运行上述命令与 npx:

npx webpack --watch

和

npx webpack-dev-server

更新 1 webpack-dev-server 不在硬盘上创建任何文件——它只在内存中创建文件以加快处理速度。否则，结果是一样的。

网页包 4 | pug 文件不会自动编译

Webpack 4 | pug files doesn't compile automatically

webpack

pug-loader