Webpack是什么
Webpack是一種前端資源構(gòu)建工具墓造，一個靜態(tài)模塊打包器（module bundler）昆箕。在Webpack看來晰韵，前端的所有資源文件（js/json/css/img/less/...）都會作為模塊處理惹挟。它將根據(jù)模塊的依賴關(guān)系進(jìn)行靜態(tài)分析，打包生成對應(yīng)的靜態(tài)資源（bundle）气筋。
在這里插入圖片描述
Webpack 五個核心概念
Entry
入口（Entry）指示W(wǎng)ebpack以哪個文件為入口起點(diǎn)開始打包拆内，分析構(gòu)建內(nèi)部依賴圖。
Output
輸出（Output）指示W(wǎng)ebpack打包后的資源bundles輸出到哪里去宠默，以及如何命名麸恍。
Loader
Loader讓W(xué)ebpack能夠去處理那些非JavaScript文件（Webpack自身只能理解JavaScript）。
Plugins
插件（Plugins）可以用于執(zhí)行范圍更廣的任務(wù)搀矫。插件的范圍包括抹沪，從打包優(yōu)化和壓縮，一直到重新定義環(huán)境中的變量等瓤球。
Mode
模式（Mode）指示W(wǎng)ebpack使用相應(yīng)模式的配置融欧。
在這里插入圖片描述
Webpack初試
- 新建pacakge.json文件
npm init - 安裝webpack和webpack-cli
npm install webpack webpack-cli -D
-S
即--save（保存）
包名會被注冊在package.json的dependencies里面，在生產(chǎn)環(huán)境下這個包的依賴依然存在
-D
即--dev（生產(chǎn)）
包名會被注冊在package.json的devDependencies里面卦羡，僅在開發(fā)環(huán)境下存在的包用-D噪馏，如babel，sass-loader這些解析器
- 通過webpack打包文件
/*index.js文件*/
import data from './data.json';
console.log(data);
function add(x,y) {
return x + y;
}
console.log(add(1,2));
/*data.json文件*/
{
"name": "Cecilia",
"age": 20
}
在控制臺輸入（二者其一）：
webpack ./src/index.js -o ./build/built.js --mode=development
webpack ./src/index.js -o ./build/built.js --mode=production
控制臺將打雍绮琛：
{ name: 'Cecilia', age: 20 }
3
index.js: webpack入口起點(diǎn)文件
1.運(yùn)行指令：
開發(fā)環(huán)境：webpack ./src/index.js -o ./build/built.js --mode=development
webpack會以./src/index.js為入口文件開始打包逝薪，打包后輸出到./build/built.js
整體打包環(huán)境是開發(fā)環(huán)境
生產(chǎn)環(huán)境：webpack ./src/index.js -o ./build/built.js --mode=production
webpack會以./src/index.js為入口文件開始打包，打包后輸出到./build/built.js
整體打包環(huán)境是生產(chǎn)環(huán)境
2.結(jié)論：
1.webpack能處理js/json資源蝴罪，不能處理css/img等其他資源
2.生產(chǎn)環(huán)境和開發(fā)環(huán)境將ES6模塊化編譯成瀏覽器能識別的模塊化
3.生產(chǎn)環(huán)境比開發(fā)環(huán)境多一個js壓縮代碼
Webpack基本配置
配置webpack.config.js文件
webpack.config.js ----- webpack的配置文件
作用：指示webpack干哪些活（當(dāng)你運(yùn)行webpack指令時(shí)董济，會加載里面的配置）。
所有構(gòu)建工具都是基于nodejs平臺運(yùn)行的要门，模塊化默認(rèn)采用commonjs虏肾。
//resolve用來拼接絕對路徑的方法
const { resolve } = require('path');
module.exports = {
//webpack配置
//入口起點(diǎn)
entry: './src/index.js',
//輸出
output: {
//輸出文件名
filename: 'built.js',
//輸出路徑
//__dirname是nodejs的變量，代表當(dāng)先文件的目錄絕對路徑
path: resolve(__dirname, 'build')
},
//loader的配置
module: {
rules: [
//詳細(xì)loader配置
]
},
//plugins的配置
plugins: [
//詳細(xì)plugins配置
],
//模式
mode: 'development' //開發(fā)模式
// mode: 'production'
};
打包樣式資源
- 在src目錄下新建css和less文件：
/*index.css文件*/
html,body{
margin: 0;
padding: 0;
height: 100%;
background-color: pink;
}
/*index.less文件*/
#title {
color: #ffffff;
}
- 配置webpack.config.js文件：
/*webpack.config.js文件*/
const { resolve } = require('path');
module.exports = {
entry: './src/index.js',
output: {
filename: 'built.js',
path: resolve(__dirname, 'build')
},
module: {
rules: [
//不同文件必須配置不同loader處理
{
//匹配哪些文件
test: /\.css$/,
//使用哪些loader進(jìn)行處理
use: [
//use數(shù)組中l(wèi)oader執(zhí)行順序：從右到左欢搜，從上到下依次執(zhí)行
//創(chuàng)建style標(biāo)簽封豪，將js中的樣式資源插入進(jìn)行，添加到head中生效
'style-loader',
//將css文件變成commonjs模塊加載到j(luò)s中炒瘟，里面內(nèi)容是樣式字符串
'css-loader'
]
},
{
test: /\.less$/,
use: [
'style-loader',
'css-loader',
//將less文件編譯成css文件
//需要下載less-loader和less兩個包
'less-loader'
]
}
]
},
plugins: [
//詳細(xì)plugins配置
],
mode: 'development'
};
- 下載相關(guān)包：
npm install style-loader css-loader less-loader less -D - 在index.js文件中引入樣式資源：
/*index.js文件*/
//引入樣式資源
import './index.css';
import './index.less';
- 輸入打包命令：
webpack - 在bulid目錄下生產(chǎn)打包后的bulit.js文件
- 在html文件中引入打包后的js文件：
<!--index.html文件-->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>webpack</title>
</head>
<body>
<!-- 引入打包后的js文件-->
<script src="built.js"></script>
<h1 id="title">hello webpack</h1>
</body>
</html>
打包html資源
- 在src目錄下新建index.html文件和index.js文件：
<!--src/index.html-->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>webpack</title>
</head>
<body>
<h1 id="title">hello html</h1>
</body>
</html>
/*src/index.js*/
function add(x,y) {
return x + y;
}
console.log(add(2,3));
- 配置webpack.config.js文件：
/*webpack.config.js文件*/
/*
loader：1.下載 2.使用（配置loader）
plugins：1.下載 2.引入 3.使用
*/
const {resolve} = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
entry: './src/index.js',
output: {
filename: "built.js",
path: resolve(__dirname, 'build')
},
loader: {
rules: [
//詳細(xì)loader配置
]
},
plugins: [
//html-webpack-plugin
//功能：默認(rèn)會創(chuàng)建一個空的HTML文件吹埠，自動引入打包輸出所有的資源（JS/CSS）
//需求：需要有結(jié)構(gòu)的HTML文件
new HtmlWebpackPlugin({
//復(fù)制"./src/index.html"文件，并自動引入打包輸出所有的資源（JS/CSS）
template: "./src/index.html"
})
],
mode: "development"
};
- 下載相關(guān)包：
npm install html-webpack-plugin -D - 輸入打包命令：
webpack - 在bulid目錄下生成打包后的bulit.js文件疮装，并創(chuàng)建index.html文件,自動將所有打包輸出的資源引入該html文件中缘琅。
<!--bulid/index.html-->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>webpack</title>
</head>
<body>
<h1 id="title">hello html</h1>
<script src="built.js"></script></body>
</html>
在該html文件中，會顯示打包后的html資源廓推，也會顯示js資源（即在控制臺打印5）刷袍。
注意：使用html-webpack-plugin插件會自動引入所有資源，不需要自己再引入樊展，避免重復(fù)引入呻纹。
打包圖片資源
- 在src目錄下新建index.html和index.less文件：
<!--src/index.html-->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>webpack</title>
</head>
<body>
<div id="box1"></div>
<div id="box2"></div>
<div id="box3"></div>
<img src="img/react.jpg" alt="react">
</body>
</html>
/*src/index.less*/
#box1{
width: 100px;
height: 100px;
background-image: url("img/angular.jpg");
background-repeat: no-repeat;
background-size: 100% 100%;
}
#box2{
width: 200px;
height: 200px;
background-image: url("img/vue.jpg");
background-repeat: no-repeat;
background-size: 100% 100%;
}
#box3{
width: 300px;
height: 300px;
background-image: url("img/react.jpg");
background-repeat: no-repeat;
background-size: 100% 100%;
}
- 在src目錄下新建index.js文件堆生，引入樣式資源：
/*src/index.js*/
import './index.less';
- 配置webpack.config.js文件：
/*webpack.config.js*/
const {resolve} = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
entry: './src/index.js',
output: {
filename: "built.js",
path: resolve(__dirname, 'build')
},
module: {
rules: [
{
test: /\.less$/,
//使用多個loader處理用use
use: ['style-loader', 'css-loader', 'less-loader']
},
{
//問題：默認(rèn)處理不了html中img標(biāo)簽引入的圖片
//處理圖片資源
test: /\.(jpg|png|gif)$/,
//使用一個loader
//下載url-loader file-loader
loader: 'url-loader',
options: {
//圖片大小小于8kb，就會被base64處理
//優(yōu)點(diǎn)：減少請求數(shù)量（減輕服務(wù)器壓力）
//缺點(diǎn)：圖片體積會更大（文件請求速度更慢）
limit: 8 * 1024,
//問題：因?yàn)閡rl-loader默認(rèn)使用es6模塊化解析雷酪，而html-loader引入圖片是commonjs
//解析時(shí)會出問題：[object Module]
//解決：關(guān)閉url-loader的es6模塊化淑仆，使用commonjs解析
esModule: false,
//給圖片進(jìn)行重命名
//[hash:10]取圖片的hash的前10位
//[ext]取原來文件擴(kuò)展名
name: '[hash:10].[ext]'
}
},
{
test: /\.html$/,
//處理html文件的img圖片（負(fù)責(zé)引入img，從而能被url-loader進(jìn)行處理）
loader: 'html-loader'
}
]
},
plugins: [
new HtmlWebpackPlugin({
template: "./src/index.html"
})
],
mode: "development"
};
- 下載相關(guān)包：
npm install url-loader file-loader html-loader -D - 輸入打包命令：
webpack - 在build目錄下生成打包后的built.js文件太闺，并生成新的index.html文件糯景，將built.js引入。
<!--bulid/index.html-->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>webpack</title>
</head>
<body>
<div id="box1"></div>
<div id="box2"></div>
<div id="box3"></div>
<img src="4454005113.jpg" alt="react">
<script src="built.js"></script></body>
</html>
關(guān)于limit: 8 * 1024：
在這里插入圖片描述
只有兩張圖片被打包（小于8kb）
在這里插入圖片描述
嘗試的時(shí)候打包了兩次省骂，第二次以hash前十位重命名蟀淮，生成了兩次文件
name: '[hash:10].[ext]'在這里插入圖片描述
小于8kb的圖片被base64壓縮為字符串格式
在這里插入圖片描述
在這里插入圖片描述
在這里插入圖片描述
打包其他資源
-
將iconfont所需資源下載到本地，引入src目錄下：
在這里插入圖片描述 - 在src目錄下新建index.html钞澳，使用iconfont：
<!--src/index.html-->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>webpack</title>
</head>
<body>
<span class="iconfont .icon-icon-test"></span>
<span class="iconfont .icon-icon-test1"></span>
<span class="iconfont .icon-icon-test2"></span>
<span class="iconfont .icon-icon-test3"></span>
<span class="iconfont .icon-icon-test4"></span>
<span class="iconfont .icon-icon-test5"></span>
<span class="iconfont .icon-icon-test6"></span>
</body>
</html>
- 在src目錄下新建index.js文件怠惶，并引入iconfont樣式文件：
/*src/index.js*/
//引入iconfont樣式文件
import './iconfont.css';
- 配置webpack.config.js文件：
/*webpack.config.js*/
const {resolve} = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
entry: './src/index.js',
output: {
filename: "built.js",
path: resolve(__dirname, 'build')
},
module: {
rules: [
{
test: /\.css$/,
use: ['style-loader','css-loader']
},
//打包其他資源（除了html/js/css/less資源以外的資源）
{
//排除css/html/js/less資源
exclude: /\.(css|html|js|less)$/,
loader: 'file-loader'
}
]
},
plugins: [
new HtmlWebpackPlugin({
template: "./src/index.html"
})
],
mode: "development"
};
- 輸入打包命令：
webpack - 在build目錄下生成打包后的built.js文件，并且新生成index.html文件轧粟，將built.js文件引入策治。
devServer
- 在webpack.config.js中配置devServer：
const {resolve} = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
entry: './src/index.js',
output: {
filename: "built.js",
path: resolve(__dirname, 'build')
},
module: {
rules: [
{
test: /\.less$/,
use: ['style-loader', 'css-loader', 'less-loader']
},
{
test: /\.(jpg|png|gif)$/,
loader: 'url-loader',
options: {
limit: 8 * 1024,
esModule: false,
name: '[hash:10].[ext]'
}
},
{
test: /\.html$/,
loader: 'html-loader'
}
]
},
plugins: [
new HtmlWebpackPlugin({
template: "./src/index.html"
})
],
mode: "development",
//開發(fā)服務(wù)器devServer：用來自動化（自動編譯，自動打開瀏覽器兰吟，自動刷新瀏覽器）
//特點(diǎn)：只會在內(nèi)存中編譯打包通惫，不會有任何輸出
//啟動devServer指令為：npx webpack-dev-server
devServer: {
//項(xiàng)目構(gòu)建后路徑
contentBase: resolve(__dirname, 'build'),
//啟動gzip壓縮
compress: true,
//端口號
port: 3000,
//自動打開瀏覽器
open: true
}
};
- 下載相關(guān)包：
npm install webpack-dev-server -D - 啟動devServer：
npx webpack-dev-server
