亚洲中字慕日产2020,大陆极品少妇内射AAAAAA,无码av大香线蕉伊人久久,久久精品国产亚洲av麻豆网站

資訊專欄INFORMATION COLUMN

記一次webpack打包

Profeel / 1888人閱讀

摘要：記一次打包前言公司的一個(gè)公眾號(hào)要做一個(gè)的活動(dòng)很簡(jiǎn)單的兩個(gè)頁(yè)面寫完之后我想要不要去做一下壓縮還是直接放上去就好了后面一想還是做下壓縮吧正好重新學(xué)習(xí)下以前用都是人家寫好的手腳架拿來(lái)直接用的自己改改沒啥問(wèn)題但是要自己重新搭一套好像也不太會(huì)所以趁這

記一次webpack打包

前言

公司的一個(gè)公眾號(hào)要做一個(gè)H5的活動(dòng). 很簡(jiǎn)單的兩個(gè)頁(yè)面, 寫完之后, 我想要不要去做一下壓縮, 還是直接放上去就好了, 后面一想, 還是做下壓縮吧, 正好重新學(xué)習(xí)下webpack, 以前用webpack 都是人家寫好的手腳架, 拿來(lái)直接用的, 自己改改, 沒啥問(wèn)題, 但是要自己重新搭一套, 好像也不太會(huì), 所以趁這次機(jī)會(huì)實(shí)驗(yàn)一下.

項(xiàng)目詳情

由于只是一個(gè)小的活動(dòng)頁(yè), 只有三個(gè)頁(yè)面, 所以, 開始寫的時(shí)候, 框架只采用了 zepto.js, 后面需要一個(gè)截屏的功能, 所有又用了 html2canvas. 并且最坑的是,我再開發(fā)時(shí)并沒有采用webpack去開發(fā), 最簡(jiǎn)單的方式去開發(fā), 搭配nginx.

目錄結(jié)構(gòu):

less 用less寫樣式, 實(shí)時(shí)編譯css

js 邏輯控制

libs 用來(lái)放第三方庫(kù)

config 有兩個(gè)文件, utils.js 和 api.js

image 用來(lái)放圖片

html 文件放在最外層

開始進(jìn)行 webpack 配置

npm init 進(jìn)行初始化

npm install --save-dev webpack webapck-cli (注意: webpack版本使用的是 4.39.2 )

根據(jù)文檔在根目錄下添加 webpack.config.js 配置文件

在 package.json 中 添加 "build": "webpack --config webpack.config.js"

配置入口文件:

在這里由于我有三個(gè)頁(yè)面, 所以配置了三個(gè)入口文件, 對(duì)應(yīng)我的三個(gè)js文件

并且由于加入了webpack的原因, 新增了 src 目錄, 將 js 放在src下面

配置出口文件:

完成以后, 去進(jìn)行 npm run build 只打包出來(lái)了三個(gè)js文件, 根本不是我想要的嘛, html 在哪里呢, 遂百度之. 原來(lái)還需要 html 模板, 需要使用 html-webpack-plugin 插件

配置 html-webpack-plugin 插件

根據(jù)文檔, 配置如下:

這里將該插件使用了三次, 生成了三個(gè)html文件

filename: 就是打包出來(lái)的html文件名

template: 就是html文件模板

minify: 壓縮相關(guān)參數(shù)

chunks: 要引入的js文件, 就是前面入口文件配置的名稱. 寫對(duì)應(yīng)的就行

將一切依賴資源都模塊化

將 index.html 引入的資源都在 index.js 中引入

再去打包的時(shí)候, 報(bào)錯(cuò)了. 仔細(xì)一看報(bào)錯(cuò)信息, 原來(lái)是需要 各種 loader

loader 配置:

這里我用到了, style-loader, css-loader, less-loader, html-loader, url-loader.

前三個(gè)都是用來(lái)處理 css 樣式, url-loader 用來(lái)處理 image圖片路徑, 配置如下:

這里重點(diǎn)說(shuō)下, html-loader

由于原先內(nèi)容都是寫在 index.html 頁(yè)面中的, 而此時(shí) index.html 作為了模板, 再將內(nèi)容放在 index.html 中不太好. 所以新增view文件在該文件加下新增了 index.html . 將內(nèi)容放在這個(gè)文件里. 而在模板的 index.html 新增一行 這樣的代碼 <%= require("html-loader!./view/index.html") %>, 將 view/index.html 中的代碼引入過(guò)來(lái). 這樣看起來(lái)就很干凈.

