webpack总结篇
一、webpack简介
1.1 版本更迭
image.png
大版本变化
image.png
1.2 功能进化
Webpack V1
Webpack V2
Webpack V3
V1 -> V2
迁移指南 https://doc.webpack-china.org/guides/migrating/
V2 -> V3
更新升级即可
二、webpack核心概念
2.1 Entry
2.2 Output
2.3 Loaders
2.3.1 常用Loader
编译相关
样式相关
文件相关
2.4 Plugins
2.4.1 常用plugins
优化相关
功能相关
2.5 名词
三、初探 webpack
3.1 使用babel打包es6
3.1.1 编译 ES 6/7
Babel
Babel Presets
Babel Polyfill
Babel Runtime Transform
例子
3.2 打包 Typescript
配置
tsconfig
Typings
例子
3.3 提取 js 的公用代码
例子
image.png
3.4 代码分割和懒加载
第一种方式：通过wepack内置方法
第二种方式：通过ES2015 Loader Spec
import()方式返回一个promise在import中传入需要依赖的明，动态加载模块，就可以像使用Promise一样使用import().then()
代码分割场景
例子
运行打包这时loadash提取到vendor中
image.png
这时候还不是我们想要的
image.png
image.png
image.png
import()动态加载的写法
合并了subPageA和subPageB
image.png
来看看打包后的文件，既有A、B
image.png
在webpack代码分割中使用async异步加载
image.png
image.png
3.5 处理 CSS 和 CSS 模块化
引入css
Style-Loader
Style-Loader的options
例子
CSS-Loader
options
CSS-Modules
例子
配置Less / Sass
例子
提取 CSS
例子
image.png
3.6 PostCSS in Webpack
安装
例子
3.7 Tree shaking
3.7.1 JS Tree shaking
使用场景
例子
3.7.2 CSS Tree shaking
例子
四、由浅入深Webpack
4.1 文件处理
4.1.1 图片处理
4.1.2 处理雪碧图、base64、压缩图片
4.1.2 处理字体文件
4.1.3 处理第三方 JS 库
1.providePlugin
以引入jQuery为例
引入本地libs中的jQuery
2.imports-loader
4.2 HTML in webpack(自动生成HTML)
4.2.1 生成 HTML
options
4.2.2 HTML 中引入图片
绛旓細鍩烘湰鐢ㄦ硶浣跨敤dll鏃讹紝鍙互鎶婃瀯寤鸿繃绋嬪垎鎴恉ll鏋勫缓杩囩▼鍜屼富鏋勫缓杩囩▼锛堝疄璐ㄤ篃灏辨槸濡傛锛夛紝鎵浠ラ渶瑕佷袱涓瀯寤洪厤缃枃浠讹紝渚嬪鍙仛webpack.config.js鍜寃ebpack.dll.config.js銆1. 浣跨敤DLLPlugin鎵撳寘闇瑕佸垎绂诲埌鍔ㄦ佸簱鐨勬ā鍧桪llPlugin鏄痺ebpack鍐呯疆鐨勬彃浠讹紝涓嶉渶瑕侀澶栧畨瑁咃紝鐩存帴閰嶇疆webpack.dll.config.js鏂囦欢锛歮odule....
绛旓細鏃堕棿涔樼潃骞磋疆寰簭寰鍓,涓娈垫椂闂寸殑宸ヤ綔宸茬粡缁撴潫浜,鍥為【杩囧幓杩欐鏃堕棿鐨勫伐浣,鏀惰幏棰囦赴,濂藉ソ鍦板仛涓⒊鐞嗗苟鍐欎竴浠藉伐浣滄荤粨鍚с傚伐浣滄荤粨鎬庝箞鍐欐墠鑳藉彂鎸ュ畠鏈澶х殑浣滅敤鍛?涓嬮潰鏄垜甯ぇ瀹舵暣鐞嗙殑web鍓嶇骞村害宸ヤ綔鎬荤粨鑼冩枃,浠呬緵鍙傝,澶у涓璧锋潵鐪嬬湅鍚с web鍓嶇骞村害宸ヤ綔鎬荤粨 绡1 浠庡叆鑱屽埌鐜板湪,鎴戝湪瀵煎笀鐨勬寚瀵间笅璧颁笂浜嗗墠绔箣璺
绛旓細鎴戜笓闂ㄨ姳浜嗗嚑澶╃殑鏃堕棿鐮旂┒浜嗕竴涓webpack杩欎釜鐩墠鏉ョ湅姣旇緝鐑棬鐨勬ā鍧楀姞杞藉吋鎵撳寘宸ュ叿,鍙戠幇涓婃墜骞朵笉鏄緢瀹规槗,鐜板皢鎬荤粨鐨勪竴浜涙湁鍏抽厤缃殑蹇冨緱鍒嗕韩鍑烘潵,娆㈣繋澶х鏉ユ媿鐮栥傘傘備竴銆佹柊寤轰竴涓」鐩洰褰,cd /d 瀹氫綅杩涘幓,鐒跺悗杈撳叆npm init,浼氭彁绀轰綘濉啓涓浜涢」鐩殑淇℃伅,涓鐩村洖杞﹂粯璁ゅ氨濂戒簡,鎴栬呯洿鎺ユ墽琛宯pm init -y 鐩存帴璺宠繃,杩...
绛旓細浣嗗湪闇瑕佽繘琛屼唬鐮佸垎鍓插拰鎳掑姞杞芥椂锛宍require.ensure`浼氭槸涓涓緢濂界殑閫夋嫨銆傚悓鏃讹紝闅忕潃Webpack鐗堟湰鐨勮凯浠ｆ洿鏂帮紝鏌愪簺鐗规у彲鑳戒細鏈夋墍鍙樺寲锛屽洜姝ゅ缓璁紑鍙戣呭湪浣跨敤鏃舵煡闃呮渶鏂扮殑瀹樻柟鏂囨。銆鎬荤粨鏉ヨ锛宍require.ensure`鏄疻ebpack鎻愪緵鐨勪竴绉嶅紓姝ュ姞杞芥ā鍧楃殑璇硶锛屼富瑕佺敤浜庢ц兘浼樺寲鍜屾寜闇鍔犺浇鐨勫満鏅
绛旓細7銆佸彲浠ュ埌package.json鏂囦欢涓煡鐪嬪寘鏄惁瀛樺湪 鎬荤粨锛 瀹夎鍚勭webpack鐨勪緷璧栫粡甯镐細鍑虹幇杩欑鎴栭偅鏍风殑闂锛岄渶瑕佹垜浠粩缁嗗垎鏋愪竴涓嬫姤閿欐墠琛屻傝櫧鐒剁綉涓婃湁鍚勭闂鐨勫畨瑁呮柟娉曪紝浣嗘寜鐓т粬浠殑涔熻鍙锛屼篃璁镐笉鍙锛屼絾鎬讳細鑰楄垂鑷繁鐨勫ぇ閲忔椂闂淬傛墍浠ヤ粩缁嗗垎鏋愯嚜宸辩殑鎶ラ敊鏄粈涔堝師鍥犲鑷寸殑锛屾墠鑳藉鐥囦笅鑽揩閫熻В鍐抽棶棰樸
绛旓細1銆乿ue-cli webpack鍏ㄥ眬寮曞叆jquery (1) 棣栧厛 npm install jquery --save (--save 鐨勬剰鎬濇槸灏嗘ā鍧楀畨瑁呭埌椤圭洰鐩綍涓嬶紝骞跺湪package鏂囦欢鐨刣ependencies鑺傜偣鍐欏叆渚濊禆銆)(2)鍦╳ebpack.base.conf.js閲屽姞鍏 var webpack = require("webpack")(3)鍦╩odule.exports鐨勬渶鍚庡姞鍏 plugins: [ new web...
绛旓細浠婂ぉ灏忕紪瑕佽窡澶у鍒嗕韩鐨勬枃绔犳槸鍏充簬闆跺熀纭瀛Web鍓嶇鐨勫涔犺矾绾鎬荤粨锛屽噯澶囧涔web鍓嶇鐭ヨ瘑鐨勫皬浼欎即浠潵鍜屽皬缂栦竴璧风湅涓鐪嬪惂锛屽笇鏈涙湰绡囨枃绔犺兘澶熷澶у鏈夋墍甯姪銆傜涓涓樁娈碉細1銆丠TML+CSS:HTML杩涢樁銆丆SS杩涢樁銆乨iv+css甯冨眬銆丠TML+css鏁寸珯寮鍙戙2銆丣avaScript鍩虹锛欽s鍩虹鏁欑▼銆乯s鍐呯疆瀵硅薄甯哥敤鏂规硶銆佸父瑙丏OM鎿嶄綔銆...
绛旓細閲岄潰娣诲姞涓嬮潰杩欎釜灞炴у氨瀹岀編瑙ｅ喅浜唒ublicPath: '../../'瑙ｉ噴鏂囦欢鏈缁堜細鎵撳寘鍘嬬缉涓簀s銆傚綋杩愯鐨勬椂鍊欙紝css涓殑鐩稿璺緞鎸囧悜宸茬粡鍙戠敓鍙樺寲鎸囧悜浜嗘牴鐩綍锛屾墍浠ュ嚭鐜板姞杞介敊璇殑闂銆備笅闈㈡槸杩欎釜鎻掍欢鐨勮В閲娿俥xtract-text-webpack-plugin浣滅敤锛氳鎻掍欢鐨勪富瑕佹槸涓轰簡鎶界css鏍峰紡,闃叉灏嗘牱寮忔墦鍖呭湪js涓紩璧烽〉闈㈡牱寮忓姞杞...
绛旓細2018-2019骞磋嚜宸卞浜嗕笉灏戞柊鎶鏈紝NodeJs锛孧ogoDB锛孯eact锛孴ypeScript锛Webpack锛孍S6-7绛夛紝鎬荤粨杩欎袱骞寸殑瀛︿範锛屾湁寰堝鏄捐屾槗瑙佺殑闂锛氬浜嗗鏋滀笉缁忓父搴旂敤锛屽氨蹇樿浜嗭紱涓嶅璁ょ湡锛屾湁鏃跺欒寰楃湅鏄庣櫧灏变笉鍔ㄦ墜锛屽挨鍏剁湅瑙嗛瀛︿範鐨勬椂鍊欙紱鍔ㄦ墜鏁蹭簡涓閬嶏紝灏辫寰椾細浜嗭紝浠ヨ嚦浜庢病鏈夋繁鍏ユ濊冿紱鍥犱负鎯冲鐨勫お澶氾紝鏃堕棿...
绛旓細鎵浠Webpack 鏄竴绉嶅湪闈炶繍琛屾椂鐨勬ā鍧楀寲鏂规(鍩轰簬 CommonJs),鍙湁鍦ㄩ厤缃簡寮傛妯″潡鐨勬椂鍊欏寮傛妯″潡鐨勫姞杞芥墠鏄繍琛屾椂鐨(鍩轰簬 AMD)浜斻佹ā鍧楀寲瑙勮寖閫氱敤鐨勯棶棰樺湪瑙ｅ喅鐨勮繃绋嬩腑鎬讳細褰㈡垚瑙勮寖,涓婃枃宸茬粡澶氭鎻愬埌 CommonJs銆丄MD銆丆MD,鏈夊繀瑕佽姳鐐圭瘒骞呮潵璁蹭竴璁茶鑼僇s 鐨勬ā鍧楀寲瑙勮寖鐨勮悓鍙戜簬灏 Js 鎵╁睍鍒板悗绔殑鎯虫硶,瑕佷娇寰 ...
