摘要：记一次打包前言公司的一个公众号要做一个的活动很简单的两个页面写完之后我想要不要去做一下压缩还是直接放上去就好了后面一想还是做下压缩吧正好重新学习下以前用都是人家写好的手脚架拿来直接用的自己改改没啥问题但是要自己重新搭一套好像也不太会所以趁这
记一次webpack打包
前言
公司的一个公众号要做一个H5的活动. 很简单的两个页面, 写完之后, 我想要不要去做一下压缩, 还是直接放上去就好了, 后面一想, 还是做下压缩吧, 正好重新学习下webpack, 以前用webpack 都是人家写好的手脚架, 拿来直接用的, 自己改改, 没啥问题, 但是要自己重新搭一套, 好像也不太会, 所以趁这次机会实验一下.
项目详情
由于只是一个小的活动页, 只有三个页面, 所以, 开始写的时候, 框架只采用了 zepto.js, 后面需要一个截屏的功能, 所有又用了 html2canvas. 并且最坑的是,我再开发时并没有采用webpack去开发, 最简单的方式去开发, 搭配nginx.
目录结构:
less 用less写样式, 实时编译css
js 逻辑控制
libs 用来放第三方库
config 有两个文件, utils.js 和 api.js
image 用来放图片
html 文件放在最外层
开始进行 webpack 配置
npm init 进行初始化
npm install --save-dev webpack webapck-cli (注意: webpack版本使用的是 4.39.2 )
根据文档在根目录下添加 webpack.config.js 配置文件
在 package.json 中 添加 "build": "webpack --config webpack.config.js"
配置入口文件:
在这里由于我有三个页面, 所以配置了三个入口文件, 对应我的三个js文件
并且由于加入了webpack的原因, 新增了 src 目录, 将 js 放在src下面
配置出口文件:
完成以后, 去进行 npm run build 只打包出来了三个js文件, 根本不是我想要的嘛, html 在哪里呢, 遂百度之. 原来还需要 html 模板, 需要使用 html-webpack-plugin 插件
配置 html-webpack-plugin 插件
根据文档, 配置如下:
这里将该插件使用了三次, 生成了三个html文件
filename: 就是打包出来的html文件名
template: 就是html文件模板
minify: 压缩相关参数
chunks: 要引入的js文件, 就是前面入口文件配置的名称. 写对应的就行
将一切依赖资源都模块化
将 index.html 引入的资源都在 index.js 中引入
再去打包的时候, 报错了. 仔细一看报错信息, 原来是需要 各种 loader
loader 配置:
这里我用到了, style-loader, css-loader, less-loader, html-loader, url-loader.
前三个都是用来处理 css 样式, url-loader 用来处理 image图片路径, 配置如下:
这里重点说下, html-loader
由于原先内容都是写在 index.html 页面中的, 而此时 index.html 作为了模板, 再将内容放在 index.html 中不太好. 所以新增view文件在该文件加下新增了 index.html . 将内容放在这个文件里. 而在模板的 index.html 新增一行 这样的代码 <%= require("html-loader!./view/index.html") %>, 将 view/index.html 中的代码引入过来. 这样看起来就很干净.
js压缩:
使用 uglifyjs-webpack-plugin 进行压缩.
打包之后, 测试发现, 样式加载特别的慢, 原来 css 并没有被分离出来, 都被打包在了 index.js 中, 所以又要进行, css 分离
分离 css:
使用 mini-css-extract-plugin 进行分离.
这里文档上推荐, webpack4x 使用该插件, 低版本的使用 extract-text-webpack-plugin
到这一步了, 配置个 webpack-dev-server 进行开发, 调试. 好像也不是很麻烦, 也不差这一步了, 还能舍弃 nginx.
配置 webpack-dev-server, 配置如下:
后记:
第一次记自己解决问题的事, 花费两三个小时, 这点时间付出还是值得的, 最起码对webpack的理解又加深了一层.
文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。
转载请注明本文地址：https://www.ucloud.cn/yun/106854.html
摘要：手头做的项目开发得差不多了，而打包配置是一开始粗略配置的，不大的项目打包出来得，所以现在必须进行优化。用于生产环境的打包，设置其为后，这些库会提供最小体积的文件。这种情况打包后的体积要更小一些。最后打包结果的体积开销主要就是以上几项。 手头做的项目开发得差不多了，而打包配置是一开始粗略配置的，不大的项目打包出来得6MB+，所以现在必须进行优化。 打包结果分析 执行命令 webpack ...
摘要：优化空间不大主要关注另外两个上面。目前为止，项目打包后的大部头就是，这个目前的优化空间较小。当然，从整体优化的大维度上来说优化的点还有很多，这个文章继续更新下去。 项目现状 项目是一个数据监测平台，引入了ehcart和three.js 负责项目的数据可视化；打包后，体积高达2.1M，这个体积相比于我的项目规模来说就显得稍有笨重了 使用webpack-bundle-analyzer分析了...
摘要：同时也要引入对应版本的先引入引入组件库因为依赖是从外部引入的，所以需要告知在打包时，依赖的来源。然后在中加入一条命令执行或者即可完成打包。因此将此次优化记录下来，并传上了中。 本文原文 前言 公司有好几个项目都有后台管理系统，为了方便开发，所以选择了 vue 中比较火的 后台模板 作为基础模板进行开发。但是，开始用的时候，作者并没有对此进行优化，到项目上线的时候，才发现，打包出来的文件...
摘要：背景最近接到一个任务是帮忙优化的体积，项目是用开发，多入口。这就涉及到两次打，那这两次打的如何打通呢的方式配合使用。通过可以将挂载到已经存在的某个变量上。通过其它一些变量的方式暴露出去。不同的配置可以将你的库打成一个库，库甚至是一个库。 背景 最近接到一个任务是帮忙优化jsbundle的体积，项目是用ts开发，多入口。在分析之后发现每个bundle都打了同一份代码(这份代码是其它组提供...
摘要：记录一个前端项目优化的路程，效果如上图。第二步优化结果再次运行查看项目打包情况可以看到项目体积已经优化到，中也看不到的踪影了。本文主要想提供一些优化思路及手段，即如何定位通过，查看页面加载时间问题，然后再解决这些问题。 showImg(https://segmentfault.com/img/bVbq282?w=381&h=384); 记录一个前端项目优化的路程，效果如上图。 接下来我...
阅读 3108·2021-11-24 09:39
阅读 966·2021-09-07 10:20
阅读 2389·2021-08-23 09:45
阅读 2253·2021-08-05 10:00
阅读 564·2019-08-29 16:36
阅读 832·2019-08-29 11:12
阅读 2812·2019-08-26 11:34
阅读 1839·2019-08-26 10:56
