wabpack能夠處理js的相容問題，把 高階的、瀏覽器不識別的語法，轉為 低階的，瀏覽器能識別的語法
命令格式
wabpack .\src\main.js .\dist\bundle.js
webpack 要打包的檔案的路徑 打包好的輸出的檔案的路徑
//通過node中的模組操作，向外暴露了乙個 配置物件
const path =
require
('path'
)//啟動熱更新第2步
const webpack =
require
('webpack'
)module.exports =
}//配置好後可直接使用命令 wabpack 來進行打包
2.安裝完畢後，這個工具的用法和 webpack 命令的用法完全一樣
3.由於是在專案中本地安裝的 webpack-dev-server， 所以，無法把它當做 指令碼命令，在 powershell終端中直接執行（只有那些 安裝到 全域性 -g 的工具，才能在 終端中正常執行）
4.注意： webpack-dev-server 這個工具，如果想要正常執行，要求在本地專案中，必須安裝webpack
cnpm i webpack -d
在 package.json 檔案 「scripts」 物件中新增命令
"dev": "webpack-dev-server"
npm run dev
6.我們可以認為，webpack-dev-server 把打包好的檔案，以一種虛擬的形勢，託管到了專案的根目錄中，雖然看不到，但是可以任務 ，和 dist src node_module 平級，有乙個看不見的檔案 叫做 bundle.js
"scripts"
:
devserver: ,
plugins: [ //配置外掛程式的節點
// 自動在記憶體中根據指定頁面生成乙個 記憶體的頁面
new webpack.hotmodulereplacementplugin() //new乙個熱更新的模組物件，這是啟用熱更新的第3步
]
cnpm i html-webpack-plugin
在 webpack.config.js 中
//匯入在記憶體中生成html 頁面的外掛程式
//只要是外掛程式，都一定要放到 plugins 中
const htmlwebpackplugin =
require
('html-webpack-plugin'
)...
entry:
...,
output:
,plugins:
[// 自動把打包好的 bundle.js 追加到頁面中去
newhtmlwebpackplugin()
]
注意：webpack 預設只能打包處理 js 型別的檔案，無法處理其他非js 型別的檔案
如果要處理非js型別的檔案，我們需要手動安裝一些合適的第三方loader載入器
如果想要打包處理 css 檔案，需要安裝
cnpm i style-loader css-loader -d
開啟 webpack.config.js 這個配置檔案，在裡面新增乙個配置節點，叫做 module，它是乙個物件，在這個module物件上，有乙個 rules 屬性，這個 rules 屬性是個陣列； 這個陣列中存放了所有第三方檔案的匹配和處理規則
import
'./css/imdex.css'
// webpack.config.js
module:
,// 配置處理 css檔案的第三方loader規則
}}
發現這個要處理的檔案不是 js 檔案，然後就去配置檔案中，查詢有沒有對應的第三方 loader 規則
如果能找到對應的規則，就會呼叫對應的 loader 處理這種檔案型別
在呼叫 loader 的時候，是從後往前呼叫的
當最後的乙個 loader 呼叫完畢，會把處理的結果直接交給 webpack 進行打包合併，最終輸出到 bundle.js 中去
module:
//配置處理 .less 檔案的第三方 loader 規則
]}
cnpm i less -d
cnpm i less-loader -d
處理 sass 檔案
cnpm i node-sass -d
cnpm i sass -d
cnpm i sass-loader -d
module:
//配置處理 .sass 檔案的第三方 loader 規則
]}
npm init -y
安裝cnpm i url-loader file-loader -d新建匹配規則
module:
//處理路徑的loader
]// limit 給定的值是的大小，單位是byte，如果引用的大於或等於給定的limit值，則不會被轉為base64格式的字串，如果小於給定的limit值，則會被轉為base64字串
// name 表示的名字，[name]表示為原始檔名字，[ext]表示為原始檔檔案型別,[hash:8]表示8位的hash值（最多32位），防止命名衝突
}
module:
//處理字型檔案的loader
]}
class
person
}let p1 =
newperson()
p1.name =
'ls'
// info是靜態屬性，name是例項屬性
通過 babel 可以幫我們轉換將高階的語法轉化為低階的語法
在 webpack 中，可以執行如下兩套命令，安裝兩套包，去安裝 babel 相關的loader 功能
轉換器cnpm i babel-core babel-loader babel-plugin-transform-runtime -d
翻譯器cnpm i babel-preset-env babel-preset-stage-0 -d
開啟 webpack 的配置檔案，在 module節點下的rules陣列中，新增乙個新的匹配規則：
在專案的根目錄中，新建乙個叫做 .babelrc 的babel配置檔案，這個配置檔案屬於json格式，所以在寫 .babelrc 配置的時候，必須符合json語法規範：不能寫注釋，字串必須引用雙引號
目前安裝的 babel-preset-env是比較新的es語法，在這之前安裝的是 babel-preset-es2015，現在有更新的語法外掛程式 babel-preset-env，它包含了所有和 es *** 相關的語法
在普通網頁中如何使用vue：
使用script標籤，引入vue的包
通過new vue 得到乙個vm的例項
在webpack中使用vue
npm i vue -s
import vue from 『vue』
let vm =
newvue(}
)
注意：在webpack 中，使用 import vue from 『vue』 匯入的vue建構函式，功能不完善，只提供了 runtime-only的方式，並沒有提供像網頁中那樣的使用方式
回顧包的查詢規則
找專案根目錄中有沒有node_modules的資料夾
在 node_modules 中根據包名找對應的 vue 資料夾
在 vue 資料夾中找乙個叫做 package.json 的包配置檔案
在package.json檔案中，查詢乙個main屬性（main屬性指定了這個包在被載入時候的入口檔案）
前端開發筆記
1 移動端控制台 2 頁面布局calc 函式 合理的使用calc函式可以解決一些難纏的頁面布局 比如 自適應布局中空中的字需要超過一定寬度出點點，還不能擠掉後面的 使用固定值和百分比多不合理，這樣就可以使用calc max width calc 100 100px 就是當前div的寬度減去其他部分的...
前端開發筆記
img a,a hover,a visited,a link,a active align center class table responsive style text align center hostth rowspan row host1 style vertical align midd...
前端開發筆記（一）
1 js判斷字串是否為空 var str if str str 2 判斷checkbox是否被選中 js判斷checkbox是否被選中 var c document.getelementbyid protocl if c.checked jquery判斷checkbox是否被選中 3 js定時器se...