webpack3.X中如何实现多页面打包

这篇文章将为大家详细讲解有关webpack3.X中如何实现多页面打包，小编觉得挺实用的，因此分享给大家做个参考，希望大家阅读完这篇文章后可以有所收获。

单页面打包

我们知道要打包单页面的方法，很简单，配置入口，和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;

如何打包多页面

在学了webpack之后，我的感受是我会配置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这样方便管理，二是，在HtmlWebpackPlugin对象中添加了chunks这个属性，chunk属性是让你选择对应的js模块；

上面这种写法当然是没有问题，这是只有两个页面无所谓，那么有十个甚至更多呢，我们一直做着重复的事，这不是我们程序员的风格，我们就是为了能够偷懒才做程序员的不是吗?(当然还有高工资(#^.^#))，接下来我们来抽离这些重复的事；

首先，我们通过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);//当前目录   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页面，和添加对应页面的HTMLWebpackPlugin对象；

关于“webpack3.X中如何实现多页面打包”这篇文章就分享到这里了，希望以上内容可以对大家有一定的帮助，使各位可以学到更多知识，如果觉得文章不错，请把它分享出去让更多的人看到。