我正在尝试用React和ES6做一个网站。我正在用Webpack用巴别塔来转换我的JS,它工作得很好。现在我需要知道如何用Pug (或HTML语言)编写我的模板,并将其添加到Webpack工作流中。我希望我的build文件夹有两个文件:
从我的bundle.js
index.html
文件
一个示例webpack.config.js
文件会很有帮助,但我真正想要的只是如何做到这一点的一般想法。
谢谢!
发布于 2017-02-08 13:50:38
有几个webpack插件,你需要先安装,以使用pug模板与webpack。
使用htmlwebpack插件,您可以指定pug模板文件
new HtmlWebpackPlugin({
template : './index.pug',
inject : true
})
pug模板文件将由pug-loader加载。
{
test: /\.pug$/,
include: path.join(__dirname, 'src'),
loaders: [ 'pug-loader' ]
},
一个示例的webpack配置文件可以如下所示-
const path = require('path');
const webpack = require('webpack');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const ExtractTextPlugin = require('extract-text-webpack-plugin');
const isTest = process.env.NODE_ENV === 'test'
module.exports = {
devtool: 'eval-source-map',
entry: {
app: [
'webpack-hot-middleware/client',
'./src/app.jsx'
]
},
output: {
path : path.join(__dirname, 'public'),
pathinfo : true,
filename : 'bundle.js',
publicPath : '/'
},
plugins: [
new webpack.HotModuleReplacementPlugin(),
new webpack.NoErrorsPlugin(),
new ExtractTextPlugin("style.css", { allChunks:false }),
isTest ? undefined : new webpack.optimize.CommonsChunkPlugin({
name: 'vendor',
}),
new HtmlWebpackPlugin({
template : './index.pug',
inject : true
})
].filter(p => !!p),
resolve: {
extensions: ['', '.json', '.js', '.jsx']
},
module: {
loaders: [
{
test : /\.jsx?$/,
loader : 'babel',
exclude : /node_modules/,
include : path.join(__dirname, 'src')
},
{
test : /\.scss?$/,
loader : ExtractTextPlugin.extract("style-loader", "css-loader!autoprefixer-loader!sass-loader"),
include : path.join(__dirname, 'sass')
},
{
test : /\.png$/,
loader : 'file'
},
{
test : /\.(ttf|eot|svg|woff(2)?)(\?[a-z0-9]+)?$/,
loader : 'file'
},
{
test: /\.pug$/,
include: path.join(__dirname, 'src'),
loaders: [ 'pug-loader' ]
},
{
include : /\.json$/,
loaders : ["json-loader"]
}
]
}
}
https://stackoverflow.com/questions/42104697
复制相似问题