Webpack多页面应用1：创建项目

$ mkdir multi-pages & cd multi-pages 
$ npm init -y

export default function index() {
  return 'Home Page';
} 

document.getElementById('root').innerHTML = index();

export default function index() {
  return 'About Page';
} 

document.getElementById('root').innerHTML = index();

$ npm install webpack webpack-cli webpack-dev-server -D
$ npm install html-webpack-plugin -D

const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
  entry: {
    home: './src/pages/home/index.js',
    about: './src/pages/about/index.js'
  },

  mode: 'development',

  output: {
    filename: '[name]-[contenthash].js',
    path: path.resolve(__dirname, 'dist'),
    publicPath: '',
  },

  devServer: {
    contentBase: path.join(__dirname, 'dist'),
    compress: true,
    port: 9001
  },

  plugins: [
    new HtmlWebpackPlugin({
      title: 'home',
      templateContent: "<div id='root'></div>",
      filename: path.join(__dirname,`/dist/home.html`),
      inject: 'body',
      chunks: ['home']
    }),
    new HtmlWebpackPlugin({
      title: 'about',
      templateContent: "<div id='root'></div>",
      filename: path.join(__dirname,`/dist/about.html`),
      inject: 'body',
      chunks: ['about']
    })
  ]
}

{
  scripts: {
    "dev": "webpack serve",
    "build": "webpack"
  }
}