Comment coder HTML avec jade et webpack avec rechargement à chaud
Je suis nouveau avec webpack
en essayant de configuration simple config de code HTML/CSS avec jade
modèles, PostCSS
hot 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-plugin
avec 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
Vous devez vous connecter pour publier un commentaire.
Il ressemble html-webpack-plugin peut prendre un paramètre du modèle, ce qui peut prendre un explicite chargeur (comme on le voit dans leur documentation) ou utiliser la configuration de chargeurs:
Il y a un jade-html-loader. Je suis sur le point d'essayer et de le configurer.
Grâce à https://stackoverflow.com/a/32312078
Je suis nouveau sur webpack trop, et je suis de la pensée, le jade html loader est un plus spécifiques chargeur qui fait exactement la même chose que le html-chargeur de fait, mais seulement pour jade.
edit:
Meh, html-webpack-plugin