![](/img/trans.png)
[英]How to get browser reload when editing html/jade files in webpack
[英]How to code HTML with jade and webpack with hot reload
我是webpack
,試圖設置簡單的配置來編寫帶有jade
模板的HTML / CSS, PostCSS
, hot reload
並通過webpack-dev-server
提供HTML來加速編碼體驗。
所以我將有多個入口點,一些帶有包含的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]
}) );
}
})
index.js
入口點如下所示:
import index from './templates/index.jade';
require('./css/index.css');
if (typeof document !== 'undefined') {
document.body.innerHTML = index();
}
這是我目前正在進行HTML / CSS開發的工作設置。
看起來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'
})
]
}
有一個jade-html-loader。 我即將嘗試設置它。
謝謝你訪問https://stackoverflow.com/a/32312078
我也是webpack的新手,並且我認為jade html加載器是一個更具體的加載器,與html-loader完全相同,但僅適用於jade。
編輯:Meh,html-webpack-plugin
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.