记一次webpack打包

记一次 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 的理解又加深了一层.