手动打包多页面入口

我们之前打包的都是单页面，那么如何多包多页面的项目呢（一个项目中存在多个html文件）

  1. chapter
  2. ├─babel.config.js
  3. ├─package-lock.json
  4. ├─package.json
  5. ├─postcss.config.js
  6. ├─src
  7. |  ├─index.html
  8. |  ├─index.js
  9. |  └list.js
  10. ├─dell
  11. |  ├─vendors.dell.js
  12. |  └vendors.dell.js.LICENSE.txt
  13. ├─build
  14. |   ├─webpack.common.js
  15. |   ├─webpack.dell.js
  16. |   ├─webpack.dev.js
  17. |   └webpack.prod.js

src/index.js文件：

  1. import React, { Component } from "react";
  2. import ReactDom from "react-dom";
  4. class App extends Component{
  5.   Super(){}
  6.   render(){
  7.     return(
  8.       <div>
  9.         <div>this is index</div>
  10.       </div>
  11.     )
  12.   }
  13. }
  14. ReactDom.render(<App />,document.getElementById("root"));

src/list.js文件：

  1. import React, { Component } from "react";
  2. import ReactDom from "react-dom";
  4. class App extends Component{
  5.   Super(){}
  6.   render(){
  7.     return(
  8.       <div>
  9.         <div>this is List</div>
  10.       </div>
  11.     )
  12.   }
  13. }
  14. ReactDom.render(<App />,document.getElementById("root"));

如果我想要以上两个**JS**文件打包进两个**html**文件该如何进行配置呢？
1、增加打包入库
2、增加HtmlWebpackPlugin的配置，且进行配置filename和所需要用到的模块文件chunks：

  1. // ...
  3. const commonConfig = {
  4.   // 项目从哪个文件开始打包
  5.   entry: {
  6.     main: "./src/index.js",
  7.     list: "./src/list.js"
  8.   },
  9.   // ...
  10.   plugins: [
  11.     // 自动引入打包好的js文件
  12.     new HtmlWebpackPlugin({
  13.       template: "./src/index.html",
  14.       filename: "index.html",
  15.       chunks: ["vendors", "main"]
  16.     }),
  17.     new HtmlWebpackPlugin({
  18.       template: "./src/index.html",
  19.       filename: "list.html",
  20.       chunks: ["vendors", "list"]
  21.     }),
  22.     // ...
  23.   ],
  24. }
  26. module.exports = (env) => {
  27.   if (env && env.production) {
  28.     return merge(commonConfig, prodConfig)
  29.   } else {
  30.     return merge(commonConfig, devConfig)
  31.   }
  32. }

然后运行npm run build就能看到dist文件夹下生成了两个html文件。

自动打包多页面入口

以上就是如何打包多页面配置？我们发现如何新建一个html文件就需要我们在entry里面增加入口，plugin里面增加配置，那么如何自动完成这些操作呢

将plugins单独抽离出来：

  1. const path = require("path");
  2. const HtmlWebpackPlugin = require("html-webpack-plugin");
  3. const { CleanWebpackPlugin } = require('clean-webpack-plugin');
  4. const { merge } = require("webpack-merge");
  5. const addAssetsHtmlWebpackPlugin = require("add-asset-html-webpack-plugin")
  6. const devConfig = require("./webpack.dev")
  7. const prodConfig = require("./webpack.prod")
  9. const markPlugin = (configs) => {
  10.   let pluginArr = [
  11.     // 清除dist文件夹
  12.     new CleanWebpackPlugin({
  13.       cleanOnceBeforeBuildPatterns: [
  14.         path.resolve(__dirname, '../dist')
  15.       ],
  16.     }),
  17.     // 将静态资源添加到html中
  18.     new addAssetsHtmlWebpackPlugin({
  19.       filepath: path.resolve(__dirname, "../dell/vendors.dell.js")
  20.     })
  21.   ];
  22.   Object.keys(configs.entry).forEach(item => {
  23.     pluginArr.push(
  24.       new HtmlWebpackPlugin({
  25.         template: "./src/index.html",
  26.         filename: `${item}.html`,
  27.         chunks: ["vendors", item]
  28.       }),
  29.     )
  30.   })
  31.   return pluginArr;
  32. }
  34. const commonConfig = {
  35.   // 项目从哪个文件开始打包
  36.   entry: {
  37.     main: "./src/index.js",
  38.     list: "./src/list.js",
  39.     detail: "./src/detail.js"
  40.   },
  41.   // 项目打包输出的配置
  42.   output: {
  43.     // 打包后输出的路径（不写也是可以的，因为这就是默认的路径，建议w写上更加直观），__dirname 表示当前目录下
  44.     path: path.resolve(__dirname, "../dist"),
  45.   },
  46.   resolve: {
  47.     // 自动帮我们把文件后缀补齐（从左到右）
  48.     extensions: [".js", ".jsx"],
  49.     // 自动帮我们查找文件（从左到右）
  50.     mainFiles: ["index", "child"],
  51.     // 别名，根据配置的别名查找路径
  52.     alias: {
  53.       "@": path.relative(__dirname, "src/coms")
  54.     }
  55.   },
  56.   module: {
  57.     rules: [{
  58.       test: /\.jpg|.jpeg|.png$/,
  59.       use: {
  60.         loader: "url-loader",
  61.         options: {
  62.           limit: 54000,
  63.           name: "[name].[ext]",
  64.           outputPath: "/images",
  65.         }
  66.       }
  67.     }, {
  68.       test: /\.m?js$/,
  69.       exclude: /node_modules/, //  排除node_modules下的代码
  70.       use: {
  71.         loader: "babel-loader"
  72.       }
  73.     }]
  74.   },
  75.   optimization: {
  76.     // TreeShaking 的配置
  77.     usedExports: true,
  78.     // SplittingCode 的配置
  79.     splitChunks: {
  80.       chunks: 'all', // 分割引入代码库的方式，默认为 async 异步，可选 all：同步和异步
  81.       cacheGroups: {
  82.         vendors: {
  83.           test: /[\\/]node_modules[\\/]/,
  84.           priority: -10,
  85.           name: "chunk"
  86.         }
  87.       }
  88.     },
  89.   },
  90.   // plugins: [
  91.   //     // 自动引入打包好的js文件
  92.   //     new HtmlWebpackPlugin({
  93.   //         template: "./src/index.html",
  94.   //         filename: "index.html",
  95.   //         chunks: ["vendors", "main"]
  96.   //     }),
  97.   //     new HtmlWebpackPlugin({
  98.   //         template: "./src/index.html",
  99.   //         filename: "list.html",
  100.   //         chunks: ["vendors", "list"]
  101.   //     }),
  102.   //     // 清除dist文件夹
  103.   //     new CleanWebpackPlugin({
  104.   //         cleanOnceBeforeBuildPatterns: [
  105.   //             path.resolve(__dirname, '../dist')
  106.   //         ],
  107.   //     }),
  108.   //     // 将静态资源添加到html中
  109.   //     new addAssetsHtmlWebpackPlugin({
  110.   //         filepath: path.resolve(__dirname, "../dell/vendors.dell.js")
  111.   //     })
  112.   // ],
  113. }
  115. commonConfig.plugins = markPlugin(commonConfig);
  117. module.exports = (env) => {
  118.   if (env && env.production) {
  119.     return merge(commonConfig, prodConfig)
  120.   } else {
  121.     return merge(commonConfig, devConfig)
  122.   }
  123. }

以上代码把plugins单独抽离出来，根据entry的对象进行循环，这样每次新建一个html文件我们只需要到entry里面增加一个配置，就可以啦。