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的多页应用新方案