Comment coder HTML avec jade et webpack avec rechargement à chaud

Je suis nouveau avec webpacken essayant de configuration simple config de code HTML/CSS avec jade modèles, PostCSShot reload et servir HTML par le biais de webpack-dev-server pour accélérer le codage de l'expérience.

Je vais donc avoir plusieurs points d'entrée, certains jade fichiers avec comprend, CSS, img, de polices et d'autres actifs.

Tout webpack config suggestions? Merci.

J'ai essayé html-webpack-pluginavec une config comme

new 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,
})

Ça fonctionne mais pas chaud recharger pour jade comprend, pas de css/img/font actifs..

Puis j'ai trouvé indexhtml-webpack-plugin mais il semble que cela fonctionne uniquement avec les fichiers HTML, les modèles ne sont pas pris en charge.

Edit1:

Pour l'instant, j'ai fini avec ce 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]
}) );
}
})

Un index.js point d'entrée ressemble:

import index from './templates/index.jade';
require('./css/index.css');
if (typeof document !== 'undefined') {
document.body.innerHTML = index();
}

C'est la configuration de travail pour moi pour le HTML/CSS pour ce moment.

source d'informationauteur arturkin | 2015-09-04