小编art*_*kin的帖子

如何使用热重新加载jade和webpack来编写HTML代码

我是新手webpack,尝试使用jade模板设置简单的配置来编写HTML/CSS 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,
})
Run Code Online (Sandbox Code Playgroud)

它正在工作,但没有热重新加载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: …
Run Code Online (Sandbox Code Playgroud)

javascript node.js webpack webpack-dev-server pug

14
推荐指数
1
解决办法
1万
查看次数

标签 统计

javascript ×1

node.js ×1

pug ×1

webpack ×1

webpack-dev-server ×1