如何使用jade和webpack使用热重载进行HTML编码
我是新的webpack
,试图设置简单的configuration来编码HTML / CSS与jade
模板, PostCSS
, hot reload
和通过webpack-dev-server
提供HTML来加速编码的经验。
所以我会有多个入口点,一些包含CSS,img,字体和其他资源的jade
文件。
任何webpack
configurationbuild议? 谢谢。
我已经尝试过html-webpack-plugin
,configuration如
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, })
它的工作,但没有热重新加载玉包括,没有CSS / IMG /字体资产..
然后我发现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可以采取一个模板参数,它可以采取一个明确的加载器(如他们的文档中所见)或使用configuration的加载器:
// 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 loader是一个更具体的加载器,它和html-loader完全相同,只是用于jade。
编辑:嗯,html-webpack-plugin