I have an Express app with pug and stylus. I've configured the HMR middleware and it reloads on stylus changes but not for pug changes.
I'm wondering if I'm missing a specific configuration. I also tried adding the pug-html-loader but that didn't work either.
// server.js app.set('views', path.join(__dirname, 'views')); app.set('view engine', 'pug'); const webpackDevMiddleware = require('./hmr').dev; const webpackHotMiddleware = require('./hmr').hot; app.use(webpackDevMiddleware); app.use(webpackHotMiddleware); // hmr.js const webpackDevMiddleware = require('webpack-dev-middleware'); const webpackHotMiddleware = require('webpack-hot-middleware'); const webpack = require('webpack'); const webpackConfig = require('./webpack.config.js'); const compiler = webpack(webpackConfig); exports.dev = webpackDevMiddleware(compiler, { noInfo: true, filename: webpackConfig.output.filename, publicPath: webpackConfig.output.publicPath, stats: { colors: true } }); exports.hot = webpackHotMiddleware(compiler, { log: console.log, path: '/__webpack_hmr', heartbeat: 10000 }); // webpack.config.js const javascriptRule = { test: /\.js$/, use: [ { loader: 'babel-loader', options: { presets: ['env'] } } ] }; const stylesRule = { test: /\.styl$/, use: ['style-loader', 'css-loader', 'stylus-loader'] }; module.exports = { context: path.join(__dirname, 'javascripts'), entry: [ 'webpack-hot-middleware/client?path=/__webpack_hmr&timeout=20000', './index.js' ], devtool: 'source-map', output: { path: path.join(__dirname, 'public', 'dist'), filename: 'bundle.js', publicPath: '/dist/', library: 'aux' }, module: { rules: [javascriptRule, stylesRule] }, plugins: [new webpack.HotModuleReplacementPlugin(), new webpack.NoEmitOnErrorsPlugin()] } 1 Answers
Answers 1
You need install raw-loader: https://webpack.js.org/loaders/raw-loader/
Webpack 3 config:
module: { rules: [ { test: /\.pug$/, use: [ {loader: 'raw-loader'}, {loader: 'pug-html-loader'} ] } ] }, plugins: [ // Templates HTML new HtmlWebpackPlugin({ filename: 'index.html', template: './src/templates/index.pug' }), new HtmlWebpackPlugin({ filename: 'contact.html', template: './src/templates/contact.pug' }), new webpack.NamedModulesPlugin(), new webpack.HotModuleReplacementPlugin() ] app.js
// import all template pug import 'raw-loader!./templates/index.pug' import 'raw-loader!./templates/contact.pug' ... That makes webpack listen the changes in the pug files, but it also adds this js code to the bundle.js, then you need to process app.js to clean the bundle.js.
0 comments:
Post a Comment