nrm的安裝和使用:
作用：提供了一些最常用的NPM包鏡像地址乏悄，能夠讓我們快速的切換安裝包時(shí)候的服務(wù)器地址弱匪；
什么是鏡像：原來包剛一開始是只存在于國外的NPM服務(wù)器销钝，但是由于網(wǎng)絡(luò)原因赃泡，經(jīng)常訪問不到税灌，這時(shí)候，我們可以在國內(nèi)螟凭，創(chuàng)建一個(gè)和官網(wǎng)完全一樣的NPM服務(wù)器虚青，只不過，數(shù)據(jù)都是從人家那里拿過來的螺男，除此之外棒厘，使用方式完全一樣纵穿；
- 運(yùn)行
npm i nrm -g全局安裝nrm包； - 使用
nrm ls查看當(dāng)前所有可用的鏡像源地址以及當(dāng)前所使用的鏡像源地址奢人； - 使用
nrm use npm或nrm use taobao切換不同的鏡像源地址谓媒；
注意： nrm 只是單純的提供了幾個(gè)常用的 下載包的 URL地址，并能夠讓我們在 這幾個(gè) 地址之間何乎，很方便的進(jìn)行切換句惯，但是，我們每次裝包的時(shí)候支救，使用的 裝包工具宗弯，都是 npm
什么是webpack?
webpack 是前端的一個(gè)項(xiàng)目構(gòu)建工具，它是基于 Node.js 開發(fā)出來的一個(gè)前端工具搂妻；
如何完美實(shí)現(xiàn)上述的2種解決方案
使用Gulp蒙保， 是基于 task 任務(wù)的；
使用Webpack欲主， 是基于整個(gè)項(xiàng)目進(jìn)行構(gòu)建的邓厕；
借助于webpack這個(gè)前端自動化構(gòu)建工具，可以完美實(shí)現(xiàn)資源的合并扁瓢、打包详恼、壓縮、混淆等諸多功能引几。
根據(jù)官網(wǎng)的圖片介紹webpack打包的過程
webpack安裝的兩種方式
- 運(yùn)行
npm i webpack -g全局安裝webpack昧互，這樣就能在全局使用webpack的命令 - 在項(xiàng)目根目錄中運(yùn)行
npm i webpack --save-dev安裝到項(xiàng)目依賴中
初步使用webpack打包構(gòu)建列表隔行變色案例
- 運(yùn)行
npm init初始化項(xiàng)目，使用npm管理項(xiàng)目中的依賴包 - 創(chuàng)建項(xiàng)目基本的目錄結(jié)構(gòu)
- 使用
cnpm i jquery --save安裝jquery類庫 - 創(chuàng)建
main.js并書寫各行變色的代碼邏輯：
// 導(dǎo)入jquery類庫
import $ from 'jquery'
// 設(shè)置偶數(shù)行背景色伟桅，索引從0開始敞掘，0是偶數(shù)
$('#list li:even').css('backgroundColor','lightblue');
// 設(shè)置奇數(shù)行背景色
$('#list li:odd').css('backgroundColor','pink');
- 直接在頁面上引用
main.js會報(bào)錯，因?yàn)闉g覽器不認(rèn)識import這種高級的JS語法楣铁，需要使用webpack進(jìn)行處理玖雁，webpack默認(rèn)會把這種高級的語法轉(zhuǎn)換為低級的瀏覽器能識別的語法； - 運(yùn)行
webpack 入口文件路徑 輸出文件路徑對main.js進(jìn)行處理：
webpack src/js/main.js dist/bundle.js
作用：
- webpack 能夠處理 JS 文件的互相依賴關(guān)系盖腕；
- webpack 能夠處理JS的兼容問題赫冬，把 高級的、瀏覽器不是別的語法溃列，轉(zhuǎn)為 低級的劲厌，瀏覽器能正常識別的語法
格式：
webpack 要打包的文件的路徑 打包好的輸出文件的路徑。
使用webpack的配置文件簡化打包時(shí)候的命令：
- 在項(xiàng)目根目錄中創(chuàng)建
webpack.config.js - 由于運(yùn)行webpack命令的時(shí)候听隐，webpack需要指定入口文件和輸出文件的路徑补鼻，所以，我們需要在
webpack.config.js中配置這兩個(gè)路徑：
// 導(dǎo)入處理路徑的模塊
var path = require('path');
// 導(dǎo)出一個(gè)配置對象，將來webpack在啟動的時(shí)候辽幌，會默認(rèn)來查找webpack.config.js，并讀取這個(gè)文件中導(dǎo)出的配置對象椿访，來進(jìn)行打包處理
module.exports = {
entry: path.resolve(__dirname, 'src/js/main.js'), // 項(xiàng)目入口文件
output: { // 配置輸出選項(xiàng)
path: path.resolve(__dirname, 'dist'), // 配置輸出的路徑
filename: 'bundle.js' // 配置輸出的文件名
}
}
當(dāng)我們在 控制臺乌企，直接輸入 webpack 命令執(zhí)行的時(shí)候，webpack 做了以下幾步：
- 首先成玫，webpack 發(fā)現(xiàn)加酵，我們并沒有通過命令的形式，給它指定入口和出口
- webpack 就會去 項(xiàng)目的 根目錄中哭当，查找一個(gè)叫做
webpack.config.js的配置文件 - 當(dāng)找到配置文件后猪腕，webpack 會去解析執(zhí)行這個(gè) 配置文件，當(dāng)解析執(zhí)行完配置文件后钦勘，就得到了 配置文件中陋葡，導(dǎo)出的配置對象
- 當(dāng) webpack 拿到 配置對象后，就拿到了 配置對象中彻采，指定的 入口 和 出口腐缤，然后進(jìn)行打包構(gòu)建；
webpack-dev-server(2.9.3)的基本使用:
- 由于每次重新修改代碼之后肛响，都需要手動運(yùn)行webpack打包的命令岭粤，比較麻煩，所以使用
webpack-dev-server來實(shí)現(xiàn)代碼實(shí)時(shí)打包編譯特笋，當(dāng)修改代碼之后剃浇，會自動進(jìn)行打包構(gòu)建。 - 運(yùn)行
cnpm i webpack-dev-server --save-dev安裝到開發(fā)依賴 - 安裝完成之后猎物，在命令行直接運(yùn)行
webpack-dev-server來進(jìn)行打包虎囚，發(fā)現(xiàn)報(bào)錯，此時(shí)需要借助于package.json文件中的指令蔫磨，來進(jìn)行運(yùn)行webpack-dev-server命令溜宽，在scripts節(jié)點(diǎn)下新增"dev": "webpack-dev-server"指令，發(fā)現(xiàn)可以進(jìn)行實(shí)時(shí)打包质帅，但是dist目錄下并沒有生成bundle.js文件适揉，這是因?yàn)?code>webpack-dev-server將打包好的文件放在了內(nèi)存中
- 把
bundle.js放在內(nèi)存中的好處是：由于需要實(shí)時(shí)打包編譯，所以放在內(nèi)存中速度會非趁撼停快 - 這個(gè)時(shí)候訪問webpack-dev-server啟動的
http://localhost:8080/網(wǎng)站嫉嘀，發(fā)現(xiàn)是一個(gè)文件夾的面板，需要點(diǎn)擊到src目錄下魄揉，才能打開我們的index首頁剪侮，此時(shí)引用不到bundle.js文件，需要修改index.html中script的src屬性為:<script src="../bundle.js"></script> - 為了能在訪問
http://localhost:8080/的時(shí)候直接訪問到index首頁，可以使用--contentBase src指令來修改dev指令瓣俯，指定啟動的根目錄：
"dev": "webpack-dev-server --contentBase src"
同時(shí)修改index頁面中script的src屬性為`<script src="bundle.js"></script>
image.png
webpack-dev-server的常用命令參數(shù)(在package.json中配置):
image.png
- 由于每次重新修改代碼之后杰标，都需要手動運(yùn)行webpack打包的命令，比較麻煩彩匕，所以使用
webpack-dev-server來實(shí)現(xiàn)代碼實(shí)時(shí)打包編譯腔剂，當(dāng)修改代碼之后，會自動進(jìn)行打包構(gòu)建驼仪。 - 運(yùn)行
cnpm i webpack-dev-server --save-dev安裝到開發(fā)依賴 - 安裝完成之后掸犬，在命令行直接運(yùn)行
webpack-dev-server來進(jìn)行打包，發(fā)現(xiàn)報(bào)錯绪爸，此時(shí)需要借助于package.json文件中的指令湾碎，來進(jìn)行運(yùn)行webpack-dev-server命令，在scripts節(jié)點(diǎn)下新增"dev": "webpack-dev-server"指令奠货，發(fā)現(xiàn)可以進(jìn)行實(shí)時(shí)打包介褥，但是dist目錄下并沒有生成bundle.js文件，這是因?yàn)?code>webpack-dev-server將打包好的文件放在了內(nèi)存中
- 把
bundle.js放在內(nèi)存中的好處是：由于需要實(shí)時(shí)打包編譯递惋，所以放在內(nèi)存中速度會非成胪纾快 - 這個(gè)時(shí)候訪問webpack-dev-server啟動的
http://localhost:8080/網(wǎng)站，發(fā)現(xiàn)是一個(gè)文件夾的面板丹墨，需要點(diǎn)擊到src目錄下廊遍，才能打開我們的index首頁，此時(shí)引用不到bundle.js文件贩挣，需要修改index.html中script的src屬性為:<script src="../bundle.js"></script> - 為了能在訪問
http://localhost:8080/的時(shí)候直接訪問到index首頁喉前，可以使用--contentBase src指令來修改dev指令，指定啟動的根目錄：
"dev": "webpack-dev-server --contentBase src"
同時(shí)修改index頁面中script的src屬性為<script src="bundle.js"></script>
webpack-dev-server配置命令的第2種方式（在webpack.config中配置）:
- 修改
webpack.config.js文件王财，新增devServer節(jié)點(diǎn)如下：
devServer:{
hot:true,
open:true,
port:4321
}
- 在頭部引入
webpack模塊：
var webpack = require('webpack');
- 在
plugins節(jié)點(diǎn)下新增：
new webpack.HotModuleReplacementPlugin()
html-webpack-plugin的兩個(gè)基本作用：
這個(gè)插件的兩個(gè)作用：
- 自動在內(nèi)存中根據(jù)指定頁面生成一個(gè)內(nèi)存的頁面
- 自動卵迂，把打包好的 bundle.js 追加到頁面中去
- 運(yùn)行
cnpm i html-webpack-plugin --save-dev安裝到開發(fā)依賴 - 修改
webpack.config.js配置文件如下：
// 導(dǎo)入處理路徑的模塊
var path = require('path');
// 導(dǎo)入自動生成HTMl文件的插件
var htmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
entry: path.resolve(__dirname, 'src/js/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'//自動生成的HTML文件的名稱
})
]
}
- 修改
package.json中script節(jié)點(diǎn)中的dev指令如下：
"dev": "webpack-dev-server"
- 將index.html中script標(biāo)簽注釋掉，因?yàn)?code>html-webpack-plugin插件會自動把bundle.js注入到index.html頁面中绒净！
loader-配置處理css樣式表的第三方loader:
注意： webpack, 默認(rèn)只能打包處理 JS 類型的文件见咒，無法處理 其它的非 JS 類型的文件；
如果要處理 非JS類型的文件挂疆，我們需要手動安裝一些 合適 第三方 loader 加載器改览；
- 如果想要打包處理 css 文件，需要安裝
npm i style-loader css-loader -D - 打開 webpack.config.js 這個(gè)配置文件缤言，在 里面宝当，新增一個(gè) 配置節(jié)點(diǎn)，叫做 module, 它是一個(gè)對象胆萧；在 這個(gè) module 對象身上庆揩，有個(gè) rules 屬性，這個(gè) rules 屬性是個(gè) 數(shù)組；這個(gè)數(shù)組中订晌，存放了虏辫，所有第三方文件的 匹配和 處理規(guī)則；
打包c(diǎn)ss文件:
- 運(yùn)行
cnpm i style-loader css-loader --save-dev - 修改
webpack.config.js這個(gè)配置文件：
module: { // 用來配置第三方loader模塊的
rules: [ // 文件的匹配規(guī)則
{ test: /\.css$/, use: ['style-loader', 'css-loader'] }//處理css文件的規(guī)則
]
}
. 注意：use表示使用哪些模塊來處理test所匹配到的文件锈拨；use中相關(guān)loader模塊的調(diào)用順序是從后向前調(diào)用的砌庄；
處理的過程：
注意： webpack 處理第三方文件類型的過程：
- 發(fā)現(xiàn)這個(gè) 要處理的文件不是JS文件，然后就去 配置文件中推励，查找有沒有對應(yīng)的第三方 loader 規(guī)則
- 如果能找到對應(yīng)的規(guī)則鹤耍， 就會調(diào)用 對應(yīng)的 loader 處理 這種文件類型肉迫；
- 在調(diào)用loader 的時(shí)候验辞，是從后往前調(diào)用的；
- 當(dāng)最后的一個(gè) loader 調(diào)用完畢喊衫，會把 處理的結(jié)果跌造，直接交給 webpack 進(jìn)行 打包合并，最終輸出到 bundle.js 中去
使用webpack打包less文件
- 運(yùn)行
cnpm i less-loader less -D - 修改
webpack.config.js這個(gè)配置文件：
{ test: /\.less$/, use: ['style-loader', 'css-loader', 'less-loader'] },
使用webpack打包sass文件
- 運(yùn)行
cnpm i sass-loader node-sass --save-dev - 在
webpack.config.js中添加處理sass文件的loader模塊：
{ test: /\.scss$/, use: ['style-loader', 'css-loader', 'sass-loader'] }
使用webpack處理css中的路徑:
- 運(yùn)行
cnpm i url-loader file-loader --save-dev - 在
webpack.config.js中添加處理url路徑的loader模塊：
{ test: /\.(png|jpg|gif)$/, use: 'url-loader' }
- 可以通過
limit指定進(jìn)行base64編碼的圖片大凶骞骸壳贪；只有小于指定字節(jié)（byte）的圖片才會進(jìn)行base64編碼：
{ test: /\.(png|jpg|gif)$/, use: 'url-loader?limit=43960' },
使用babel處理高級JS語法:
- 運(yùn)行
cnpm i babel-core babel-loader babel-plugin-transform-runtime --save-dev安裝babel的相關(guān)loader包 - 運(yùn)行
cnpm i babel-preset-es2015 babel-preset-stage-0 --save-dev安裝babel轉(zhuǎn)換的語法 - 在
webpack.config.js中添加相關(guān)loader模塊，其中需要注意的是寝杖，一定要把node_modules文件夾添加到排除項(xiàng)：
{ test: /\.js$/, use: 'babel-loader', exclude: /node_modules/ }
- 在項(xiàng)目根目錄中添加
.babelrc文件违施，并修改這個(gè)配置文件如下：
{
"presets":["es2015", "stage-0"],
"plugins":["transform-runtime"]
}
- 注意：語法插件
babel-preset-es2015可以更新為babel-preset-env，它包含了所有的ES相關(guān)的語法瑟幕；
