javascript - How to create multiple pages in Webpack? - Stack Overflow

admin管理员组

文章数量:1324633

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

• javascript
• node.js
• webpack
• pug
• webpack-dev-server

Share Improve this question Follow asked Jun 15, 2017 at 2:59 BizzetBizzet 7122 silver badges1212 bronze badges

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 7

As 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