我正在开发一个使用 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 文件夹没有在终端中创建而没有错误!