webpack 多頁面設置

簡介

我們開發不可能只寫一個頁面，每次都要寫很多頁面，這時為了開發效率，我們使用前端自動化工具webpack，那麼webpack是如何打包頁面的呢？又是如何打包多頁面的呢？

單頁面打包

我們知道要打包單頁面的方法，很簡單，配置入口，和html插件，

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

上面的配置就是打包一個單頁面的代碼，具體配置項的意思請參考HTMLWebpackPlugin;

如何打包多頁面

在學了webpack之後，我的感受是我會配置webpack了，也能運行了，但是學習的過程中都是單頁面的，那麼多頁是如何打包的呢？其實多頁面的打包和單頁面的打包的原理是一樣的，只是多配置幾個對應的入口，和出口，以及HtmlWebpackPlugin對象；當然你完全可以像下面這樣：

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

細心的你肯定發現我改變了幾個地方，一是,把output.filename的『js/index.js』變成了『js/[name].js』,這是因為我們是多頁面，每個頁面對應相應的js這樣方便管理，二是，在HtmlWebpackPlugin對象中添加了chunks這個屬性，chunk屬性是讓你選擇對應的js模塊；

上面這種寫法當然是沒有問題，這是只有兩個頁面無所謂，那麼有十個甚至更多呢，我們一直做著重複的事，這不是我們程序員的風格，我們就是為了能夠偷懶才做程序員的不是嗎?(當然還有高工資(#^.^#))，接下來我們來抽離這些重複的事；

首先，我們通過Node的glob對象，來獲取我們存在的html或js；

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

既然，我們已經有了getView()函數，可以獲取html和js文件，那麼我們就可以確定有多少個入口，和多少個頁面;

let entriesObj = getView(./src/js/*.js);nnlet config = {n entry:entriesObj,n ...n}n

上面我們就配置好了入口，不需要我們手動添加了，有多少js就有多少入口；

let pages = Object.keys(getView(./src/*html));nnpages.forEach(pathname => {n let htmlname = pathname.split(src)[1];n let conf = {n filename: `${htmlname}.html`,n template: `${pathname}.html`,n hash: true,n chunks:[htmlname],n minify: {n removeAttributeQuotes:true,n removeComments: true,n collapseWhitespace: true,n removeScriptTypeAttributes:true,n removeStyleLinkTypeAttributes:truen }n }nn config.plugins.push(new HtmlWebpackPlugin(conf));n});n

最後，我們獲取HTML頁面，和添加對應頁面的HTMLWebpackPlugin對象；

後記

通過以上的三個步驟，就可以配置好一個可以打包多頁面的webpack工具；本人的水平比較有限，在書寫的過程中，可能有很多說的比較模糊，請多多包涵，也請大神拍磚，多多指教。

原文：webpack 3.X學習之多頁面打包

推薦閱讀：