-
小伙伴們,大家好,針對老師的視頻教程,我整理了一份完整的源碼,源碼還有詳細的注釋和筆記,供大家學(xué)習(xí)時參考。
GitHub下載地址:https://github.com/Jasonccj/vue-webpack-todo
查看全部 -
為什么要把第三方類庫和業(yè)務(wù)邏輯代碼分離打包?
如果把業(yè)務(wù)邏輯代碼和第三類庫打包到一起,整個類庫代碼就需要隨著業(yè)務(wù)代碼的更新而更新,這樣類庫代碼就不能在瀏覽器里進行緩存。為了盡可能的使用瀏覽器緩存來減少服務(wù)器流量,以及用戶加載速度更快,所以單獨拆分出來進行打包
查看全部 -
hash 指所有的js文件都是一個hash值
chunkhash 指從js中分離出來的類庫與js業(yè)務(wù)邏輯代碼的hash不同
為什么要分離出來呢?高效的利用瀏覽器緩存,如果不分離每次修改業(yè)務(wù)邏輯代碼導(dǎo)致js類庫也會更新一次,效率低
查看全部 -
dev server配置講的很贊,webpack4中設(shè)置devserver之后不走output,dist保存在內(nèi)存中,想生成的話切回生產(chǎn)環(huán)境
查看全部 -
starterkit,best查看全部
-
數(shù)據(jù)在哪聲明就在哪操作數(shù)據(jù),一般都在頂層操作查看全部
-
vue工程的搭建
?npm init
1、npm i webpack vue vue-loader
2、npm i css-loader vue-template-compiler
3、新建src目錄并在src下新建app.vue
4、在app.vue中編寫vue組件
5、在根目錄下新建webpack.config.js
查看全部 -
數(shù)據(jù)聲明要放在頂層vue中查看全部
-
環(huán)境優(yōu)化:
webpack 配置下面
target 設(shè)置webpack運行環(huán)境
安裝 corss-env (避免了不同版本設(shè)置的不童命令)
pack.jon
添加scrpts中對應(yīng)的參數(shù)
build : "corss-env NODE_ENV=production(自己起個名) webpack --config webpack.config.js "
dev "orss-env NODE_ENV=development自己起個名) webpack --config webpack.config.js"
定好變量判斷開發(fā)環(huán)境
下面執(zhí)行環(huán)境中的一些設(shè)定
值為 localhost 內(nèi)網(wǎng)和本機
0.0.0.0 優(yōu)勢,本機、內(nèi)網(wǎng) 、ip、手機
定義通用的環(huán)境變量,讓webpack區(qū)別執(zhí)行開發(fā)得到更多信息,生產(chǎn)環(huán)境更快
查看全部 -
css預(yù)處理器
loader 處理圖片
css loader處理器
查看全部 -
利用loader將小圖片變成js代碼
重新定義文件內(nèi)容
查看全部 -
hot=true可以實現(xiàn)局部刷新查看全部
-
html-web-plugin查看全部
-
小伙伴們,大家好,針對老師的視頻教程,我整理了一份完整的源碼,源碼還有詳細的注釋和筆記,供大家學(xué)習(xí)時參考。
GitHub下載地址:https://github.com/Jasonccj/vue-webpack-todo
查看全部 -
1. 項目初始化 npm init,創(chuàng)建package.json 2. 安裝vue,vue-loader查看全部
舉報