本篇主要关于如何用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的多页应用新方案

webpack 教程 那些事儿05-多页应用的更多相关文章

  1. webpack 教程 那些事儿06-gulp+webpack多页

    本篇主要讲述用gulp+webpack构建多页应用 折腾到现在,项目还必须要进行,.vue文件必须要加载,也就是webpack必须引入.时间不多了,抛弃上个方案之后,只能牺牲热加载性能,用gulp+w ...

  2. webpack 教程 那些事儿04-webpack项目实战分析

    这节主要讲解真正项目用用到的 webpack配置问题,项目实战篇 就像我们不会完全做一个项目,不用别人的轮子一样.这个配置我们借用 vue-cli 搭建的配置来研究,因为它已经足够优秀. 有了前面的基 ...

  3. webpack 教程 那些事儿03-webpack两大精华插件,热加载

    本节主要讲述 webpack的两大经典开发调试插件,热插拔内存缓存机制 文章目录 1. html-webpack-plugin插件的使用 2. webpack-dev-middleware 插件登场 ...

  4. webpack 教程 那些事儿02-从零开始

    接着上篇我们有了最简单的安装了webpack的项目目录这节我们从零开始搭建一个简单的基于webpack的spa应用demo本节只说基础常用配置项,复杂后续讲解. 文章目录 1. 新建项目结构目录,如下 ...

  5. webpack 教程 那些事儿01-webpack是什么

    文章目录 1. 为什么引入webpack? 2. webpack到底是什么? 3. webpack的工作流程理念 4. webpack的使用 4.1. install webpack 5. 分享源码d ...

  6. [js高手之路]深入浅出webpack教程系列6-插件使用之html-webpack-plugin配置(下)

    上文我们对html-webpack-plugin的实例htmlWebpackPlugin进行了遍历分析,讲解了几个常用属性( inject, minify )以及自定义属性的添加,本文,我们继续深入他 ...

  7. Webpack教程

    打开链接:Webpack教程

  8. Webpack教程二

    Webpack教程一 开发技巧 启用source-map 现在的代码是合并以后的代码,不利于排错和定位,只需要在config中添加 ... devtool: 'eval-source-map', .. ...

  9. [js高手之路]深入浅出webpack教程系列5-插件使用之html-webpack-plugin配置(中)

    上文我们讲到了options的配置和获取数据的方式,本文,我们继续深入options的配置 一.html-webpack-plugin插件中的options除了自己定义了一些基本配置外,我们是可以任意 ...

随机推荐

  1. win7怎么显示隐藏文件夹

    1. 点击“组织”,再选择“文件夹和搜索选项”命令. 2. 接下来在打开的“文件夹选项”对话框中,单击“查看”,切换到“查看”选项卡中. 3. 然后在下面的“高级设置”区域,取消“隐藏受保护的操作系统 ...

  2. jpa datasource config

    application.properties spring.datasource.driverClassName= spring.datasource.url= spring.datasource.u ...

  3. Windows XP SP3 Professional 微软(MSDN)官方原版系统

    Windows XP SP3 Professional 微软(MSDN)官方原版系统 Windows XP(版本号:5.1,开发代号:Whistler)是微软公司推出供个人电脑使用的操作系统,其RTM ...

  4. Linux下interface文件修改

    我们来通过一些例子,来记录interfaces文件的书写.详情可参照man interfaces. 设置常用ethernet参数 auto lo iface lo inet loopback # Th ...

  5. 自然语言9_NLTK计算中文高频词

    以下代码仅限于python2 NLTK计算中文高频词 >>> sinica_fd=nltk.FreqDist(sinica_treebank.words()) >>> ...

  6. php栈数据结构和括号匹配算法

    栈,体现的是后进先出,即LIFO.队列,体现的是先进先出,即FIFO. 栈 array_pop() //尾出 array_push() //尾进 或 array_shift()//头进 array_u ...

  7. Senparc.Weixin.MP.Sample 配置redis服务器密码

    redis.windows-service.conf中加  requirepass 你的密码 <!-- Cache.Redis连接配置 --> <add key="Cach ...

  8. java 正则 二次转义

    JAVA中的正则表达式"\\[([^\\]]+)\\]"这个表示什么意思?两个转义字符是为了表达什么? 正则表达式中"["这样的字符有特殊的意义,所以需要写成& ...

  9. spring boot入门例子

    最近学习spring boot,总结一下入门的的基础知识 1新建maven项目,修改pom.xml <project xmlns="http://maven.apache.org/PO ...

  10. JS获取当前对象大小以及屏幕分辨率等...

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"/> <meta nam ...