admin管理员组文章数量:1323353
This may seem like an amateur questions but I am having trouble creating other pages with Webpack
Here is my webpack.config.js file
var HtmlWebpackPlugin = require('html-webpack-plugin')
var HtmlWebpackHarddiskPlugin = require('html-webpack-harddisk-plugin')
var ExtractTextPlugin = require('extract-text-webpack-plugin')
var webpack = require('webpack')
var path = require('path')
var isProd = process.env.NODE_ENV === 'production' // true or false
var cssDev = ['style-loader', 'css-loader', 'sass-loader']
var cssProd = ExtractTextPlugin.extract({
fallback: 'style-loader',
loader: ['css-loader', 'sass-loader'],
publicPath: '/dist'
})
var cssConfig = isProd ? cssProd : cssDev
module.exports = {
entry: {
app: './src/app.js'
},
output: {
path: path.resolve(__dirname, 'dist'),
filename: '[name].bundle.js'
},
module: {
rules: [
{
enforce: 'pre',
test: /\.js$/,
use: 'eslint-loader',
exclude: /node_modules/
},
{
test: /\.scss$/,
use: cssConfig
},
{
test: /\.js$/,
exclude: /node_modules/,
use: 'babel-loader'
},
{
test: /\.pug$/,
use: 'pug-loader'
}
]
},
devServer: {
contentBase: path.join(__dirname, 'dist'),
press: true,
hot: true,
open: true
},
plugins: [
new HtmlWebpackPlugin({
title: 'Project Demo',
hash: true,
alwaysWriteToDisk: true,
template: './src/index.pug'
}),
new HtmlWebpackHarddiskPlugin(),
new ExtractTextPlugin({
filename: 'app.css',
disable: !isProd,
allChunks: true
}),
new webpack.HotModuleReplacementPlugin(),
new webpack.NamedModulesPlugin()
]
}
Basically, my config file is currently uses HtmlWebpackPlugin
to input my index.pug
from the src
folder then outputs index.html
into the dist
folder.
However, what if I want to create different pages? For example, an about page.
I know that if I create a about.pug
in my src
folder, it will not be processed by Webpack because I have included it in my configuration file. However, I am not sure how to acplish this.
How could I input different pug files such as about.pug
gallery.pug
contact.pug
in my src
folder then have all these output in my dist
folder as about.html
gallery.html
contact.html
This may seem like an amateur questions but I am having trouble creating other pages with Webpack
Here is my webpack.config.js file
var HtmlWebpackPlugin = require('html-webpack-plugin')
var HtmlWebpackHarddiskPlugin = require('html-webpack-harddisk-plugin')
var ExtractTextPlugin = require('extract-text-webpack-plugin')
var webpack = require('webpack')
var path = require('path')
var isProd = process.env.NODE_ENV === 'production' // true or false
var cssDev = ['style-loader', 'css-loader', 'sass-loader']
var cssProd = ExtractTextPlugin.extract({
fallback: 'style-loader',
loader: ['css-loader', 'sass-loader'],
publicPath: '/dist'
})
var cssConfig = isProd ? cssProd : cssDev
module.exports = {
entry: {
app: './src/app.js'
},
output: {
path: path.resolve(__dirname, 'dist'),
filename: '[name].bundle.js'
},
module: {
rules: [
{
enforce: 'pre',
test: /\.js$/,
use: 'eslint-loader',
exclude: /node_modules/
},
{
test: /\.scss$/,
use: cssConfig
},
{
test: /\.js$/,
exclude: /node_modules/,
use: 'babel-loader'
},
{
test: /\.pug$/,
use: 'pug-loader'
}
]
},
devServer: {
contentBase: path.join(__dirname, 'dist'),
press: true,
hot: true,
open: true
},
plugins: [
new HtmlWebpackPlugin({
title: 'Project Demo',
hash: true,
alwaysWriteToDisk: true,
template: './src/index.pug'
}),
new HtmlWebpackHarddiskPlugin(),
new ExtractTextPlugin({
filename: 'app.css',
disable: !isProd,
allChunks: true
}),
new webpack.HotModuleReplacementPlugin(),
new webpack.NamedModulesPlugin()
]
}
Basically, my config file is currently uses HtmlWebpackPlugin
to input my index.pug
from the src
folder then outputs index.html
into the dist
folder.
However, what if I want to create different pages? For example, an about page.
I know that if I create a about.pug
in my src
folder, it will not be processed by Webpack because I have included it in my configuration file. However, I am not sure how to acplish this.
How could I input different pug files such as about.pug
gallery.pug
contact.pug
in my src
folder then have all these output in my dist
folder as about.html
gallery.html
contact.html
2 Answers
Reset to default 7As mentioned by @Derek you can programmatically generate the list of HtmlWebpackPlugin
instances.
const path = require('path')
const fs = require('fs')
// Store .html file names in src/ in an array
const pages =
fs
.readdirSync(path.resolve(__dirname, 'src'))
.filter(fileName => fileName.endsWith('.html'))
module.exports = {
// Use .map() on the array of file names to map each file name
// to the plugin instance, then spread the mapped array into
// the plugins array.
plugins: [
...pages.map(page => new HtmlWebpackPlugin({
template: page,
filename: page
}))
]
}
I believe you can create multiple instances of HtmlWebpackPlugin
:
plugins: [
new HtmlWebpackPlugin({
title: 'Project Demo',
hash: true,
alwaysWriteToDisk: true,
template: './src/index.pug'
}),
new HtmlWebpackPlugin({
title: 'Page2',
hash: true,
alwaysWriteToDisk: true,
template: './src/page2.pug'
}),
...
本文标签: javascriptHow to create multiple pages in WebpackStack Overflow
版权声明:本文标题:javascript - How to create multiple pages in Webpack? - Stack Overflow 内容由网友自发贡献,该文观点仅代表作者本人, 转载请联系作者并注明出处:http://www.betaflare.com/web/1742129786a2422107.html, 本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容,一经查实,本站将立刻删除。
发表评论