這篇文章將為大家詳細(xì)講解有關(guān)webpack3.X中如何實現(xiàn)多頁面打包，小編覺得挺實用的，因此分享給大家做個參考，希望大家閱讀完這篇文章后可以有所收獲。

創(chuàng)新互聯(lián)專注于新邱網(wǎng)站建設(shè)服務(wù)及定制，我們擁有豐富的企業(yè)做網(wǎng)站經(jīng)驗。 熱誠為您提供新邱營銷型網(wǎng)站建設(shè)，新邱網(wǎng)站制作、新邱網(wǎng)頁設(shè)計、新邱網(wǎng)站官網(wǎng)定制、成都微信小程序服務(wù)，打造新邱網(wǎng)絡(luò)公司原創(chuàng)品牌,更為您提供新邱網(wǎng)站排名全網(wǎng)營銷落地服務(wù)。

單頁面打包

我們知道要打包單頁面的方法，很簡單，配置入口，和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
   }
  })
 ]
}

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

如何打包多頁面

在學(xué)了webpack之后，我的感受是我會配置webpack了，也能運行了，但是學(xué)習(xí)的過程中都是單頁面的，那么多頁是如何打包的呢？其實多頁面的打包和單頁面的打包的原理是一樣的，只是多配置幾個對應(yīng)的入口，和出口，以及HtmlWebpackPlugin對象；當(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)我改變了幾個地方，一是,把output.filename的‘js/index.js'變成了‘js/[name].js',這是因為我們是多頁面，每個頁面對應(yīng)相應(yīng)的js這樣方便管理，二是，在HtmlWebpackPlugin對象中添加了chunks這個屬性，chunk屬性是讓你選擇對應(yīng)的js模塊；

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

首先，我們通過Node的glob對象，來獲取我們存在的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;
}

既然，我們已經(jīng)有了getView()函數(shù)，可以獲取html和js文件，那么我們就可以確定有多少個入口，和多少個頁面;
let entriesObj = getView('./src/js/*.js');

let config = {
 entry:entriesObj,
 ...
}

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

let pages = Object.keys(getView('./src/*html'));

pages.forEach(pathname => {
 let htmlname = pathname.split('src\\')[1];
 let conf = {
  filename: `${htmlname}.html`,
  template: `${pathname}.html`,
  hash: true,
  chunks:[htmlname],
  minify: {
   removeAttributeQuotes:true,
   removeComments: true,
   collapseWhitespace: true,
   removeScriptTypeAttributes:true,
   removeStyleLinkTypeAttributes:true
  }
 }

 config.plugins.push(new HtmlWebpackPlugin(conf));
});

最后，我們獲取HTML頁面，和添加對應(yīng)頁面的HTMLWebpackPlugin對象；

關(guān)于“webpack3.X中如何實現(xiàn)多頁面打包”這篇文章就分享到這里了，希望以上內(nèi)容可以對大家有一定的幫助，使各位可以學(xué)到更多知識，如果覺得文章不錯，請把它分享出去讓更多的人看到。