Jak kod HTML z jadeitu i WebPacka gorącą reload

Question

jestem nowy z webpack, próbując konfiguracji prosty config do kodu HTML/CSS z jade szablonami PostCSS, hot reload i służyć HTML poprzez webpack-dev-server przyspieszyć doświadczenie kodowania.

Więc będę mieć wiele punktów wejścia, niektóre pliki jade zawierają, CSS, img, czcionki i inne zasoby.

Wszelkie sugestie dotyczące konfiguracji webpack? Dzięki.

Próbowałem html-webpack-plugin z config jak

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

to działa, ale nie ma ciepłej przeładowania dla jade zawiera żadnych aktywów css/img/font ..

Potem znalazłem indexhtml-webpack-plugin ale wydaje do pracy tylko z plikami HTML, szablony nie są obsługiwane.

Edit1:

Na razie skończyło się tym 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] 
     })); 
    } 
}) 

index.js punkt wejścia wygląda następująco:

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

to setup pracuje dla mnie Tworzenie HTML/CSS na tę chwilę.

Answer 1

Wygląda html-webpack-plugin może podjąć parametr szablonu, która może potrwać wyraźny ładowarka (jak widać w ich dokumentacji) lub użyć skonfigurowanych ładowarki:

// 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

Istnieje program ładujący jade-html. Zaraz spróbuję to ustawić.

Dzięki idzie https://stackoverflow.com/a/32312078

Jestem nowy WebPacka zbyt, i myślę ładowarka jade HTML jest bardziej szczegółowy ładowarka, że ​​robi to samo dokładne html-ładowarka robi, ale tylko dla jadeitu.

edit: Meh, html-WebPack-plugin