webpack 教程 那些事儿05-多页应用

本篇主要关于如何用webpack构建多页应用

为什么要构建多页应用呢？因为我的项目本来就是多页应用啊
至于为什么要用webpack？因为我要用vue啊，嫌gulp 每次打包慢 啊

文章目录

1. 1. 利用vue-cli的配置，扩展成多页应用
2. 2. gulp项目转化成webpack之后的痛
3. 3. 抛弃webpack多页应用配置
4. 4. 下篇基于webpack的多页应用新方案

利用vue-cli的配置，扩展成多页应用

想法总是简单，实践总是多坑。

理论支持：spa为单页，那么我是不是输出多个页面就成了多页呢？好像很对的样子。
问题来了，如何才能输出多个页面，主意很容易打到 html处理插件 html-webpack-plugin上面。
单页面输出:

1 2 3 4 5

new HtmlWebpackPlugin({ filename: 'index.html', template: path.resolve(__dirname, './app/views/index.html'), inject: true })

多页面只需要多new 几个HtmlWebpackPlugin就好了嘛
马上实践，果然可以，✌️。那就动动吧！
兴奋的修改配置如下:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15

# webpack.base.conf.js   entry: getEntry(), //获取js下面的所有输出js,多页面嘛 function getEntry() { var jsPath = fs.readdirSync('./js/'); var matchs = [],files = {}; jsPath.forEach(function(item) { matchs = item.match(/(.+)\.js$/); if (matchs) { files[matchs[1]] = path.resolve('./js/', item); } }); return files; }

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18

# webpack.dev.conf.js var baseWebpackConfig = require('./webpack.base.conf'); var pages = function() { var dir = fs.readdirSync(path.resolve(__dirname, '../views/')); return dir.filter(function(name) { return name.match(/\.html$/); }); }();   for(var i = 0; i<pages.length; i++){ var chunkname = pages[i]; var conf = { filename: chunkname, template: path.resolve(__dirname, '../views/'+chunkname), inject: false } baseWebpackConfig.plugins.push(new HtmlWebpackPlugin(conf)); }

想必聪明的你还记得我之前说过的 inject 这个参数吧
如果inject: true,那么每个页面会注入entry中所有的js，所以配置为false，js自己写入

相对的,webpack.prod.conf.js也需要做相应配置。
至于其他资源文件路径什么报错问题，请自行解决，毕竟项目架构不同，错误也不尽相同。

我也是吃了很多苦头，排尽万难，终于把之前用gulp搭建的项目转换成webpack之后，并没有兴奋。
因为结果并不令我满意，为什么呢？

gulp项目转化成webpack之后的痛

• 项目大概二十多个页面（就是.html文件），启动项目需要一分钟

  啦啦啦
  我在等一分钟
  或许下一分钟
  能够感觉你也心痛
  …
  我想哭

• 还没有引入babel，引入babel转码之后，es6语法不生效
  明明引入了babel转码，为毛始终不生效，头痛许久，查找到问题根源，
  修改： include: ‘./js’ —-> include: “/“
  原因未明

• es6语法解决之后，打包更慢了，何止一分钟。。。这次不仅仅想哭

• 虽说整个项目用webpack打包，但是还有一些task必须依赖gulp完成，定制需求。

抛弃webpack多页应用配置

因为坑太多，太慢，太痛，太捉急，等等。至此搁笔，果断抛弃此方案！

下篇基于webpack的多页应用新方案