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