Open Stosiu opened 7 years ago
same problem
same on me...
@Stosiu, you're using pug-html-loader
in your config, not pug-loader
.
Same problem. Looks like webpack doesn't know about included files at all. I see possible solution there is to create custom loader, which will redefine include
logic: inline partials into pug template and add them to watch. But it seems to be too complicated and I hope there's more simple way to accomplish that.
same problem... i use pug-loader. in Sass hot reload page, but in pug does not reload page.
if the entry point (index.js) prescribe index.pug, it will be overloaded. But it's better to do it only on Dev (not Prod).
my problem solved with this config
var HtmlWebpackPlugin = require("html-webpack-plugin");
var config = {
entry: {
ui: ['./src/categories/ui/index.js'],
},
output: {
path: './public/',
publicPath: '/',
filename: '[name].js',
chunkFilename: '[name]',
devtool: 'cheap-module-source-map',
},
module: {
loaders: [{
test: /\.pug$/,
loader: 'pug'
}]
},
plugins: [
new HtmlWebpackPlugin({
name: 'ui',
hash: true,
chunks: ['ui'],
template: './src/categories/ui/index.pug',
filename: 'index.html'
})
],
devServer: {
host: '0.0.0.0',
port: 8888,
contentBase: './public',
lazy: false
}
};
and this command
webpack-dev-server --watch --progress --inline
but hot reload did not get to work properly :|
We also experiencing the same problem
same issue, you can make your template a mixin and include the file then+ it (instead of including it directly), not perfect but work
@SrShark this solves the problem ? ( hot reload page if use pug )
@OrionPro if you use the Module Replacement (HMR) No, don't resolve that problem. But if you use only DevServer, it is reloading perfect.
@SrShark i use the Module Replacement (HMR) ... (HotModuleReplacementPlugin if we about him)
Finally I found the solution. it was hard! but it's working.
Webpack-dev-server - Module Replacement (HMR) don't reload PUG files changes
@OrionPro i resolved it
@SrShark and than this decision differs from import '../../pages/index/index.pug'; about which have already written above? I wrote about it on 2 Jun :). I then delete this when compile development...
@SrShark that's what I see at localhost: 9000 http://prntscr.com/h6v6uj ...I have not done import 'raw-loader!./templates/index.pug', there is something wrong with this. My configuration http://prntscr.com/h6v7uc
+1
Managed to get it worked without importing pug in js. Use this: https://github.com/jantimon/html-webpack-harddisk-plugin
var plugins = { HtmlWebpackPlugin: require('html-webpack-plugin'), HtmlWebpackHarddiskPlugin: require('html-webpack-harddisk-plugin'), ExtractTextPlugin: require('extract-text-webpack-plugin'), UglifyJsPlugin: require('uglifyjs-webpack-plugin'), PurifyCSSPlugin: require('purifycss-webpack') }
plugins: [ new plugins.HtmlWebpackPlugin({ template : 'src/pug/index.pug', filename: "../index.html", inject : true, alwaysWriteToDisk: true }), new plugins.HtmlWebpackHarddiskPlugin(), new plugins.ExtractTextPlugin("[name].css"), new plugins.UglifyJsPlugin(), new webpack.LoaderOptionsPlugin({ minimize: true }), ],
devServer: { contentBase: path.join(__dirname, "dist"), compress: true, port: 9000, // hot: true, watchContentBase: true, watchOptions: { ignored: /node_modules/ } }
module: { rules: [ { test: /.pug$/, // loaders: [ 'raw-loader', 'pug-html-loader' ] loaders: ['pug-loader' ] }, { test: /.js$/, loader: 'babel-loader?cacheDirectory=true', exclude: /node_modules/, }, { test: /.scss$/, use: ['css-hot-loader'].concat(plugins.ExtractTextPlugin.extract({ use: [ 'css-loader', { loader: 'sass-loader', options: { includePaths: ['./', 'node_modules'] } } ], fallback: "style-loader" })) }, { test: /.(png|jpe?g|gif|svg)$/, loader: 'file-loader', options: { name: 'img/[name].[ext]' } } ] },
I have the same problem. HTML files are not updated with Webpack Dev Server when I modified a PUG template.
let webpackBase = {
devtool: config.dev ? 'source-map' : false,
entry: config.entry,
output: {
path: config.assetsPath,
publicPath: config.assetsPublicPath,
filename: config.dev ? '[name].js' : '[name].[chunkhash:8].min.js',
},
devServer: config.devServer,
module: {
rules: [
{
test: /\.pug$/,
use: {
loader: 'pug-loader',
options: {
pretty: true,
self: true,
},
},
},
{
test: /\.js$/,
exclude: /(node_modules|bower_components)/,
include: root,
enforce: 'pre',
use: [
{
loader: 'babel-loader',
options: {
babelrc: true,
},
},
{
loader: 'eslint-loader',
},
],
},
{
test: /\.css$/,
use: ExtractTextPlugin.extract({
fallback: 'style-loader',
use: [...cssLoaders, 'resolve-url-loader'],
}),
},
{
test: /\.(sass|scss)$/,
use: ExtractTextPlugin.extract({
use: [...cssLoaders, 'sass-loader'],
}),
},
{
test: /\.(woff2?|woff|eot|ttf|otf|mp3|wav)(\?.*)?$/,
use: {
loader: 'file-loader',
options: {
name: '[name].[ext]',
outputPath: './fonts/',
},
},
},
{
test: /\.(png|jpe?g|gif|svg)$/,
use: [
'file-loader',
{
loader: 'image-webpack-loader',
options: {
mozjpeg: {
progressive: true,
quality: 65,
},
pngquant: {
quality: '65-90',
speed: 4,
},
gifsicle: {
interlaced: false,
},
webp: {
quality: 75,
},
},
},
],
},
],
},
plugins: [
new webpack.ProvidePlugin({
$: 'jquery',
jQuery: 'jquery',
}),
new CopyWebpackPlugin([
{
from: 'src/js/vendor_async/',
to: 'js/vendor_async/',
},
{
from: 'src/fonts/',
to: 'fonts/',
},
{
from: 'src/img/bg-sample/',
to: 'img/bg-sample/',
},
{
from: 'src/img/sample/',
to: 'img/sample/',
},
]),
new SvgStore(
path.resolve(__dirname, './../src/img/icons/*.svg'),
path.resolve(__dirname, './../dist/assets/icons/'),
{
name: 'icons',
prefix: 'icon-',
chunk: 'svg',
svgoOptions: {
plugins: [
{
removeTitle: true,
},
],
},
}
),
].concat(htmlRender),
}
I remember when I handled this problem, and now I come back to share my new improvement.
https://github.com/pugjs/pug-loader/issues/75#issuecomment-342122079
I SOLVED whit this npm module. webpack-livereload-plugin
Config Webpack 3.x using babel
import LiveReloadPlugin from 'webpack-livereload-plugin'
plugins: [ new LiveReloadPlugin({ appendScriptTag: true }) ]
Hello 👋🏻 I want to use
WebpackDevServer
withpug-loader
. My problem is that, it's not reloading the page after change in included files. Any ideas what am I doing wrong?My
webpack.config.js
:server.js
: