Webpack多页面ts隔离打包

由于我们的项目都是把公共的模块抽出来进行开发，例如菜单和头部。现有个项目的需求是，里面有个独立的页面需要不使用这些公共的组件，同事问到该如何实现。
之前有写过这样的需求，一下想不起来，只好找到之前的代码，记录一下。

方案

主要就是通过Webpack对两个页面的Typescript进行打包，使用到HtmlWebpackPlugin该组件。

webpack.common.js

const webpack = require('webpack')
const HtmlWebpackPlugin = require('html-webpack-plugin')
const isDebug = process.env.NODE_ENV === 'development'

module.exports = {
  mode: isDebug ? 'development' : 'production',
  entry: {
    'page1': './src/app/page1.tsx',
    'page2': './src/app/page2.tsx'
  },
  devtool: "source-map",
  resolve: {
    extensions: ['.ts', '.tsx', '.js', '.json']
  },

  module: {
    rules: [...]
  },
  optimization: {...},
  performance: {
    hints: false
  },
  plugins: [
    new HtmlWebpackPlugin({
      hash: true,
      minify: {
        removeComments: true,
        collapseWhitespace: true
      },
      template: './src/template/index.html',
      filename: 'page1.html',
      excludeChunks: ['page2']
    }),
    new HtmlWebpackPlugin({
      hash: true,
      minify: {
        removeComments: true,
        collapseWhitespace: true
      },
      template: './src/template/index.html',
      filename: 'page2.html',
      excludeChunks: ['page1']
    })
  ]
};

备注：

• entry参数是两个页面的Typescript文件的入口
• 两个HtmlWebpackPlugin里使用template及filename参数生成对应的两个页面，最后用excludeChunks参数排除该页面不需要打包的代码模块（对应entry里面的字段）