webpack是什么呢询刹？
- 模塊打包機，分析目錄結(jié)構(gòu)势似，找到j(luò)s模塊（包括瀏覽器不能識別的代碼typscript sass...）,打包成合適的格式供瀏覽器訪問新娜。
- 模塊打包 構(gòu)建（項目）
打包的優(yōu)勢（webpack的優(yōu)勢）
- 1、模塊化慧耍，拆分了業(yè)務(wù)復(fù)雜的js代碼 => 細小的文件
- 2身辨、js拓展 => 基于原型面向?qū)ο?=> 基于class（typscript es6）=> 瀏覽器識別
面試會問到
- webpack grunt gulp 這三者的區(qū)別：grunt、gulp優(yōu)化流程的工具芍碧，webpack是模塊化支持的工具煌珊，具有優(yōu)化流程的功能。
webpack的工作原理
- 他有個js的主入口文件泌豆，主入口文件里面有很多相關(guān)的文件定庵。打包的時候就從主入口文件進入，按照包含路徑一直找下去踪危，最后全部打包成一個js文件（
bundle.js）這個js文件就是供瀏覽器識別的文件蔬浙。
webpack安裝：
- 先安裝nodejs環(huán)境（一直點next，檢測是否安裝好贞远，輸入
npm命令會有版本相關(guān)內(nèi)容） - 初始化項目：
npm init(會有一個package.json文件畴博，這個文件里面有很多初始化信息如下圖)package.json - 安裝webpack：
npm install webpack --save-dev - 打包：
webpack 要打包的文件名 打包以后的文件名
多個js的引入
-
require("./js文件名")在一個js文件的頭部
css打包
- 對于外來文件（不支持的文件） => loader插件（支持文件打包的工具）
- css-loader (加載css文件)
- style-loader (支持css運行)
- 安裝：
npm install css-loader style-loader --save-dev - 引入css文件：
require("style-loader!css-loader!./css文件")
注意：在項目中，追加了文件（修改了代碼）蓝仲，都需要重新打包
常用打包參數(shù)：
- webpack 要打包的文件名 打包以后的文件名 --參數(shù)名 --參數(shù)名 ...
-
--watch自動更新 -
--progress顯示打包進度 -
--display-modules列出打包模塊 -
--display-reasons打包原因 -
--config 新配置文件名修改webpack默認的配置文件 -
-p壓縮混淆腳本 -
ctrl+c終止前一個命令
構(gòu)件項目的詳細事項
- 1俱病、新建項目文件夾
- 2、
npm init初始化項目 - 3袱结、
npm install webpack --save-dev安裝webpack - 4亮隙、構(gòu)建項目文件目錄：
-
src源文件夾 -
dist打包后文件夾 -
webpack.config.jswebpack默認的配置文件如下
-
module.exports = {
entry:"./src/script/main.js", //輸入路徑
output:{
path:"E:\\HBuilder\\webtest\\dist\\js\\", //輸出路徑(widows下需要絕對路徑是雙斜杠轉(zhuǎn)義,蘋果和lunix不需要轉(zhuǎn)義直接./路徑的寫法)
filename:"bundle.js" // 輸出文件名
}
}
/*
還可以這種寫法
var paths = require("path");path是node自帶模塊，路徑
module.exports = {
entry:"./src/script/main.js",
output:{
path:paths.join(__dirname,"dist","js"),
filename:"bundle.js"
}
}
*/
- 在package.json文件里面配置webpack擎勘，可以用
npm run來啟動(在這個版本里必須要安裝webpack-cli才能跑起來)
"scripts": {
"bulid": "webpack"
}
- entry 三種調(diào)用形式：
-
entry: "./src/script/main.js"單入口文件 -
entry:["文件路徑","文件路徑"...]多入口文件 數(shù)組 -
entry:{path:"url路徑"咱揍，path:[]}混合模式（不常用）
-
混合模式避免打包后的文件重名：webpack提供的命名方式[name] - [chunkhash] 名稱加哈希值
//數(shù)組多入口文件寫法
var paths = require("path");
module.exports = {
entry:["./src/script/main.js","./src/script/a.js"],
output:{
path:paths.join(__dirname,"dist","js"),
filename:"bundle.js"
}
}
html-webpack-plugin插件
- 每次文件名稱都不同，引用src文件名稱不確定棚饵，正確引用就用到插件
- html-webpack-plugin：安裝命令
npm install html-webpack-plugin --save-dev - 使用：在webpack.config.js文件引入
var htmlPlugin = require("html-webpack-plugin")煤裙，在下面新建對象new htmlPlugin如下掩完，跑起來過后打包后的文件里面多了個index.html文件
var htmlPlugin = require("html-webpack-plugin") ;
var paths = require("path");
module.exports = {
entry:["./src/script/main.js","./src/script/a.js"],
output:{
path:paths.join(__dirname,"dist","js"),
filename:"bundle.js"
},
plugins:[
new htmlPlugin({
template:"index.html" //這里是讓根目錄的index文件映射到打包后錄下的index里面
});
]
}
loader：程序中資源文件進行轉(zhuǎn)換，是nodejs中的函數(shù)硼砰，可以將資源作為參數(shù)來使用并且返回新的資源
- 作用：轉(zhuǎn)化es6且蓬、處理less sass 圖片 其他文件元素...
- 安裝命令：
npm install --save-dev babel-loader babel-core - 上一步安裝完了再安裝最新的：
npm install --save-dev babel-preset-latest
var htmlPlugin = require("html-webpack-plugin") ;
var paths = require("path");
module.exports = {
entry:["./src/script/main.js","./src/script/a.js"],
output:{
path:paths.join(__dirname,"dist","js"),
filename:"bundle.js"
},
loaders:[
{
test:/\.js$/, //以js結(jié)尾的文件
loader:"babel-loader", //用babel-loader處理 es6語法
exclude:path.resolve(__dirname,"node_modules"), //處理node_modules的內(nèi)容（已經(jīng)處理過的文件就不再處理）
include:path.resolve(__dirname,"src") //打包的范圍（src文件夾里面的內(nèi)容需要打包）
query:{
presets:["latest"] //最新的babel來處理
}
}
]
plugins:[
new htmlPlugin({
filename:"index.html", //文件名
template:"index.html" , //這里是讓根目錄的index文件映射到打包后錄下的index里面
inject:"body" //打包后的js文件添加在哪里，也可以不加默認在body里面也可以修改到其他地方
});
]
}
css如何處理
- 下載css處理插件：
npm install style-loader css-loader --save-dev - 然后在配置文件里面添加參數(shù)如下题翰，在主文件引入css文件
var htmlPlugin = require("html-webpack-plugin") ;
var paths = require("path");
module.exports = {
entry:["./src/script/main.js","./src/script/a.js"],
output:{
path:paths.join(__dirname,"dist","js"),
filename:"bundle.js"
},
loaders:[
{
test:/\.js$/, //以js結(jié)尾的文件
loader:"babel-loader", //用babel-loader處理 es6語法
exclude:path.resolve(__dirname,"node_modules"), //處理node_modules的內(nèi)容（已經(jīng)處理過的文件就不再處理）
include:path.resolve(__dirname,"src") //打包的范圍（src文件夾里面的內(nèi)容需要打包）
query:{
presets:["latest"] //最新的babel來處理
}
},
{
test:/\.css$/, //以css結(jié)尾的文件
loader:"style-loader!css-loader"
}
]
plugins:[
new htmlPlugin({
filename:"index.html", //文件名
template:"index.html" , //這里是讓根目錄的index文件映射到打包后錄下的index里面
inject:"body" //打包后的js文件添加在哪里恶阴，也可以不加默認在body里面也可以修改到其他地方
});
]
}
- 處理less sass 下載命令：
npm install less-loader(或sass-loader) --save-dev - 在配置文件里面添加下loader
//less
{
test:/\.less$/, //以less結(jié)尾的文件
loader:"style-loader!css-loader!less-loader"
}
sass
{
test:/\.sass$/, //以sass結(jié)尾的文件
loader:"style-loader!css-loader!sass-loader"
}
html如何處理
- 下載html-loader插件命令：
npm install html-loader --save-dev - 在配置文件里添加loader，然后在模板里面修改
import tpl from "html文件路徑" - 在根目錄下的index.html里留個放模板id=app的地方豹障，然后在app.js里面創(chuàng)建變量獲取到模板的dom冯事，然后把要添加的html頁面放入進去就好了。
var htmlPlugin = require("html-webpack-plugin") ;
var paths = require("path");
module.exports = {
entry:["./src/script/main.js","./src/script/a.js"],
output:{
path:paths.join(__dirname,"dist","js"),
filename:"bundle.js"
},
module:{
loaders:[
{
test:/\.js$/, //以js結(jié)尾的文件
loader:"babel-loader", //用babel-loader處理 es6語法
exclude:path.resolve(__dirname,"node_modules"), //處理node_modules的內(nèi)容（已經(jīng)處理過的文件就不再處理）
include:path.resolve(__dirname,"src") //打包的范圍（src文件夾里面的內(nèi)容需要打包）
query:{
presets:["latest"] //最新的babel來處理
}
},
{
test:/\.css$/, //以css結(jié)尾的文件
loader:"style-loader!css-loader"
},
{
test:/\.html$/, //以html結(jié)尾的文件
loader:"html-loader"
}
]
},
plugins:[
new htmlPlugin({
filename:"index.html", //文件名
template:"index.html" , //這里是讓根目錄的index文件映射到打包后錄下的index里面
inject:"body" //打包后的js文件添加在哪里血公，也可以不加默認在body里面也可以修改到其他地方
});
]
}
//模板文件里處理
import tpl from "./layer.html";
function(){
return{
name:"張三"昵仅，
tpl:tpl
}
}
export default layer;
//在根目錄index.html下留下模板位置
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>index</title>
</head>
<body>
<div id="app">
</div>
</body>
</html>
圖片處理
- 圖片常用格式
jpg gif png，要處理css中的圖片和html img標(biāo)簽里面的圖片 - 下載圖片文件處理命令：
npm install file-loader --save-dev
var htmlPlugin = require("html-webpack-plugin") ;
var paths = require("path");
module.exports = {
entry:["./src/script/main.js","./src/script/a.js"],
output:{
path:paths.join(__dirname,"dist","js"),
filename:"bundle.js"
},
loaders:[
{
test:/\.js$/, //以js結(jié)尾的文件
loader:"babel-loader", //用babel-loader處理 es6語法
exclude:path.resolve(__dirname,"node_modules"), //處理node_modules的內(nèi)容（已經(jīng)處理過的文件就不再處理）
include:path.resolve(__dirname,"src") //打包的范圍（src文件夾里面的內(nèi)容需要打包）
query:{
presets:["latest"] //最新的babel來處理
}
},
{
test:/\.css$/, //以css結(jié)尾的文件
loader:"style-loader!css-loader"
},
{
test:/\.html$/, //以html結(jié)尾的文件
loader:"html-loader"
}
{
test:/\.(jpg | gif | png)$/, //以ipg || gif || png結(jié)尾的文件
loader:"file-loader"
}
]
plugins:[
new htmlPlugin({
filename:"index.html", //文件名
template:"index.html" , //這里是讓根目錄的index文件映射到打包后錄下的index里面
inject:"body" //打包后的js文件添加在哪里累魔，也可以不加默認在body里面也可以修改到其他地方
});
]
}
import layer from "文件路徑" 從layer文件夾里面導(dǎo)入layer.js到本文件里面(es6語法)
export default layer 導(dǎo)出函數(shù)layer
@import "css文件路徑" css文件里面導(dǎo)入css文件的寫法
npm 命令
-
npm list --depth=0 -global查看全局下載的所有包 -
npm uninstall -g [包名]卸載安裝包
搭建一個完整項目的步驟
- 1摔笤、新建項目文件
- 2、
npm initnpm初始化（就會生成一個package.js文件） - 3垦写、
npm install webpack webpack-cli --save-dev安裝webpack和webpack-cli 因為我這里安裝的是版本4.28.3所以必須安裝-cli（這時多了node_modules文件夾是nodejs的配置內(nèi)容吕世，還會生成package-lock.json這個文件是綁定package.json依賴。這兩個都是默認的不用管） - 4梯投、創(chuàng)建項目文件夾目錄命辖。webpack.config.js里面是webpack的配置設(shè)置，src里面是放被打包文件晚伙，components里面放layer里面放模板文件吮龄，app.js為主入口文件，dist里面放打包后文件
- 5咆疗、下載一個項目的所有插件也就是上面提到的所有。html-webpack-plugin插件母债、loader資源器午磁、style-loader css-loader樣式處理、html-loader頁面處理毡们、file-loader文件圖片處理
- 6迅皇、配置package.json文件，在
scripts自定義里面配置啟動webpack用命令npm run [自定義名]衙熔，我這里配置的時候后面還加了個參數(shù)自動更新可以添加多個 - 7登颓、配置webpack.config.js文件，基本的包括入口红氯，出口框咙，插件的配置
//webpack.config.js里面的內(nèi)容
var htmlPlugin = require("html-webpack-plugin");//引入html-webpack-plugin插件咕痛，讓根目錄index.html頁面映射到dist里面去
var path = require("path");//這是nodejs自身的path函數(shù)，獲取到準(zhǔn)確的路徑
module.exports = {
entry:"./src/app.js",//入口主文件
output:{
path:path.join(__dirname,"dist"),//打包到哪個文件的路徑(windows是用絕對路徑喇嘱，lunix和蘋果是相對路徑)
filename:"bundle.js"http://打包過后的文件名
},
module:{
loaders:[
{
test:/\.js$/,//正則：以js結(jié)尾的文件
loader:"babel-loader",//用babel-loader處理 es6語法
exclude:path.resolve(__dirname,"node_modules"), //處理node_modules的內(nèi)容（已經(jīng)處理過的文件就不再處理）
include:path.resolve(__dirname,"src"), //打包的范圍 （src文件夾里面的內(nèi)容需要打包）
query:{ //執(zhí)行過程
presets:["latest"]//最新的babel來處理
}
},
{
test:/\.css$/, //正則：以css結(jié)尾的文件
loader:"style-loader!css-loader" //用style-loader css-loader處理
},
{
test:/\.html$/, //正則：以html結(jié)尾的文件
loader:"html-loader" //用html-loader處理
},
{
test:/\.(jpg|gif|png)$/, //正則：以jpg || gif || png結(jié)尾的文件
loader:"file-loader" //用file-loader處理
}
]
},
plugins:[
new htmlPlugin({
filename:"index.html", //文件名
template:"index.html", //使用html-webpack-plugin插件的語法茉贡，讓根目錄index映射到dist里面
inject:"body" //打包后的js文件添加在哪里，可以不加這句話默認是在body里面也可修改到其他地方
})
]
}
