记一次webpack打包

jiezi

5 年前

前言
- 公司的一个公众号要做一个 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 的理解又加深了一层.

记一次 webpack 打包