[英]How to code HTML with jade and webpack with hot reload
I'm new with webpack
, trying to setup simple config to code HTML/CSS with jade
templates, PostCSS
, hot reload
and serve HTML through webpack-dev-server
to speed up coding experience. 我是
webpack
,试图设置简单的配置来编写带有jade
模板的HTML / CSS, PostCSS
, hot reload
并通过webpack-dev-server
提供HTML来加速编码体验。
So I will have multiple entry points, some jade
files with includes, CSS, img, fonts, and other assets. 所以我将有多个入口点,一些带有包含的
jade
文件,CSS,img,字体和其他资源。
Any webpack
config suggestions? 任何
webpack
配置建议? Thanks. 谢谢。
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-plugin
but it seems to work only with HTML files, templates are not supported. 然后我找到了
indexhtml-webpack-plugin
但它似乎只适用于HTML文件,不支持模板。
Edit1: EDIT1:
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.js
entry 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开发的工作设置。
It looks like html-webpack-plugin can 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'
})
]
}
There is a jade-html-loader. 有一个jade-html-loader。 I'm about to try and set it up.
我即将尝试设置它。
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加载器是一个更具体的加载器,与html-loader完全相同,但仅适用于jade。
edit: Meh, html-webpack-plugin 编辑:Meh,html-webpack-plugin
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.