web-dev-qa-db-fra.com

Comment coder HTML avec jade et webpack avec rechargement à chaud

Je suis nouveau avec webpack, en essayant de configurer une configuration simple pour coder HTML/CSS avec les modèles jade, PostCSS, hot reload et servir HTML via webpack-dev-server pour accélérer l'expérience de codage.

J'aurai donc plusieurs points d'entrée, certains fichiers jade avec includes, CSS, img, polices et autres ressources.

Des suggestions de configuration webpack? Merci.

J'ai essayé html-webpack-plugin, avec 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,
})

Cela fonctionne, mais pas de rechargement à chaud pour jade, pas d'actifs css/img/font ..

Ensuite, j'ai trouvé indexhtml-webpack-plugin, mais cela semble fonctionner 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 point d'entrée index.js ressemble à:

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

Ceci fonctionne la configuration pour moi pour le développement HTML/CSS pour ce moment.

javascriptnode.jswebpackpugwebpack-dev-server
14
arturkin

Il semble que html-webpack-plugin peut prendre un paramètre de modèle, qui peut utiliser un chargeur explicite (comme indiqué dans leur documentation) ou utiliser les chargeurs configurés:

// webpack.config.js

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

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

Il y a un jade-html-loader. Je suis sur le point d'essayer de le configurer. 

Merci à https://stackoverflow.com/a/32312078

Je suis également nouveau sur WebPack et je pense que le chargeur html jade est un chargeur plus spécifique qui fait exactement la même chose que le programme html-loader, mais uniquement pour jade. 

edit: Meh, html-webpack-plugin

0
Mike Padg