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