Как код HTML с Джейд и webpack с горячей перезагрузки

я новичок в webpack, пытаясь настроить простую конфигурацию для кода HTML / CSS с jade шаблоны PostCSS, hot reload и служить HTML через webpack-dev-server для ускорения кодирования опыта.

поэтому у меня будет несколько точек входа, некоторые jade файлы с включениями, CSS, img, шрифтами и другими активами.

любой webpack предложения конфиг? Спасибо.

я пробовал html-webpack-plugin, с конфигурацией как

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

это работает, но нет горячей перезагрузки для jade включает в себя, нет CSS/img / font активов..

потом я нашел indexhtml-webpack-plugin но, похоже, работает только с HTML-файлами, шаблоны не поддерживаются.

Edit1:

на данный момент, я закончил с этим 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]
        }) );
    }
})

An index.js точка входа выглядит так:

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

это рабочая настройка для меня для разработки HTML / CSS на данный момент.

14
javascript node.js pug webpack webpack-dev-server

2 ответов

похоже html-webpack-плагин может принимать параметр шаблона, который может принимать явный загрузчик (как видно из их документации) или использовать настроенные загрузчики:

// webpack.config.js

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

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

есть jade-html-загрузчик. Я собираюсь попробовать это устроить.

спасибоhttps://stackoverflow.com/a/32312078

Я тоже новичок в webpack, и я думаю, что Jade html loader-это более конкретный загрузчик, который делает то же самое, что и html-загрузчик, но только для jade.

изменить: Meh, html-webpack-плагин

0