Question

我是webpack的新用户，尝试使用jade模板设置简单配置来编码HTML / CSS，PostCSS，hot reload并通过{提供HTML {1}}加快编码体验。

所以我会有多个入口点，一些webpack-dev-server文件包含CSS，img，字体和其他资产。

任何jade配置建议？感谢。

我已尝试webpack，配置如

html-webpack-plugin

它正在运行，但没有为jade包含热重载，没有css / img / font资产..

然后我找到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, })但它似乎只适用于HTML文件，不支持模板。

EDIT1：

目前，我最终得到了indexhtml-webpack-plugin：

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

这是我目前正在进行HTML / CSS开发的工作设置。

Answer 1

看起来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'
    })
  ]
}

Answer 2

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

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

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

编辑：嗯，html-webpack-plugin

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

2 个答案: