Webpack 3.X 多页面自动打包配置教程

简介

在实际开发中，项目往往包含多个页面。为了提升开发效率，我们通常采用前端自动化工具进行构建。那么，是如何处理页面打包的？又是如何实现多页面打包的呢？

单页面打包配置

单页面打包

打包单页面的方法相对简单，主要涉及配置入口文件和插件。


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
   }
  })
 ]
}

上述配置展示了单页面打包的代码，具体配置项的含义请参考的官方文档。

多页面打包实现

如何打包多页面

在掌握了 webpack 配置与运行之后，此前的学习局限于单页面应用。针对多页面打包，其核心原理与单页面一致，关键在于配置多个对应的入口和出口，并实例化多个 HtmlWebpackPlugin 对象；具体实现可参考如下方式：


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
   }
  })
 ]
}

细心的读者可能已经注意到几处变化：首先，将 output.filename 从 'js/index.js' 修改为 'js/[name].js'，这是因为多页面项目中每个页面对应独立的 JS 文件，便于管理；其次，在对象中添加了 chunks 属性，用于指定该页面所需的 JS 模块。

上述写法在处理少量页面时没有问题，但如果页面数量达到十个甚至更多，手动维护重复配置显然不符合程序员的风格。我们开发程序的目的之一正是为了减少重复劳动（当然，这也带来了更高的薪资回报(#^.^#)）。接下来，我们将抽离这些重复的操作。

动态获取文件与入口配置

首先，利用 Node.js 的 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);//当前目录
  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;
}

既然我们已经有了 getView() 函数来获取 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 页面与插件配置

最后，获取 HTML 页面并添加对应的对象。

后记

通过上述三个步骤，即可配置好一个支持多页面打包的工具。由于本人水平有限，文中可能存在表述模糊之处，敬请谅解，也欢迎大神指正。

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持本站。

Webpack 3.X 多页面打包配置实战

单页面打包配置

多页面打包实现

动态获取文件与入口配置

HTML 页面与插件配置

实用工具推荐