How to code HTML with jade and webpack with hot reload
It looks like html-webpack-plugin can take a template parameter, which can take an explicit loader (as seen in their documentation) or use the configured loaders:
// webpack.config.js
var HtmlWebpackPlugin = require('html-webpack-plugin')
module.exports = {
module: {
loaders: [
{
test: /\.jade$/,
loader: 'jade'
}
]
},
plugins: [
new HtmlWebpackPlugin({
template: './src/index.jade'
})
]
}
Related videos on Youtube
arturkin
Fronend enthusiast, currently developing with React/FLUX/Redux, PostCSS, Node.js, Webpack.
Updated on August 24, 2022Comments
-
arturkin over 1 year
I'm new with
webpack
, trying to setup simple config to code HTML/CSS withjade
templates,PostCSS
,hot reload
and serve HTML throughwebpack-dev-server
to speed up coding experience.So I will have multiple entry points, some
jade
files with includes, CSS, img, fonts, and other assets.Any
webpack
config suggestions? Thanks.I've tried
html-webpack-plugin
, with config likenew HtmlWebpackPlugin({ filename:'page1.html', templateContent: function(templateParams, compilation) { var templateFile = path.join(__dirname, './src/page1.jade'); compilation.fileDependencies.push(templateFile); return jade.compileFile(templateFile)(); }, inject: true, })
It's working but no hot reload for jade includes, no css/img/font assets..
Then I found
indexhtml-webpack-plugin
but it seems to work only with HTML files, templates are not supported.Edit1:
For now, I ended up with this
webpack.config.js
:var path = require('path'), webpack = require('webpack'), HtmlWebpackPlugin = require('html-webpack-plugin'), node_modules_dir = path.resolve(__dirname, 'node_modules'); module.exports = { entry: { index: ['webpack/hot/dev-server', './index.js'], page2: ['webpack/hot/dev-server', './page2.js'], //vendors: ['react', 'jquery'], }, output: { filename: '[name].js', path: path.resolve(__dirname, 'build'), publicPath: path.resolve(__dirname, '/'), libraryTarget: "umd" }, plugins: [ new webpack.NoErrorsPlugin(), //new webpack.optimize.CommonsChunkPlugin('vendors', 'vendors.js'), new webpack.dependencies.LabeledModulesPlugin(), ], module: { noParse: [ new RegExp('^react$'), new RegExp('^jquery$'), ], loaders: [ { test: /\.js$/, loader: "babel-loader", query: {optional: ["es7.classProperties"]}}, { test: /\.html$/, loader: "html" }, { test: /\.jade$/, loader: "jade" }, { test: /\.css$/, loader: "style-loader!css-loader!postcss-loader" }, { test: /\.woff$/, loader: 'url-loader?prefix=font/&limit=5000&minetype=application/font-woff'}, { test: /\.ttf$/, loader: 'url-loader?prefix=font/'}, { test: /\.eot$/, loader: 'url-loader?prefix=font/'}, { test: /\.svg$/, loader: 'url-loader?prefix=font/'}, { test: /\.png$/, loader: "url-loader?prefix=img/&mimetype=image/png"}, { test: /\.jpg$/, loader: "url-loader?prefix=img/&mimetype=image/jpg"}, { test: /\.gif$/, loader: "url-loader?prefix=img/&mimetype=image/gif"} ], }, postcss: function() { return { defaults: [ require('autoprefixer') ] } } } Object.keys(module.exports.entry).forEach(function(page){ if(page!=='vendors'){ module.exports.plugins.push( new HtmlWebpackPlugin({ filename: page+'.html', chunks: [page] }) ); } })
An
index.js
entry point looks like:import index from './templates/index.jade'; require('./css/index.css'); if (typeof document !== 'undefined') { document.body.innerHTML = index(); }
This is working setup for me for HTML/CSS development for this moment.
-
Alexander Belokon almost 8 yearsWorked for me, ty!
-
arturkin over 7 yearsThanks, using it too from the moment they added template support(not supported when question was asked).