js壓縮:

使用 uglifyjs-webpack-plugin 進(jìn)行壓縮.

打包之后, 測(cè)試發(fā)現(xiàn), 樣式加載特別的慢, 原來(lái) css 并沒有被分離出來(lái), 都被打包在了 index.js 中, 所以又要進(jìn)行, css 分離

分離 css:

使用 mini-css-extract-plugin 進(jìn)行分離.

這里文檔上推薦, webpack4x 使用該插件, 低版本的使用 extract-text-webpack-plugin

到這一步了, 配置個(gè) webpack-dev-server 進(jìn)行開發(fā), 調(diào)試. 好像也不是很麻煩, 也不差這一步了, 還能舍棄 nginx.

配置 webpack-dev-server, 配置如下:

后記:

第一次記自己解決問(wèn)題的事, 花費(fèi)兩三個(gè)小時(shí), 這點(diǎn)時(shí)間付出還是值得的, 最起碼對(duì)webpack的理解又加深了一層.

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://www.ezyhdfw.cn/yun/106854.html

相關(guān)文章

  • 記一次 webpack 打包體積優(yōu)化

    摘要：手頭做的項(xiàng)目開發(fā)得差不多了，而打包配置是一開始粗略配置的，不大的項(xiàng)目打包出來(lái)得，所以現(xiàn)在必須進(jìn)行優(yōu)化。用于生產(chǎn)環(huán)境的打包，設(shè)置其為后，這些庫(kù)會(huì)提供最小體積的文件。這種情況打包后的體積要更小一些。最后打包結(jié)果的體積開銷主要就是以上幾項(xiàng)。 手頭做的項(xiàng)目開發(fā)得差不多了，而打包配置是一開始粗略配置的，不大的項(xiàng)目打包出來(lái)得6MB+，所以現(xiàn)在必須進(jìn)行優(yōu)化。 打包結(jié)果分析 執(zhí)行命令 webpack ...

    tomlingtm 評(píng)論0 收藏0

  • 記一次vue-webpack項(xiàng)目?jī)?yōu)化實(shí)踐【更新】

    摘要：優(yōu)化空間不大主要關(guān)注另外兩個(gè)上面。目前為止，項(xiàng)目打包后的大部頭就是，這個(gè)目前的優(yōu)化空間較小。當(dāng)然，從整體優(yōu)化的大維度上來(lái)說(shuō)優(yōu)化的點(diǎn)還有很多，這個(gè)文章繼續(xù)更新下去。 項(xiàng)目現(xiàn)狀 項(xiàng)目是一個(gè)數(shù)據(jù)監(jiān)測(cè)平臺(tái)，引入了ehcart和three.js 負(fù)責(zé)項(xiàng)目的數(shù)據(jù)可視化；打包后，體積高達(dá)2.1M，這個(gè)體積相比于我的項(xiàng)目規(guī)模來(lái)說(shuō)就顯得稍有笨重了 使用webpack-bundle-analyzer分析了...

    ernest.wang 評(píng)論0 收藏0

  • 記一次使用 vue-admin-template 的優(yōu)化歷程

    摘要：同時(shí)也要引入對(duì)應(yīng)版本的先引入引入組件庫(kù)因?yàn)橐蕾囀菑耐獠恳氲模孕枰嬷诖虬鼤r(shí)，依賴的來(lái)源。然后在中加入一條命令執(zhí)行或者即可完成打包。因此將此次優(yōu)化記錄下來(lái)，并傳上了中。 本文原文 前言 公司有好幾個(gè)項(xiàng)目都有后臺(tái)管理系統(tǒng)，為了方便開發(fā)，所以選擇了 vue 中比較火的 后臺(tái)模板 作為基礎(chǔ)模板進(jìn)行開發(fā)。但是，開始用的時(shí)候，作者并沒有對(duì)此進(jìn)行優(yōu)化，到項(xiàng)目上線的時(shí)候，才發(fā)現(xiàn)，打包出來(lái)的文件...

    xumenger 評(píng)論0 收藏0

  • 【webpack】: 記一次jsbundle體積優(yōu)化

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

    Fundebug 評(píng)論0 收藏0

  • 記一次Vue項(xiàng)目?jī)?yōu)化及思路

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

    keithxiaoy 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

最新活動(dòng)
閱讀需要支付1元查看
<