Webpack 网页包4 |帕格文件不';不能自动编译
我正在从事一个项目,其中我使用Pugjs作为模板引擎。 和Webpack4作为捆绑包 当我更改Webpack 网页包4 |帕格文件不';不能自动编译,webpack,pug-loader,Webpack,Pug Loader,我正在从事一个项目,其中我使用Pugjs作为模板引擎。 和Webpack4作为捆绑包 当我更改.pug文件中的任何内容时,我必须手动重新运行编译器 有没有关于如何设置它以便在编辑文件后编译器运行的帮助 webpack.config.js const path = require('path'); const HtmlWebpackPlugin = require('html-webpack-plugin'); const WebpackMd5Hash = require('webpack-md5
.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创建dev服务器
但是当我使用
webpack dev server
时,它创建了服务器,但是dist文件夹没有在终端中创建错误 您有两种选择:
--watch
参数运行webpack
webpack --watch
使用上面的命令,webpack将监视您的文件,如果有任何更改,将重新编译您的代码。这是最简单的方法
网页包开发服务器
webpack dev server
为您提供了一个简单的web服务器,并在每次更改文件时重新加载浏览器
安装网页包开发服务器:
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
及
更新1
webpack dev server
不会在硬盘上创建任何文件,它只会在内存中创建文件以加快处理速度。否则,结果是相同的。您如何运行它?@PlayMa256 webpack dev server--模式开发出于开发原因,我想使用webpack dev server
,但它无法创建dist
目录,终端中没有任何错误
npx webpack-dev-server