簡(jiǎn)介

我們開(kāi)發(fā)不可能只寫(xiě)一個(gè)頁(yè)面，每次都要寫(xiě)很多頁(yè)面，這時(shí)為了開(kāi)發(fā)效率，我們使用前端自動(dòng)化工具webpack，那么webpack是如何打包頁(yè)面的呢？又是如何打包多頁(yè)面的呢？

單頁(yè)面打包

我們知道要打包單頁(yè)面的方法，很簡(jiǎn)單，配置入口，和html插件，

const HtmlWebpackPlugin = require('html-webpack-plugin');const config = { entry:{  index:'./src/index.js' }, output:{  path: path.join(__dirname, 'dist'),  filename: 'js/index.js' } ... plugins:[  new HtmlWebpackPlugin({   filename: 'index.html',   template: './src/index.html',   hash: true,   minify: {    removeAttributeQuotes:true,    removeComments: true,    collapseWhitespace: true,    removeScriptTypeAttributes:true,    removeStyleLinkTypeAttributes:true   }  }) ]}

上面的配置就是打包一個(gè)單頁(yè)面的代碼，具體配置項(xiàng)的意思請(qǐng)參考HTMLWebpackPlugin;

如何打包多頁(yè)面

在學(xué)了webpack之后，我的感受是我會(huì)配置webpack了，也能運(yùn)行了，但是學(xué)習(xí)的過(guò)程中都是單頁(yè)面的，那么多頁(yè)是如何打包的呢？其實(shí)多頁(yè)面的打包和單頁(yè)面的打包的原理是一樣的，只是多配置幾個(gè)對(duì)應(yīng)的入口，和出口，以及HtmlWebpackPlugin對(duì)象；當(dāng)然你完全可以像下面這樣：

const config = { entry:{  index:'./src/index.js'，  info:'./src/index.js' }, output:{  path: path.join(__dirname, 'dist'),  filename: 'js/[name].js' } ... plugins:[  new HtmlWebpackPlugin({   filename: 'index.html',   template: './src/index.html',   chunks:['index'],   hash: true,   minify: {    removeAttributeQuotes:true,    removeComments: true,    collapseWhitespace: true,    removeScriptTypeAttributes:true,    removeStyleLinkTypeAttributes:true   }  }),  new HtmlWebpackPlugin({   filename: 'info.html',   template: './src/info.html',   hash: true,   chunks:['info'],   minify: {    removeAttributeQuotes:true,    removeComments: true,    collapseWhitespace: true,    removeScriptTypeAttributes:true,    removeStyleLinkTypeAttributes:true   }  }) ]}

細(xì)心的你肯定發(fā)現(xiàn)我改變了幾個(gè)地方，一是,把output.filename的‘js/index.js'變成了‘js/[name].js',這是因?yàn)槲覀兪嵌囗?yè)面，每個(gè)頁(yè)面對(duì)應(yīng)相應(yīng)的js這樣方便管理，二是，在HtmlWebpackPlugin對(duì)象中添加了chunks這個(gè)屬性，chunk屬性是讓你選擇對(duì)應(yīng)的js模塊；

上面這種寫(xiě)法當(dāng)然是沒(méi)有問(wèn)題，這是只有兩個(gè)頁(yè)面無(wú)所謂，那么有十個(gè)甚至更多呢，我們一直做著重復(fù)的事，這不是我們程序員的風(fēng)格，我們就是為了能夠偷懶才做程序員的不是嗎?(當(dāng)然還有高工資(#^.^#))，接下來(lái)我們來(lái)抽離這些重復(fù)的事；

首先，我們通過(guò)Node的glob對(duì)象，來(lái)獲取我們存在的html或js；

/**** @param {string} globPath 文件的路徑* @returns entries*/function getView(globPath,flag){ let files = glob.sync(globPath); let entries = {}, entry, dirname, basename, pathname, extname; files.forEach(item => {  entry = item;  dirname = path.dirname(entry);//當(dāng)前目錄  extname = path.extname(entry);//后綴  basename = path.basename(entry, extname);//文件名  pathname = path.join(dirname, basename);//文件路徑  if (extname === '.html') {   entries[pathname] = './' + entry;  } else if (extname === '.js') {   entries[basename] = entry;  } }); return entries;}