我是新手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)