記一次webpack打包

Profeel 發布于2019-08-26 10:56 / 1842人閱讀

摘要：記一次打包前言公司的一個公眾號要做一個的活動很簡單的兩個頁面寫完之后我想要不要去做一下壓縮還是直接放上去就好了后面一想還是做下壓縮吧正好重新學習下以前用都是人家寫好的手腳架拿來直接用的自己改改沒啥問題但是要自己重新搭一套好像也不太會所以趁這

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

云服務器 GPU云服務器記一次在阿里云搭建服務器記一次阿里云服務器集體中毒 Webpack打包分塊 webpack

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/106854.html

記一次 webpack 打包體積優化

摘要：手頭做的項目開發得差不多了，而打包配置是一開始粗略配置的，不大的項目打包出來得，所以現在必須進行優化。用于生產環境的打包，設置其為后，這些庫會提供最小體積的文件。這種情況打包后的體積要更小一些。最后打包結果的體積開銷主要就是以上幾項。手頭做的項目開發得差不多了，而打包配置是一開始粗略配置的，不大的項目打包出來得6MB+，所以現在必須進行優化。打包結果分析執行命令 webpack ...

tomlingtm 2019-08-26 11:47 評論0 收藏0
記一次vue-webpack項目優化實踐【更新】

摘要：優化空間不大主要關注另外兩個上面。目前為止，項目打包后的大部頭就是，這個目前的優化空間較小。當然，從整體優化的大維度上來說優化的點還有很多，這個文章繼續更新下去。項目現狀項目是一個數據監測平臺，引入了ehcart和three.js 負責項目的數據可視化；打包后，體積高達2.1M，這個體積相比于我的項目規模來說就顯得稍有笨重了使用webpack-bundle-analyzer分析了...

ernest.wang 2019-08-23 15:13 評論0 收藏0
記一次使用 vue-admin-template 的優化歷程

摘要：同時也要引入對應版本的先引入引入組件庫因為依賴是從外部引入的，所以需要告知在打包時，依賴的來源。然后在中加入一條命令執行或者即可完成打包。因此將此次優化記錄下來，并傳上了中。本文原文前言公司有好幾個項目都有后臺管理系統，為了方便開發，所以選擇了 vue 中比較火的后臺模板作為基礎模板進行開發。但是，開始用的時候，作者并沒有對此進行優化，到項目上線的時候，才發現，打包出來的文件...

xumenger 2019-08-22 17:17 評論0 收藏0
【webpack】: 記一次jsbundle體積優化

摘要：背景最近接到一個任務是幫忙優化的體積，項目是用開發，多入口。這就涉及到兩次打，那這兩次打的如何打通呢的方式配合使用。通過可以將掛載到已經存在的某個變量上。通過其它一些變量的方式暴露出去。不同的配置可以將你的庫打成一個庫，庫甚至是一個庫。背景最近接到一個任務是幫忙優化jsbundle的體積，項目是用ts開發，多入口。在分析之后發現每個bundle都打了同一份代碼(這份代碼是其它組提供...

Fundebug 2019-08-26 11:36 評論0 收藏0
記一次Vue項目優化及思路

摘要：記錄一個前端項目優化的路程，效果如上圖。第二步優化結果再次運行查看項目打包情況可以看到項目體積已經優化到，中也看不到的蹤影了。本文主要想提供一些優化思路及手段，即如何定位通過，查看頁面加載時間問題，然后再解決這些問題。 showImg(https://segmentfault.com/img/bVbq282?w=381&h=384); 記錄一個前端項目優化的路程，效果如上圖。接下來我...

keithxiaoy 2019-08-02 16:12 評論0 收藏0