javascript 如何使用 jade 和 webpack 使用热重载编写 HTML 代码

How to code HTML with jade and webpack with hot reload

提问by arturkin

I'm new with webpack, trying to setup simple config to code HTML/CSS with jadetemplates, PostCSS, hot reloadand serve HTML through webpack-dev-serverto speed up coding experience.

我是新来的webpack，试图设置简单的配置来使用jade模板编写 HTML/CSS PostCSS，hot reload并通过提供 HTMLwebpack-dev-server来加快编码体验。

So I will have multiple entry points, some jadefiles with includes, CSS, img, fonts, and other assets.

所以我将有多个入口点，一些jade包含包含、CSS、img、字体和其他资产的文件。

Any webpackconfig suggestions? Thanks.

任何webpack配置建议？谢谢。

I've tried html-webpack-plugin, with config like

我试过了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,
})

It's working but no hot reload for jade includes, no css/img/font assets..

它正在工作，但没有 jade 包含的热重载，没有 css/img/font 资产..

Then I found indexhtml-webpack-pluginbut it seems to work only with HTML files, templates are not supported.

然后我发现indexhtml-webpack-plugin它似乎只适用于 HTML 文件，不支持模板。

Edit1:

编辑1：

For now, I ended up with this webpack.config.js:

现在，我最终得到了这个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.jsentry point looks like:

一个index.js入口点的样子：

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

This is working setup for me for HTML/CSS development for this moment.

这是我目前用于 HTML/CSS 开发的工作设置。

回答by macro

It looks like html-webpack-plugincan take a template parameter, which can take an explicit loader (as seen in their documentation) or use the configured loaders:

看起来html-webpack-plugin可以采用模板参数，它可以采用显式加载器（如其文档中所示）或使用配置的加载器：

// webpack.config.js

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

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

回答by Mike Padg

There is a jade-html-loader. I'm about to try and set it up.

有一个 jade-html-loader。我要尝试设置它。

Thanks goes to https://stackoverflow.com/a/32312078

感谢去https://stackoverflow.com/a/32312078

I'm new to webpack too, and am thinking the jade html loader is a more specific loader that does the same exact thing the html-loader does, but only for jade.

我也是 webpack 的新手，我认为 jade html loader 是一个更具体的加载器，它执行与 html-loader 完全相同的操作，但仅适用于 jade。

edit: Meh, html-webpack-plugin

编辑：嗯，html-webpack-plugin