nrm工具
nrm的作用：提供一些最常用的NPM包鏡像地址李根，能夠快速地讓我們切換安裝包時(shí)候的服務(wù)器地址。
什么是鏡像：原來(lái)包剛開始就只存在于國(guó)外的NPM服務(wù)器上蜘拉，但是由于網(wǎng)絡(luò)原因寥假，經(jīng)常訪問(wèn)不到，這時(shí)候濒持，我們可以在國(guó)內(nèi)，創(chuàng)建一個(gè)和官網(wǎng)一模一樣的服務(wù)器寺滚，只不過(guò)柑营，數(shù)據(jù)都是從人家那里拿來(lái)的，除此之外村视，使用方式完全一樣：
- 1.運(yùn)行
npm i nrm -g全局安裝nrm包 - 2.使用
nrm ls查看當(dāng)前所有可用的鏡像源地址以及當(dāng)前所使用的鏡像源地址 - 3.使用
nrm use npm或者nrm use taobao切換不同的鏡像源地址
注意:
- nrm只是單純的提供了幾個(gè)常用的下載包的地址官套，方便我們進(jìn)行地址的切換，但是蚁孔，我們每次裝包的工具都是npm
- 我們有時(shí)候會(huì)用npm i cnpm -g裝cnpm包奶赔，這里的cnpm 跟nrm ls 中的cnpm不一樣。我們不能說(shuō)用nrm裝包杠氢，它只是切換地址
- 如果想用cnpm去下載包的話站刑，要先用npm i cnpm -g裝cnpm包，以后就可以用cnpm下載包（cnpm i jquery -save）
webpack
通常在我們的網(wǎng)頁(yè)中會(huì)引用一些靜態(tài)資源鼻百，比如:
- JS
- .js 绞旅，.jsx 质况，.coffee（中間語(yǔ)言），.ts(TypeScript玻靡，這是一種中間語(yǔ)言结榄，可以用他們寫出類似JS的代碼，但是并不能在瀏覽器里邊運(yùn)行囤捻，如果想運(yùn)行則需要一個(gè)編譯器把中間語(yǔ)言編譯成JS語(yǔ)言)
- 沒(méi)事的時(shí)候可以去看看TypeScript臼朗，里邊有一些新特性，它是微軟出的蝎土，和微軟的 類 C#（讀作：C SHARP）語(yǔ)言有點(diǎn)像
- CSS
- .css 视哑，.less， .sass（這是老版的誊涯，新版的后綴名為.scss挡毅，改版的原因是因?yàn)?sass的寫法別扭），.scss
- Images
- .jpg 暴构，.png跪呈，.gif，.bmp取逾，.svg
- 字體文件（Fonts）
- .svg耗绿，.ttf，.eot砾隅，.woff误阻，.woff2
- 模板文件
- .ejs，.jade晴埂，.vue（這是在webpack中定義組件的方式究反，推薦使用）
當(dāng)網(wǎng)頁(yè)中引入的靜態(tài)資源文件很多時(shí)，會(huì)導(dǎo)致：
1.網(wǎng)頁(yè)加載速度變慢儒洛，因?yàn)槲覀円l(fā)起很多的二次請(qǐng)求：一個(gè)網(wǎng)頁(yè)想要展示出來(lái)的話精耐，第一步就是URL欄輸入地址，接下來(lái)晶丘，瀏覽器主動(dòng)向服務(wù)器發(fā)起請(qǐng)求黍氮，拿頁(yè)面唐含，服務(wù)器把html頁(yè)面代碼返回給瀏覽器浅浮，注意這里只有html代碼插爹；接下來(lái)桩引，瀏覽器從上到下解析并渲染html里面的每一個(gè)標(biāo)簽，（比如說(shuō)）當(dāng)解析到script標(biāo)簽奈偏，里面有了src屬性的時(shí)候淮捆，瀏覽器會(huì)根據(jù)src發(fā)起二次請(qǐng)求郁油。本股。。桐腌。直到解析完畢拄显。
2 .要處理錯(cuò)綜復(fù)雜的依賴關(guān)系，例如bootstrap.js依賴jquery.js
如何解決這兩個(gè)問(wèn)題呢案站？
1.對(duì)于問(wèn)題一躬审，對(duì)于JS和CSS可以：合并，壓縮蟆盐；圖片可以精靈圖（合并為一張圖）承边，圖片的Base64編碼（把圖片的src改成Base64編碼，第一個(gè)請(qǐng)求頁(yè)面的時(shí)候跟著一起被下載到客戶端石挂，但適用于小圖片）
- 對(duì)于第二個(gè)問(wèn)題博助，可是使用requireJS，也可以使用webpack解決各個(gè)包之間的復(fù)雜依賴關(guān)系
完美的解決上述兩個(gè)問(wèn)題：
- 1.使用Gulp: Gulp是基于task任務(wù)的痹愚，小巧靈活方便進(jìn)行小型的創(chuàng)建富岳。
- 2.使用webpack: 是基于整個(gè)項(xiàng)目進(jìn)行構(gòu)建的
- 借助于webpack這個(gè)前端自動(dòng)化構(gòu)建工具，可以完美實(shí)現(xiàn)資源的合并拯腮，壓縮城瞎，打包，混淆等諸多功能疾瓮。
- 根據(jù)官網(wǎng)的介紹圖片webpack打包的過(guò)程
- webpack官網(wǎng)
打個(gè)比喻：我們的項(xiàng)目是地球脖镀，那么Gulp就相當(dāng)于珠穆朗瑪峰，能掃視周邊狼电，哪兒需要掃視就建個(gè)task任務(wù)（即珠穆朗瑪峰）蜒灰。Webpack相當(dāng)于衛(wèi)星，能掃視整個(gè)項(xiàng)目肩碟。
什么是webpac
webpack是前端的一個(gè)項(xiàng)目構(gòu)建工具强窖，它是基于Node.js開發(fā)出來(lái)的前端工具
webpack的安裝方式
- 1.運(yùn)行
npm i webpack -g全局安裝webpack，這樣就能在全局使用webpack的命令 - 2.在項(xiàng)目根目錄中運(yùn)行
npm i webpack --save-dev安裝到項(xiàng)目依賴中
使用webpack
實(shí)現(xiàn)一個(gè)案例————斑馬欄削祈。
1.先新建一個(gè)項(xiàng)目
main.js翅溺，是我們項(xiàng)目的入口文件
index.html是我們的首頁(yè)
2.npm init -y初始化項(xiàng)目
-
npm i jquery -s給項(xiàng)目安裝jquery
4.讓頁(yè)面能用上jquery
注意不推薦在<head>標(biāo)簽里面直接引用包或者css文件
<script src="node_modules/jquery/dist/jquery.min.js"></script>//不推薦這樣，因?yàn)檫€是發(fā)起了請(qǐng)求
那怎么辦呢髓抑？把所有的需要的在main.js中引入一下咙崎。
//導(dǎo)入jquery包
//import from 是ES6中導(dǎo)入其他模塊的方式
import $ from "jquery";//導(dǎo)入jquery包，用$接收
$(function(){
$("li:odd").css("backgroundColor","lightblue");
$("li:even").css("backgroundColor",function(){
return "#"+ "D97634";
});
});
5.布局代碼
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<!-- <script src="./node_modules/jquery/dist/jquery.min.js"></script> -->
<script src="./main.js"></script>
</head>
<body>
<div id="app">
<ul>
<li>這是第1個(gè)li</li>
<li>這是第2個(gè)li</li>
<li>這是第3個(gè)li</li>
<li>這是第4個(gè)li</li>
<li>這是第5個(gè)li</li>
<li>這是第6個(gè)li</li>
<li>這是第7個(gè)li</li>
<li>這是第8個(gè)li</li>
<li>這是第9個(gè)li</li>
<li>這是第10個(gè)li</li>
</ul>
</div>
</body>
</html>
原來(lái)岸峙摹褪猛！是因?yàn)镋S6的語(yǔ)法太高級(jí)了，瀏覽器解析不了
6.使用webpack
npm i webpack -D安裝到項(xiàng)目里（也可以安裝到全局里面）
webpack ./src/main.js ./dist/bundle.js將main.js打包成bundle.js
<!-- <script src="./main.js"></script> -->
<script src="../dist/bundle.js"></script>
這樣改過(guò)后羹饰，案例就實(shí)現(xiàn)了伊滋。
但是吧碳却，老師的webpack是3.6版的，我用的是4.x版的笑旺，我用老師的這種方法各種報(bào)錯(cuò)昼浦。emmmmmm，重在理解原理筒主，弄懂內(nèi)涵就OK了??
經(jīng)過(guò)剛才的演示座柱，webpack可以做的事情：
1.webpack能夠處理js文件之間的互相依賴關(guān)系，表示整個(gè)網(wǎng)站頁(yè)面只需要一個(gè)main.js的文件（理想狀態(tài)物舒，真實(shí)開發(fā)不會(huì)這么做）
2.webpack能夠處理 JS的兼容性 色洞，把 不兼容的高級(jí)語(yǔ)法 轉(zhuǎn)換為 低級(jí)的能讓瀏覽器解析的語(yǔ)法。
webpack的配置文件的使用——webpack.config.js
在上面的例子上冠胯，若我們修改了main.js里的jQuery函數(shù)顏色設(shè)置值火诸，頁(yè)面不會(huì)有變化。因?yàn)閕ndex.html引用的是bundle.js荠察，bundle.js此時(shí)并沒(méi)有變化置蜀。此時(shí)，應(yīng)該再打包一次以更新bundle.js里的相關(guān)的值悉盆。就有得寫一次webpack打包的語(yǔ)法盯荤，這有點(diǎn)麻煩，我們可以通過(guò)webpack的配置文件去解決這一問(wèn)題焕盟。
查了查秋秤，可是我無(wú)論怎么改我的webpack都是報(bào)錯(cuò)，我還怎么學(xué)呀脚翘！??????
以下有關(guān)webpack內(nèi)容純記筆記灼卢，沒(méi)法實(shí)操了，webpack弄不好了来农！??
將webpack.config.js寫在根路徑下鞋真。在里邊定義出口，入口沃于，入口指要打包的文件路徑涩咖，出口指打包好的輸出文件的路徑。
// 這個(gè)配置文件繁莹，其實(shí)就是一個(gè) JS 文件檩互，通過(guò)Node中的模塊操作，向外暴露一個(gè)打包的配置對(duì)象
// 因?yàn)?webpack 是基于Node構(gòu)建的蒋困；所以 webpack 支持所有Node API 和語(yǔ)法
// 那些 特性 Node 支持呢盾似？Node是基于Chrome V8引擎實(shí)現(xiàn)的Javascript運(yùn)行環(huán)境敬辣，如果 chrome 瀏覽器支持哪些雪标，則 Node 就支持哪些零院；
const path = require("path");
module.exports = {
entry: path.join(__dirname, "./src/main.js"),//入口，表示要使用 webpack 打包哪個(gè)文件
output: {//輸出文件的相關(guān)配置
path: path.join(__dirname, "./dist"),//指定打包好的文件村刨，輸出到哪個(gè)文件夾下面去
filename: "bundle.js"http://指定輸出文件 的對(duì)應(yīng)名稱
}
}
當(dāng)我們?cè)诳刂婆_(tái)直接輸入webpack執(zhí)行時(shí)告抄，走了以下幾步：
1.當(dāng)webpack發(fā)現(xiàn)我們并沒(méi)有指定入口和出口，就會(huì)去項(xiàng)目根目錄中找配置文件webpack.config.js
2.找到了之后嵌牺，webpack會(huì)去解析并執(zhí)行這個(gè)文件打洼，得到一個(gè)配置對(duì)象
3.當(dāng)webpack拿到配置對(duì)象后，就拿到了配置對(duì)象中指定的入口和出口逆粹，就打包構(gòu)建
webpack-dev-server工具
現(xiàn)在的這個(gè)項(xiàng)目募疮，當(dāng)我們修改顏色后，控制臺(tái)執(zhí)行一下webpack就重新打包一次僻弹，頁(yè)面就會(huì)刷新阿浓。我們項(xiàng)目的代碼經(jīng)常修改，修改一次就得打包一次蹋绽，如此麻煩芭毙。我們可以使用webpack-dev-server解決這一問(wèn)題——監(jiān)聽到代碼改變就自動(dòng)打包。
1.運(yùn)行npm i webpack-dev-server -D把這個(gè)工具下載到項(xiàng)目的本地開發(fā)依賴
2.安裝完畢后卸耘，這個(gè)工具的用法和webpack 命名的用法退敦，完全一樣。
3.由于是在本地（項(xiàng)目）中安裝的蚣抗，所以無(wú)法把它當(dāng)作腳本命名在powershell終端中運(yùn)行侈百，（只有那些安裝到全局（-g）才能在終端中執(zhí)行）
4.我們可以通過(guò)設(shè)置命名來(lái)進(jìn)行項(xiàng)目構(gòu)建
5.這個(gè)工具依賴于webpack，而且要求項(xiàng)目里得先安裝webpack:npm i webpack -D哪怕全局已經(jīng)安裝過(guò)了wabpack
6.<script src="/bundle.js"></script>對(duì)應(yīng)的路徑改為這樣
7.webpack-dev-server幫我們打包生成的bundle.js文件 并沒(méi)有存到實(shí)際的物理磁盤上翰铡；而是设哗，直接托管到了電腦的內(nèi)容中，所以我們?cè)陧?xiàng)目的根目錄中根本找不到這個(gè)打包文件两蟀。我們可以認(rèn)為webpack-dev-server這個(gè)工具把打包好的文件以一種虛擬的形式托管到了項(xiàng)目的根目錄中网梢，雖然我們看不到他，但他與dist赂毯，src平級(jí)战虏。
8.那么他為什么不放到實(shí)際的物理內(nèi)容中去呢？為了速度党涕，這樣更快
webpack-dev-server的命令
第一種方式
注意烦感，每當(dāng)改變了package.json文件時(shí)，需要重啟服務(wù)器膛堤。
package.json
"dev": "webpack-dev-server --open"表示自動(dòng)打開瀏覽器
"dev": "webpack-dev-server --open --port 3000"自動(dòng)打開瀏覽器手趣，端口號(hào)為3000
"dev": "webpack-dev-server --open --port 3000 --contentBase src"……默認(rèn)打卡src路徑（下面有個(gè)Index.html，會(huì)默認(rèn)打開這個(gè)文件）
"dev": "webpack-dev-server --open --port 3000 --contentBase src --hot"……沒(méi)有使用--hot的時(shí)候，每ctrl + s一次就生成了一個(gè)新的bundle.js绿渣，而使用了--hot后朝群，每ctrl + s就更新一下修改的地方。
--hot可以實(shí)現(xiàn)頁(yè)面的不重載
webpack-dev-server配置命令的第2種方式
在"dev"里邊不寫指令中符，移植到webpack.config.js文件中去姜胖。
"dev": "webpack-dev-server"
const path = require("path");
//啟用熱更新的第二步
const webpack = require("webpack");
module.exports = {
entry: path.join(__dirname, "./src/main.js"),//入口，表示要使用 webpack 打包哪個(gè)文件
output: {//輸出文件的相關(guān)配置
path: path.join(__dirname, "./dist"),//指定打包好的文件淀散，輸出到哪個(gè)文件夾下面去
filename: "bundle.js"http://指定輸出文件 的對(duì)應(yīng)名稱
},
devServer:{
//配置dev-server命令參數(shù)
//--open --port 3000 --contentBase src --hot
open: true,//自動(dòng)打開瀏覽器
port:3000,//設(shè)置啟動(dòng)時(shí)候的運(yùn)行端口
contentBase: "src",//指定托管的根目錄
hot:true//啟動(dòng)熱更新的第一步
},
plugins:[//配置插件的的節(jié)點(diǎn)
new webpack.HotModuleReplacementPlugin()//new 一個(gè)熱更新的 模塊對(duì)象右莱，啟用熱更新的第三步
]
}
html-webpack-plugin的兩個(gè)基本作用
現(xiàn)在，我們的bundle.js是在內(nèi)存中的档插，但我們的頁(yè)面index.html是在物理磁盤上的慢蜓，若我們想讓瀏覽器訪問(wèn)的頁(yè)面也在內(nèi)存里，則需要借助html-webpack-plugin郭膛。
另外使用contentBase指令的過(guò)程比較繁瑣胀瞪，需要指定啟動(dòng)的目錄，同時(shí)還需要修改index.html中script標(biāo)簽的src屬性饲鄙，也可使用html-webpack-plugin插件配置啟動(dòng)頁(yè)
面凄诞。
自動(dòng)把打包好的bundle.js文件追加到index.html頁(yè)面中去。
- 1.運(yùn)行
cnpm i html-webpack-plugin --D安裝到開發(fā)依賴 - 2.修改webpack.config.js配置文件如下：
// 導(dǎo)入處理路徑的模塊
var path = require('path');
// 導(dǎo)入自動(dòng)生成HTMl文件的插件
var htmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
entry: path.resolve(__dirname, './src/main.js'), // 項(xiàng)目入口文件
output: { // 配置輸出選項(xiàng)
path: path.resolve(__dirname, './dist'), // 配置輸出的路徑
filename: 'bundle.js' // 配置輸出的文件名
},
plugins:[ // 添加plugins節(jié)點(diǎn)配置插件
new htmlWebpackPlugin({
template:path.resolve(__dirname, './src/index.html'),//模板路徑
filename:'index.html'//自動(dòng)生成的HTML文件的名稱
})
]
}
- 3.修改package.json中script節(jié)點(diǎn)中的dev指令如下：
"dev": "webpack-dev-server" - 4.將index.html中script標(biāo)簽注釋掉忍级，因?yàn)?code>html-webpack-plugin插件會(huì)自動(dòng)把bundle.js注入到index.html頁(yè)面中
webpack打包CSS
webpack打包less
webpack打包sass
power shell終端的命令：cls(清空內(nèi)容)帆谍，全局安裝的依賴包如npm,webpack,cnpm，
