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模板、PostCSS、hot reload和通过webpack-dev-server来编写HTML/CSS代码,以加快编写代码的速度。
So I will have multiple entry points, some jade
files with includes, CSS, img, fonts, and other assets.
因此,我将有多个入口点,一些包含CSS、img、字体和其他资产的jade文件。
Any webpack
config suggestions? Thanks.
任何webpack配置建议吗?谢谢。
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/字体资产。
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:
一个索引。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开发的工作设置。
2 个解决方案
#1
16
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'
})
]
}
#2
0
There is a jade-html-loader. I'm about to try and set it up.
有一个jade-html-loader。我要试着把它设置好。
Thanks goes to https://*.com/a/32312078
由于去https://*.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 loader是一个更具体的加载程序,它所做的事情与html加载程序完全相同,但只适用于jade。
edit: Meh, html-webpack-plugin
编辑:咩,html-webpack-plugin
#1
16
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'
})
]
}
#2
0
There is a jade-html-loader. I'm about to try and set it up.
有一个jade-html-loader。我要试着把它设置好。
Thanks goes to https://*.com/a/32312078
由于去https://*.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 loader是一个更具体的加载程序,它所做的事情与html加载程序完全相同,但只适用于jade。
edit: Meh, html-webpack-plugin
编辑:咩,html-webpack-plugin