記一次webpack打包

記一次webpack打包

  • 前言css

    • 公司的一個公衆號要作一個H5的活動. 很簡單的兩個頁面, 寫完以後, 我想要不要去作一下壓縮, 仍是直接放上去就行了, 後面一想, 仍是作下壓縮吧, 正好從新學習下webpack, 之前用webpack 都是人家寫好的手腳架, 拿來直接用的, 本身改改, 沒啥問題, 可是要本身從新搭一套, 好像也不太會, 因此趁此次機會實驗一下.
  • 項目詳情html

    • 因爲只是一個小的活動頁, 只有三個頁面, 因此, 開始寫的時候, 框架只採用了 zepto.js, 後面須要一個截屏的功能, 全部又用了 html2canvas. 而且最坑的是,我再開發時並無採用webpack去開發, 最簡單的方式去開發, 搭配nginx.
    • 目錄結構:webpack

      • less 用less寫樣式, 實時編譯css
      • js 邏輯控制
      • libs 用來放第三方庫
      • config 有兩個文件, utils.js 和 api.js
      • image 用來放圖片
      • html 文件放在最外層
  • 開始進行 webpack 配置nginx

    • npm init 進行初始化
    • npm install --save-dev webpack webapck-cli (注意: webpack版本使用的是 4.39.2 )
    • 根據文檔在根目錄下添加 webpack.config.js 配置文件
    • 在 package.json 中 添加 "build": "webpack --config webpack.config.js"
    • 配置入口文件:web

      • 在這裏因爲我有三個頁面, 因此配置了三個入口文件, 對應個人三個js文件
      • 而且因爲加入了webpack的緣由, 新增了 src 目錄, 將 js 放在src下面
      • entry.jpg
    • 配置出口文件:npm

      • output.jpg
      • 完成之後, 去進行 npm run build 只打包出來了三個js文件, 根本不是我想要的嘛, html 在哪裏呢, 遂百度之. 原來還須要 html 模板, 須要使用 html-webpack-plugin 插件
    • 配置 html-webpack-plugin 插件json

      • 根據文檔, 配置以下:
      • html-webpack-plugin.jpg
      • 這裏將該插件使用了三次, 生成了三個html文件
      • filename: 就是打包出來的html文件名
      • template: 就是html文件模板
      • minify: 壓縮相關參數
      • chunks: 要引入的js文件, 就是前面入口文件配置的名稱. 寫對應的就行
    • 將一切依賴資源都模塊化canvas

      • 將 index.html 引入的資源都在 index.js 中引入
      • index.jpg
      • 再去打包的時候, 報錯了. 仔細一看報錯信息, 原來是須要 各類 loader
    • loader 配置:api

      • 這裏我用到了, style-loader, css-loader, less-loader, html-loader, url-loader.
      • 前三個都是用來處理 css 樣式, url-loader 用來處理 image圖片路徑, 配置以下:
      • less-loader.jpg
      • 這裏重點說下, 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, 配置以下:

      • devServer.jpg
  • 後記:

    • 第一次記本身解決問題的事, 花費兩三個小時, 這點時間付出仍是值得的, 最起碼對webpack的理解又加深了一層.
相關文章
相關標籤/搜索