Javascript 如何在网页包中创建多个页面?
这似乎是一个业余问题,但我在用Webpack创建其他页面时遇到了麻烦 这是我的webpack.config.js文件Javascript 如何在网页包中创建多个页面?,javascript,node.js,webpack,pug,webpack-dev-server,Javascript,Node.js,Webpack,Pug,Webpack Dev Server,这似乎是一个业余问题,但我在用Webpack创建其他页面时遇到了麻烦 这是我的webpack.config.js文件 var HtmlWebpackPlugin = require('html-webpack-plugin') var HtmlWebpackHarddiskPlugin = require('html-webpack-harddisk-plugin') var ExtractTextPlugin = require('extract-text-webpack-plugin') v
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'),
compress: 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()
]
}
基本上,我的配置文件当前使用HtmlWebpackPlugin
从src
文件夹中输入myindex.pug
,然后将index.html
输出到dist
文件夹中
但是,如果我想创建不同的页面呢?例如,一个关于页面
我知道,如果我在我的src
文件夹中创建一个about.pug
,它将不会被Webpack处理,因为我已将其包含在配置文件中。然而,我不知道如何做到这一点
我怎样才能在我的
src
文件夹中输入不同的帕格文件,比如about.pug
gallery.pug
contact.pug
,然后在我的dist
文件夹中作为about.html
gallery.htmlcontact.html
我相信你能做到创建多个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'
}),
...
正如@Derek所提到的,您可以通过编程方式生成
HtmlWebpackPlugin
实例列表
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
}))
]
}
但是,没有办法包含整个目录?不要这样认为。我无法通过我的公司网络访问GitHub,但通过谷歌搜索发现了这一点,或者您可以编写一个循环来生成数组。webpack配置只是一个JavaScript文件,因此您可以读取目录,并根据目录内容以编程方式生成
HtmlWebpackPlugin
条目列表。