1.網頁中引入的靜態資源多了以后有什么問題
(1).網絡加載速度慢，因為我們要發起很多的二次請求
(2).要處理錯綜復雜的依賴關系?
2. webpack最基本的使用方式
main.js是我們項目的JS入口文件
(1).導入jquery
//import***from***是ES6中導入模塊的方式
//由于ES6的代碼太高級了，瀏覽器解析不了，所以，這一行執行會報錯
import $ from 'jquery'
//使用webpack可以解決，在命令行輸出webpack 你要處理的文件相對路徑 你要生成的文件的相對路徑
例如：webpack ./main.js ./dist/bundle.js
//const $ = requery('jquery')
$(function(){
$('li:odd').css('backgroundColor','lightblue')
$('li:even').css('backgroundColor',function(){
return '#'+'D97634'
})
})
//經過剛才的案例，webpack可以做哪些事情
(1).webpack能夠處理js文件的互相依賴關系
(2).webpack能夠處理js的兼容問題，把高級的、瀏覽器不識別的語法，轉為低級的，瀏覽器能正常識別的語法
3. webpack.config.js
const path = require('path')
//這個配置文件，其實就是一個js文件，通過Node中的模塊操作，向外暴露了一個配置對象
module.exports={
//在配置文件中，需要手動指定入口和出口
entry:path.join(_dirname,'./src/main.js'),
//入口，表示要使用webpack打包哪個文件
output:{
//輸出文件的相關配置
path:path.join(_dirname,'./dist'),
//指定打包好的文件，輸出到哪個目錄中去
filename:'bundle.js'
//這是指定輸出文件的名稱
}
}
//當我們在控制臺，直接輸入webpack命令執行的時候，webpack做了以下幾步
(1).首先，webpack發現，我們并沒有通過命令的形式，給他指定入口和出口
(2).webpack就會去項目的根目錄中查找一個叫做webpack.config.js的配置文件
(3).當找到配置文件后webpack會去解析執行這個配置文件，當解析執行完配置文件后，就得到了配置文件中，導出的配置對象
(4).當webpack拿到配置對象后，就拿到了配置對象中，指定的入口和出口，然后進行打包構建
4.webpack-dev-server的基本使用
在package.json中
"scripts":{
//加一行
"dev":"webpack-dev-server"
}
(1).運行npm i webpack-dev-server -D把這個工具安裝到項目本地開發依賴
(2).安裝完畢后，這個工具的用法和webpack的用法，完全一樣
(3)由于，我們是在項目中，本地安裝的webpack-dev-server，所以無法把它當做腳本命令，在powershell終端中直接運行；(只有那些安裝到全局-g的工具，才能在終端中正常執行)
(4).注意：webpack-dev-server這個工具，如果想要正常運行，要求，在本地項目中，必須安裝webpack
(5).webpack-dev-server幫我們打包生成的bundle.js文件，并沒有存放到實際的物理磁盤上；而是，直接托管到了電腦內存中，所以，我們在項目根目錄中，根本找不到這個打包好的bundle.js
(6).我們可以認為，webpack-dev-server把打包好的文件，以一種虛擬的形式，托管到了咱們的項目的根目錄中，雖然我們看不到它，但是，可以認為，和dist src node_modules平級，有一個看不見的文件，叫做bundle.js
5.webpack-dev-server的常用命令參數
在package.json中
"scripts":{
//加一行
//--open自動打開瀏覽器
//--port自動設置端口
//--conteneBase以什么為根路徑
//--hot熱重載
"dev":"webpack-dev-server --open --port 3000 --conteneBase src --hot"
}
6.webpack-dev-server配置命令的第二種方式
在webpack.config.js中
//啟用熱更新的第二步
const webpack = require('webpack')
module.exports ={
devSever:{
//這是配置webpack-dev-server命令參數的第二種形式，相對來說，這種方式麻煩一些
open:true,//自動打開瀏覽器
port:3000,//設置啟動時候的運行端口
contentBase:'src'//指定托管的根目錄
hot:'true'//啟用熱更新的第一步
}
plugins:[//配置插件的節點
new webpack.HotModuleReplacementPlugin()//new一個熱更新的模塊對象，這是啟用熱更新的第三步
]
}
7.html-webpack-plugin的兩個基本作用
//在內存中根據index模板頁面，生成一個內存中的頁面
//這個插件的兩個作用
(1).自動在內存中根據指定頁面生成一個內存頁面
(2).自動把打包好的bundle.js追加到頁面中去
安裝：npm i html-webpack-plugin -D
在webpack.config.js中
//導入在內存中生成的HTML頁面插件
//只要是插件，都一定要放到plugins節點中去
plugins:[//配置插件的節點
new htmlWebpackPlugin({
//創建一個在內存中生成HTML頁面的插件
template:path.join(_dirname,"./src/index.html"),//指定模板頁面，將來會根據指定的頁面路徑，去生成內存中的頁面
filename:'index.html'//指定生成的頁面名稱
})
]
//當使用html-webpack-plugin之后，我們不再需要手動處理bundle.js的引用路徑，因為這個插件已經幫我們自動創建了一個合適的script標簽，并且引用了正確的路徑
8.loader-配置處理css樣式表的第三方loader
css會發起二次請求，不推薦直接引用
在main.js中
//使用import語法導入css樣式
import './css/index.css'
//注意:webpack默認只能打包處理js類型的文件，無法處理其他的非js類型的文件
//如果要處理非js類型的文件，我們需要手動安裝一些合適第三方loader加載器；
(1).如果想要打包處理css文件，需要安裝cnpm i style-loader css-loader -D
(2).打開webpack.config.js這個配置文件，在里面新增一個配置節點，叫做module，他是一個對象，在這個module對象身上，，有個rules屬性，這個rules屬性是個數組，這個數組中，存放了，所有第三方文件的匹配和處理規則
//和plugins平級
module:{
//這個節點用于配置所有的第三方模塊加載器
rules:[
//所有第三方模塊的匹配規則
{ test: /\.css$/,use:['style-loader','css-loader']? }//配置處理.css文件的第三方loader規則
}
9.loader-分析webpack調用第三方loader的過程
//注意：webpack處理第三方文件類型的過程；
(1).發現這個要處理的文件不是js文件，然后就去配置文件中，查找有沒有對應第三方loader規則
(2).如果能找到對應的規則，就會調用對應的loader處理這種文件類型；
(3).在調用loader的時候，是從后往前調用的；
(4).當最后的一個loader調用完畢，會把處理的結果，直接交給webpack進行打包合并，最終輸出到bundle.js中去
10.loader-配置處理less文件的loader
在main.js中
//使用import語法導入less樣式
import './css/index.less'
運行 cnpm i less-loader -D
配置規則
在webpack.config.js
module:{
rules:[
{ test: /\.less$/,use:['style-loader','css-loader','less-loader']}//配置處理.less文件的第三方loader規則
}
11.loader-配置處理scss文件的loader
在main.js中
//使用import語法導入less樣式
import './css/index.scss'
運行?cnpm i scss-loader -D
配置規則
在webpack.config.js
module:{
rules:[
{ test: /\.scss$/,use:['style-loader','css-loader','scss-loader']}//配置處理.scss文件的第三方loader規則
}
12. 為什么要使用npm init初始化項目
在node開發中使用npm init會生成一個pakeage.json文件，這個文件主要是用來記錄這個項目的詳細信息的，它會將我們在項目開發中所要用到的包，以及項目的詳細信息等記錄在這個項目中。方便在以后的版本迭代和項目移植的時候會更加的方便。也是防止在后期的項目維護中誤刪除了一個包導致的項目不能夠正常運行。使用npm init初始化項目還有一個好處就是在進行項目傳遞的時候不需要將項目依賴包一起發送給對方，對方在接受到你的項目之后再執行npm install就可以將項目依賴全部下載到項目里。、
13.webpack中url-loader的使用
//默認情況下，webpack無法處理css文件中的url地址，不管是圖片還是字體庫，只要是URL地址，都處理不了
cnpm i url-loader file-loader -D
module:{
rules:[
{ test: /\.(jpg|png|gif|bmp|jpeg)$/,use:'url-loader?limit=7631&name=[hash:8]-[name].[ext]'}//處理圖片路徑的loader
//limit給定的值，是圖片的大小，單位是byte字節，如果我們引用的圖片，大于或者等于給定的limit值，則不會被轉為base64格式的字符串，如果小于給定的limit值，則會被轉為base64格式的字符串
//name設置圖片為原名稱，加hash值是為了防止兩張相同名稱的圖片覆蓋
}
]}
14.webpack中使用url-loader處理字體文件
在main.js中
//如果要通過路徑的形式，去引入node_modules中相關的文件，可以直接省略路徑前面的node_modules這一層目錄，直接寫包的名稱，然后后面跟上具體的文件路徑
import 'bootstrap/dist/css/bootstrap.css'
module:{
rules:[
{ test :/\.(tff|eot|svg|woff|woff2)$/,use:'url-loader'}//處理字體文件的loader
}
]}
15.關于webpack和npm中幾個問題的說明
(1).json里不能寫注釋
(2).npm install
16.webpack中babel的配置
在main.js
//class關鍵字，是ES6中提供的新語法，是用來實現ES6中面向對象的編程方式
class Person{
//使用static關鍵字，可以定義靜態屬性
//所謂靜態屬性，就是可以直接通過類名，直接訪問的屬性
//實例屬性：只能通過類的實例，來訪問的屬性，叫做實例屬性
static info = {name:"zs",age:20}
}
var p1 = new Person()
訪問Person類身上的info靜態屬性
console.log(Person.info)
//在webpack中，默認只能處理一部分ES6語法，一些更高級的ES6或者ES7語法，webpack是處理不了的，這時候就需要借助于第三方的loader，來幫助webpack處理這些更高級的語法，當第三方loader吧高級語法轉為低級語法之后，會把結果交給webpack去打包到bundle.js中
//通過Babel，可以幫我們將高級的語法轉換為低級的語法
//(1).在webpack中，可以運行如下兩套命令，安裝兩套包去安裝Babel相關的loader功能
//第一套包 cnpm i babel-core babel-loader babel-plugin-transform-runtime -D
//第二套包 cnpm i babel-present-env babel-preset-stage-0 -D
//(2).打開webpack的配置文件(webpack.config.js)，在module節點下的rules數組中，添加一個新的匹配規則；{ test:/\.js$/,use:'babel-loader',exclude:/node_modules/}
//注意：在配置babel的loader規則的時候，必須把node_modules目錄，通過exclude選項排除掉，原因有兩個
如果不排除node_modules，則babel會把node_modules中所有的第三方js文件，都打包編譯，這樣，會非常消耗CPU，同時，打包速度非常慢
哪怕最終，Babel把所有node_modules中的JS轉換完了，但是項目也無法正常運行
//(3).在項目的根目錄中，新建一個叫做.babelrc的Babel配置文件，這個配置文件，屬于JSON格式，所以在寫.babelrc配置的時候，必須符合Json語法規范：不能寫注釋，字符串必須用雙引號
在.babelrc寫如下的配置：preset翻譯成【語法】的意思
//(4).了解：目前，我們安裝的babel-persent-env，是比較新的ES語法，之前，我們安裝的是babel-persent-es2015，現在，出現了一個更新的語法解釋，叫做babel-persent-env，它包含了所有的和es相關的語法
{
"presets":["env","stage-0"],
"plugins":["transform-runtime"]
}
function Animal(name){
this.name=name;
}
Animal.info = 123
var a1 = new Animal('小花')
//這是靜態屬性：
console.log(Animal.info)
//這是實例屬性
console.log(a1.name)
