安裝版本：npm install -g webpack@4 webpack-cli@3
webpack-dev-server用于本地預(yù)覽蛆楞，代替http server（功能不夠）
webpack4中文文檔
webpack是用來干什么的嗤堰？
- 轉(zhuǎn)譯代碼（ES6轉(zhuǎn)為ES5卡啰，SCSS轉(zhuǎn)為CSS）
- 構(gòu)建build
- 代碼壓縮
- 代碼分析
目標一：轉(zhuǎn)譯JS
方法：官網(wǎng) Copy Run Modify
1、起步：
mkdir webpack-demo && cd webpack-demo //創(chuàng)建文件進入文件
npm init -y //初始化npm 會新建package.json
//在本地安裝 webpack贷岸，接著安裝 webpack-cli（此工具用于在命令行中運行 webpack）
npm install webpack webpack-cli --save-dev //node_modules目錄
2滑燃、新建src/index.js
console.log('hi')
我們是本地安裝，在node_modules/.bin/webpack
所以理論需要終端運行：./node_modules/.bin/webpack
簡化：npx webpack 會自動幫我們找
3吓歇、運行：npx webpack
此時會出現(xiàn) dist/main.js，這就是console.log('hi')變成的東西票腰。
為什么會有這么多內(nèi)容呢城看？
那我們試一下瀏覽器不能運行的代碼
index.js:
import x from './x.js'
console.log(x)
x.js:
export default 'xxx'
這樣瀏覽器不可以運行。
此時npx webpack
生成main.js,我們可以看到最后一句webpack幫我們進行了操作 xxx代替了x杏慰，webpack會分析JS代碼把代碼變?yōu)闉g覽器可以用的JS测柠。前面一堆是兼容代碼為了保證代碼可以運行的代碼。
此時看到一個警告
4缘滥、WARING in configuration mode選項沒有被設(shè)置,需要配置一下轰胁。
新建webpack.config.js
module.exports = {
mode:'development'//選擇development（開發(fā)者模式）還是production（生產(chǎn)環(huán)境）
}
- development（開發(fā)者模式）模式中，main.js會有很多信息供開發(fā)者看朝扼。
- production（生產(chǎn)環(huán)境）模式中赃阀，main.js為上面默認的，代碼最小化沒有任何注釋吟税，給用戶用體積要最小凹耙。
目標二：理解文件名中的hash的用途(便于緩存)
1、基本配置信息
webpack.config.js
var paht = require('path')
module.exports = {
mode: 'development',
entry: './src/index.js',
output: {
path: path.resolve(__dirname, 'dist'),
filename: 'foo.bundle.js'
}
};
entry（入口）肠仪。默認就是index.js肖抱，我之前沒寫的時候運行webpack就是默認以它為入口。
filename: 'foo.bundle.js'异旧。此時我運行webpack 生成的不是main.js而是foo.bundle.js意述。所以他就是生成的js名。
path就是目錄吮蛹，默認就是dist可以不寫荤崇。
webpack默認把src目錄下index.js轉(zhuǎn)譯之后放到dist下的main.js
2、webpack filename hash
webpack緩存
可以看到輸出的文件名改了潮针，我們試一下术荤。
filemane:'[name].[contenthash].js'
可以看到我們生成的main.js后面多了一堆東西。
3每篷、HTTP緩存
附加知識：HTTP響應(yīng)頭中的Cache-Control
- 當你訪問baidu.com,會給你返回幾個文件瓣戚，比如index.html
- index.htm會引入1.css、2.css焦读、1.js子库、2.js等
- 那我第二次訪問百度的時候，還會加載這幾個文件
- 我剛剛已經(jīng)下載了這幾個文件矗晃，我干嘛還要再請求一遍
- 所以我要給這些文件一些緩存仑嗅，比如在1.css 1.js 緩存一年我不會修改
- 當你第二次訪問百度的時候，只需要下載最新版的index.html 從內(nèi)存得到CSS JS。這樣就可以超快訪問仓技。
這些緩存內(nèi)容基本不占用時間鸵贬。為什么它可以緩存，因為我設(shè)置了緩存頭 2592000秒 不需要重復(fù)下載這個文件浑彰。
問：一年中有更新怎么辦恭理？index.html為什么沒有緩存？
網(wǎng)站更新了一個CSS怎么辦郭变？
- 緩存是跟著文件名走的颜价，所以只需要改一下文件名即可，對文件內(nèi)容做一個哈希 MD5诉濒。
- 就像我們用了webpack filename hash周伦，每次文件更新之后webpack，后面的哈希值都會變化未荒。
- 文件名與文件的內(nèi)容相應(yīng)更新专挪，發(fā)布的時候瀏覽器就知道你有新的CSS之前的緩存就不能要了。
首頁緩存片排？
- 我就是通過首頁拿到跟新的內(nèi)容寨腔，如果首頁都緩存了那我更新不了了。
- 我更新了src才引入新的JS.
但是這樣每次更新dist都會多一個js,所以我們每次要自動刪除dist再生成新的率寡。
package.json scripts中添加
"scripts":{
"build":"rm -rf dist && webpack"
}
之后我們每次打包運行
yarn build 或者 npm run build
目標三 ：用webpack生成HTML
1迫卢、安裝
npm install --save-dev html-webpack-plugin
2、用法
webpack.confing.js中添加
const HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
plugins: [new HtmlWebpackPlugin()],
};
這將會生成一個包含以下內(nèi)容的 dist/index.html 文件：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>webpack App</title>
</head>
<body>
<script src="mainxxxxxxxx.js"></script>
</body>
</html>
要點：自動改文件名
當index.js內(nèi)容變化之后冶共，打包之后index.html會自動更新地址乾蛤。這就是hash的作用。
3捅僵、如何使用index.html
文檔
新建src/assets/index.html
plugins: [new HtmlWebpackPlugin(
title:'My App' //控制title
template:'src/assets/index.html' //template模板 用我給你的模板生成HTML
)],
src/assets/index.html
<title> <%= htmlWebpackPlugin.options.title %></title>
模板中這樣寫就會自動使用配置中的title
view port 老規(guī)矩用淘寶的
目標四 ：webapck 引入 CSS
上部分
新建src/x.css
body{
background:red;
}
在x.js中
import x from './x.css'
這里直接運行會報錯的家卖，它會把CSS當作JS處理
需要一個 css loader
步驟：
1、npm install --save-dev css-loader
2庙楚、修改webpack.config.js上荡，添加如下
module.exports = {
module: {
rules: [
{
test: /\.css$/i,//如果文件名以css結(jié)尾就是用以下loader
use: ["style-loader", "css-loader"],
//因為這里說要使用style loader所以我們安裝一個
},
],
},
};
3、安裝style loader
yarn add style-loader --dev
4馒闷、運行酪捡。
yarn build
cd dist
http serve . -c-1
打開xxx/index.html
5、成功
此時窜司，出現(xiàn)了一個style標簽
為啥會出現(xiàn)呢沛善？---style loader
原理：
- webpack.congig.js 中 test 如果發(fā)現(xiàn)以.css結(jié)尾的文件名
- 那么就用css loader處理這個文件 它會把css內(nèi)容讀取到j(luò)s里面(此時不會出現(xiàn)在頁面中)
- style loader 把css loader 讀取到的東西變成一個style標簽放到head里面
使用webpack-dev-server代替上面的http server
開發(fā) | webpack 中文網(wǎng) (webpackjs.com)
用http server 每改動一次 就要build 一次再進
我們用 webpack-dev-server
- mode改為development
- 安裝npm install --save-dev webpack-dev-server
- 修改配置文件航揉，告訴開發(fā)服務(wù)器(dev server)塞祈，在哪里查找文件：添加如下
webpack.config.js
module.exports = {
devServer: {
contentBase: './dist'
},
};
- 添加一個 script 腳本，可以直接運行開發(fā)服務(wù)器(dev server)：添加如下
package.json
"scripts": {
"start": "webpack-dev-server --open", //--open 是否自動打開網(wǎng)頁可以去掉
},
此時我們直接yarn start即可帅涂，修改代碼時會自動修改议薪。
并且它不依賴dist文件在內(nèi)存中就修改了尤蛮。
插播：什么時入口文件
通常是這樣的， 假設(shè)就三個文件:main.js, a.js, b.js
//main.js
var a = require('./a');
var b = require('./b');
console.log(a.value + b.value);
//a.js
module.exports = {value: 'a'};
//b.js
module.exports = {value: 'b'};
這里的main.js就是入口文件斯议，在入口文件中引入其他的文件产捞，最后生成的bundle.js就包含了這三個文件的所有內(nèi)容。
下部分
上部分使用了JS生成style
下部分把CSS抽成文件哼御，就比如網(wǎng)站中的很多CSS都是以文件形式坯临。
MiniCssExtractPlugin
步驟：
1、npm install --save-dev mini-css-extract-plugin
2恋昼、使用這個webpack.config.js
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
module.exports = {
plugins: [new MiniCssExtractPlugin(
filename:'[name].[contenthash]css', //名稱哈希看靠，以便緩存
chunkFilename:'[id].[contenthash]css',
ignoreOrder：false
)],
module: {
rules: [
{
test: /\.css$/i,
use: [MiniCssExtractPlugin.loader, "css-loader"],
},
],
},
};
此時build之后dist就會多出一個css文件。并且dist html會自動引入link液肌。
所以我們完成了JS自動生成自動加后綴 CSS自動生成自動加后綴挟炬。可以緩存了嗦哆。
我們做項目用到兩種環(huán)境
生產(chǎn)環(huán)境谤祖，也就是我們要上線一個代碼
我們用build 進行webpack
開發(fā)環(huán)境用下start 使用dev server
既然是不同的命令我們能不能讓他們用不同的 webpack.config.js
如果是不同的config那就可以切換不同的plugin.
就可以上部分下部分分開用了。
我們現(xiàn)在的分歧在于
我們在開發(fā)的時候使用style loader
因為不需要生成文件 比較快
生產(chǎn)環(huán)境使用 MiniCssExtractPlugin.loader
因為可以做緩存
新命令
npx webpack --help
很難看
意思是你可以設(shè)置一下用哪個配置文件
新建一個config.prod 用于生產(chǎn)環(huán)境老速。
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
mode: 'production',
plugins: [new MiniCssExtractPlugin(
filename:'[name].[contenthash]css', //名稱哈希粥喜，以便緩存
chunkFilename:'[id].[contenthash]css',
ignoreOrder：false
)],
use: [MiniCssExtractPlugin.loader, "css-loader"],
在package.json中
"scripts":{
"build":"rm -rf dist && webpack --config webpack.config.prod.js"
}
build的時候不使用默認的配置而是這個
start 用開發(fā) 就是style標簽
build production 就是文件 發(fā)布給用戶 需要緩存
兩者僅插件和use不同
兩個文件大體相同可以使用繼承，具體看有道筆記烁峭。
