1.webpack簡(jiǎn)介
webpack 是一個(gè)用于現(xiàn)代 JavaScript 應(yīng)用程序的靜態(tài)模塊打包工具村生。當(dāng) webpack 處理應(yīng)用程序時(shí)拉讯，它會(huì)在內(nèi)部構(gòu)建一個(gè)依賴圖(dependency graph)罢杉，此依賴圖對(duì)應(yīng)映射到項(xiàng)目所需的每個(gè)模塊齐邦，并生成一個(gè)或多個(gè) bundle锰蓬。
2.核心概念
- 入口(entry)：指示 webpack 應(yīng)該使用哪個(gè)模塊锣险，來(lái)作為構(gòu)建其內(nèi)部依賴圖(dependency graph) 的開(kāi)始
- 輸出(output)：告訴 webpack 在哪里輸出它所創(chuàng)建的 bundle，以及如何命名這些文件
- loader：webpack 只能理解 JavaScript 和 JSON 文件栽渴，loader讓 webpack 能夠去處理其他類型的文件尖坤，如：css，sass闲擦，image
- 插件(plugin)：loader 用于轉(zhuǎn)換某些類型的模塊慢味，而插件則可以用于執(zhí)行范圍更廣的任務(wù)。包括：打包優(yōu)化墅冷，資源管理纯路，注入環(huán)境變量
- 模式(mode)：通過(guò)選擇 development, production 或 none 之中的一個(gè)，來(lái)設(shè)置 mode 參數(shù)寞忿，以便針對(duì)不同環(huán)境進(jìn)行優(yōu)化
- 瀏覽器兼容性(browser compatibility)：webpack 支持所有符合 ES5 標(biāo)準(zhǔn) 的瀏覽器（不支持 IE8 及以下版本）
3. 安裝
如果使用 webpack v4+ 版本驰唬，除webpack自身外，還需要安裝 CLI（webpack cli）
全局安裝
npm install --global webpack
本地安裝
npm install --save-dev webpack webpack-cli
4.創(chuàng)建項(xiàng)目
mkdir demo-webpack && cd demo-webpack
npm init -y
npm install webpack webpack-cli --save-dev
4.1目錄結(jié)構(gòu)
目錄結(jié)構(gòu)如下：
- src 項(xiàng)目文件
- js
- images
- css
- index.html
- package.json 包管理文件
4.2 下載需要的loader(css,image,es6)
由于webpack只能處理js和json文件腔彰，不能處理css和image叫编，所以我們得先在webpack.config.js添加處理html，css和image的loader
- html-loader 處理html文件的img圖片（負(fù)責(zé)引入img,<img src="image.png"> 變?yōu)?const img = require('./image.png') 或者 import img from "./image.png""霹抛，使其能被url-loader/file-loader處理）
- css-loader 處理css文件
- style-loader 處理css樣式
- url-loader 處理圖片(同時(shí)需要安裝file-loader搓逾，以便處理大圖片 )
npm install --save-dev html-loader css-loader style-loader url-loader file-loader
如果頁(yè)面中的js用到es6語(yǔ)法，需要使用babel先進(jìn)行解析
npm install --save-dev babel-loader @babel/core @babel/preset-env
4.3 下載需要的插件
- html-webpack-plugin 復(fù)制html模板杯拐，并自動(dòng)插入打包好的文件
- clean-webpack-plugin 清空dist目錄下文件
npm install --save-dev html-webpack-plugin clean-webpack-plugin
4.4 配置webpack
由于我們要區(qū)分開(kāi)發(fā)環(huán)境和生產(chǎn)環(huán)境霞篡，所以使用兩個(gè)不同的配置文件，配置文件統(tǒng)一放在build文件下
結(jié)構(gòu)如下：
- build 配置文件存儲(chǔ)目錄
- webpack.common.js 公共配置文件
- webpack.prod.js 生產(chǎn)環(huán)境配置文件
- webpack.dev.js 開(kāi)發(fā)環(huán)境公共配置文件
由于我們把公共部分分開(kāi)了端逼，所以需要合并配置朗兵，此時(shí)需要安裝webpack-merge息裸，配置好后在開(kāi)發(fā)環(huán)境需要啟動(dòng)服務(wù)姐刁，所以還要安裝webpack-dev-serve
npm install --save-dev webpack-merge
具體配置信息見(jiàn)：配置文件信息,配置中有詳細(xì)的介紹
5.整體項(xiàng)目目錄如下
- build 配置文件存儲(chǔ)目錄
- webpack.common.js 公共配置文件
- webpack.prod.js 生產(chǎn)環(huán)境配置文件
- webpack.dev.js 開(kāi)發(fā)環(huán)境公共配置文件
- src 項(xiàng)目文件
- js
- images
- css
- index.html
- package.json 包管理文件
6.多頁(yè)面應(yīng)用
目前該項(xiàng)目只有一個(gè)頁(yè)面，如果是多個(gè)頁(yè)面禀崖，需要在入口配置多個(gè)入口礁鲁，同時(shí)使用html-webpack-plugin配置多頁(yè)面盐欺，如：
entry: {
main: './src/index.js',
about: './src/about.js'
}
plugins: [
new HtmlWebpackPlugin(
{
template：'./src/index.html'
title: 'demo-webpack',
filename: 'index.html',
chunks: ['index','vendors'] //index為入口文件js名稱，vendors為屬性splitChunks-cacheGroups-vendor-name的值
}
),
new HtmlWebpackPlugin(
{
template：'./src/about.html'
title: '關(guān)于我們',
filename: 'about.html',
chunks: ['about']
}
),
]
