>[success] # 多頁面打包 ~~~ 1.當我們想使用多頁面打包去構建項目的時候，最笨的方法就是去配置每個多頁面的'HtmlWebpackPlugin', 這里有個思維我總是繞不過去，在這里記錄一下，首先webpack 啥都不配置只能解析，'js' 和'json',打包后 生成的也是'js',他不會給你構建'html',想讓他構建html 就需要用到'HtmlWebpackPlugin',在'webpack'里面 配置的'entry'識別的入口也是識別的js文件 2.entry將這個入口文件的項目依賴的文件打成'js',想讓'HtmlWebpackPlugin'生成的html 和這些入口打包生成 的js匹配上，就需要設置'HtmlWebpackPlugin'里面的chunk然他們一致 ~~~ >[info] ## 多頁面打包 ~~~ 說明：如圖項目結構目錄'HtmlWebpackPlugin' 需要指定作為html的模板，我們將目錄結構一個文件夾存儲 多頁的html模板，打包的入口文件 1.初級開發程序員愛寫的方式就是堆積代碼。多頁面寫出的效果如下，有多少多頁面就手動寫多少個HtmlWebpackPlugin ： const path = require('path') const HtmlWebpackPlugin = require('html-webpack-plugin') module.exports = { mode: 'production', entry: { index: './src/index/index.js', sreach: './src/sreach/index.js' }, output: { path: path.join(__dirname, 'dist'), filename: '[name].js' }, module: { rules: [{ test: /\.js$/, exclude: /node_modules/, use: 'babel-loader' }, { test: /\.css$/, use: ['style-loader', 'css-loader'] }] }, plugins: [ new HtmlWebpackPlugin({ template: path.join(__dirname, 'src/index/index.html'), // 使用模板 filename: 'index.html', // 打包后的文件名 chunks: ['index'], // 對應html模板想要引入對應打包入口打包后的js包，這里就需要和entry key一一對應 inject: true, // 默認注入所有靜態資源 minify: { html5: true, collapsableWhitespace: true, preserveLineBreaks: false, minifyCSS: true, minifyJS: true, removeComments: false } }), new HtmlWebpackPlugin({ template: path.join(__dirname, 'src/sreach/index.html'), // 使用模板 filename: 'sreach.html', // 對應html模板想要引入對應打包入口打包后的js包，這里就需要和entry key一一對應 chunks: ['sreach'], // 打包后需要使用的chunk(文件) inject: true, // 默認注入所有靜態資源 minify: { html5: true, collapsableWhitespace: true, preserveLineBreaks: false, minifyCSS: true, minifyJS: true, removeComments: false } }), ] } ~~~ * 項目結構目錄  >[danger] ##### 通過腳本的思維去寫 ~~~ 1.首先利用'glob.sync' 可以獲取文件目錄 -- 'npm i glob -D' ~~~ ~~~ const path = require('path') const HtmlWebpackPlugin = require('html-webpack-plugin') /* 1.因為要配置打包入口，和'HtmlWebpackPlugin'要使用的html模板 因此創建兩個變量'entry' 和'htmlWebpackPlugins' 負責生成， 我們需要的打包配置入口和'HtmlWebpackPlugin' 使用的html模板 */ const glob = require('glob') const setMPA = () => { const entry = {}; const htmlWebpackPlugins = []; const entryFiles = glob.sync(path.join(__dirname, './src/*/index.js')); Object.keys(entryFiles) .map((index) => { const entryFile = entryFiles[index]; // 獲取入口打包文件的路徑 // '/Users/cpselvis/my-project/src/index/index.js' const match = entryFile.match(/src\/(.*)\/index\.js/); // 通過正則取出entry到時候要使用的key const pageName = match && match[1]; // 小的細節沒有下角標1的話做一個兼容判斷 entry[pageName] = entryFile; htmlWebpackPlugins.push( new HtmlWebpackPlugin({ inlineSource: '.css$', template: path.join(__dirname, `src/${pageName}/index.html`), filename: `${pageName}.html`, chunks: ['vendors', pageName], inject: true, minify: { html5: true, collapseWhitespace: true, preserveLineBreaks: false, minifyCSS: true, minifyJS: true, removeComments: false } }) ); }); return { entry, htmlWebpackPlugins } } const { entry, htmlWebpackPlugins } = setMPA(); module.exports = { mode: 'production', entry, output: { path: path.join(__dirname, 'dist'), filename: '[name].js' }, module: { rules: [{ test: /\.js$/, exclude: /node_modules/, use: 'babel-loader' }, { test: /\.css$/, use: ['style-loader', 'css-loader'] }] }, plugins: [].concat(htmlWebpackPlugins) } ~~~ >[danger] ##### 公共文件處理 ~~~ 1.當我們在進行多頁面打包時候，可能兩個項目都用了同樣的工具類，或者框架，本質上我們可以將 這些同樣的內容打包成一份，引入到這些打包后的文件，這樣不會因為公共方法會因為你多少個多頁面 而成為對應倍數打包 ~~~ ~~~ module.exports = { ... optimization: { splitChunks: { // 自動提取所有公共模塊到單獨 bundle chunks: 'all' } }, ... } ~~~ >[danger] ##### 要讀文章系列 [原文鏈接](https://segmentfault.com/a/1190000017393930) >[danger] ##### 問答 * 感嘆一句大神寫代碼考慮的真多 摩拜 ~~~ 1.這里entryFiles直接用map，取第一個參數實測效果一樣，用Objec.keys是有什么特別原因？ 答：里主要是如果 entry是 hard code的寫法的話，那么entry是一個 object，例如： entry: { index: './src/index/index.js', search: './src/search/index.js' } 那么，我們獲取動態設置 html-webpack-plugin 是不是需要通過 Object.keys 去獲取key，主要是基于這點去考慮的哈。 由于我們這里直接演示了最通用的方案，一步到位，其實完全用 map 匹配沒問題的，直接用 map 匹配即可。 ~~~