Come codice HTML con giada e webpack con ricarica a caldo

Question

Sono nuovo con webpack, cercando di configurazione semplice configurazione di codice HTML/CSS con jade modelli, PostCSS, hot reload e servire HTML attraverso webpack-dev-server per accelerare la codifica esperienza.

Quindi avrò più punti di accesso, alcuni file jade con include, CSS, img, caratteri e altre risorse.

Qualsiasi webpack suggerimenti di configurazione? Grazie.

Ho provato html-webpack-plugin, con config come

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

Sta funzionando, ma non ricarica caldo per giada comprende, presenti attività css/img/font ..

poi ho trovato indexhtml-webpack-plugin ma sembra per lavorare solo con file HTML, i modelli non sono supportati.

Edit1:

Per ora, ho finito con questo 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 punto di ingresso index.js assomiglia:

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

Si tratta di configurazione funzionante per me per Sviluppo HTML/CSS per questo momento.

Answer 1

Sembra html-webpack-plugin può prendere un parametro di template, che può richiedere un caricatore esplicito (come si vede nella loro documentazione) oppure utilizzare i caricatori configurati:

// webpack.config.js 

var HtmlWebpackPlugin = require('html-webpack-plugin') 

module.exports = { 
    module: { 
    loaders: [ 
     { 
     test: /\.jade$/, 
     loader: 'jade' 
     } 
    ] 
    }, 
    plugins: [ 
    new HtmlWebpackPlugin({ 
     template: './src/index.jade' 
    }) 
    ] 
} 

Answer 2

C'è un jade-html-loader. Sto per provare e configurarlo.

ringraziamento va a https://stackoverflow.com/a/32312078

Sono nuovo di webpack troppo, e sto pensando il caricatore giada html è un caricatore più specifica che fa la stessa cosa esatta html-loader fa, ma solo per giada.

edit: Meh, html-webpack-plugin