bootstrap webpack 打包多个html页面 公共header引用模板

Bootstrap 和 Webpack 是两个常用于前端开发的工具。当需要打包多个 HTML 页面并共享公共部分如头部模板时，可以采用以下步骤：

1. **安装必要的库**:
首先，确保已经安装了 Bootstrap、Webpack 和相关的依赖，比如 HTMLWebpackPlugin，它可以帮助你在构建过程中生成包含模板的HTML文件。

   npm install bootstrap webpack html-webpack-plugin --save-dev

2. **创建配置文件** (`webpack.config.js`):
使用 Webpack 的配置文件来定义如何处理入口文件、打包过程以及输出。例如：

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

   module.exports = {
     // ... 其他配置项
     entry: {
       main: './src/index.js', // 主入口文件
       page1: './src/page1.js', // 其他页面入口文件
       // 添加更多页面...
     },
     output: {
       path: path.resolve(__dirname, 'dist'),
       filename: '[name].bundle.js',
     },
     plugins: [
       new HtmlWebpackPlugin({
         template: './src/common/header.html', // 共享头部模板
         chunks: ['common', 'main'], // 将 common 插入到每个页面
         minify: { /* 网页压缩选项 */ },
       }),
       // 对其他页面添加相应的HtmlWebpackPlugin实例
     ],
   };

3. **编写入口文件**:
每个 HTML 页面对应的 JavaScript 文件（如 `page1.js`）只需引入对应的业务代码即可，不需要单独处理 header。

4. **使用公共模板**:
在 `src/common/header.html` 中定义头部模板内容，这将被所有包含它的页面引用。