官網(wǎng)： https://webpack.js.org/
一句話概括：
webpack是一種前端模塊化的打包工具，它會(huì)從入口文件開(kāi)始粱胜，識(shí)別所有的依賴模塊（js/css/各種其他資源）视译，將其打包成一個(gè)可在瀏覽器端運(yùn)行的可執(zhí)行函數(shù)
當(dāng)然這里的可執(zhí)行函數(shù)的語(yǔ)法需要用babel來(lái)轉(zhuǎn)換
其主要有以下幾種模塊
- 基本API
- loaders （因?yàn)閣ebpack只能識(shí)別js/json文件，其他的比如css/圖片等需要通過(guò)加載相對(duì)的loader來(lái)識(shí)別）
- Plugins （插件在webpack的使用過(guò)程中很重要，webpack的執(zhí)行過(guò)程相當(dāng)于有個(gè)生命周期私沮，插件的目的就是在這個(gè)生命周期過(guò)程中實(shí)現(xiàn)自己需求）
WeChat423e4885bd11e0f5d76b738bf2714c8d.png
簡(jiǎn)單使用
1. 安裝
//安裝webpack V4+版本時(shí)，需要額外安裝webpack-cli
npm i webpack -d
npm I -d webpack-cli
//使用npx來(lái)檢測(cè)版本（npx：幫助我們?cè)陧?xiàng)?目中的node_modules里面尋找依賴）
npx webpack -v
2.簡(jiǎn)單構(gòu)建
新建src/index.js和橙、src/index.json仔燕、src/other.js
# index.js
const json = require("./index.json");//commonJS
import { add } from "./other.js";//es module console.log(json, add(2, 3))
# index.json
{
"name": "JOSN"
}
# other.js
export function add(n1, n2) { return n1 + n2;
}
然后執(zhí)行構(gòu)建，直接會(huì)根據(jù)默認(rèn)的配置 生成可以執(zhí)行運(yùn)行在瀏覽器端的自執(zhí)行函數(shù)
npx webpack
默認(rèn)的配置是：
const path = require("path")
module.exports = {
// 必填 webpack執(zhí)?行行構(gòu)建?入?口 entry: "./src/index.js", output: {
// 將所有依賴的模塊合并輸出到main.js filename: "main.js",
// 輸出?文件的存放路路徑魔招，必須是絕對(duì)路路徑
path: path.resolve(__dirname, "./dist")
} };
然后我們主要的工作是手動(dòng)配置這個(gè)默認(rèn)配置涨享，比如給他加個(gè)loader/plugin等等
3.loader
因?yàn)閣ebpack不認(rèn)識(shí)一些外來(lái)模塊，所以要使用一些加載器仆百，比如識(shí)別css/react/vue/png等
module : {
rules:[
{ test:/\.xxx$/,//指定匹配規(guī)則
use:{ loader: 'xxx-load' } //指定使?用的loader
}厕隧，
...其他的
] }
4. Plugins
plugin 可以在webpack運(yùn)?行行到某個(gè)階段的時(shí)候，幫你做?一些事情俄周，類似于?生 命周期的概念
比如打包的后需要生成一個(gè)html文件吁讨，并且引入生成的bundle.js文件
使用：HtmlWebpackPlugin這個(gè)插件
npm install --save-dev html-webpack-plugin
配置：
這里注意了，插件都是一個(gè)class哦
plugins:[
new htmlWebpackPlugin({
title: "My App",
filename: "app.html", template: "./src/index.html"
})
]
編譯后生成
5. 其他配置
- mode 指定當(dāng)前的構(gòu)建環(huán)境峦朗，使用mode可以觸發(fā)內(nèi)置的函數(shù)建丧，達(dá)到優(yōu)化的效果（比如壓縮）
- sourceMap 代碼映射關(guān)系 可以較快的找到代碼錯(cuò)誤的地方
devtool:"cheap-module-eval-source-map",// 開(kāi)發(fā)環(huán)境配置
//線上不不推薦開(kāi)啟
devtool:none
- WebpackDevServer
建設(shè)本地跨域代理，配置自刷新瀏覽器
npm install webpack-dev-server -D
修改 package.json
"scripts": {
"server": "webpack-dev-server"
}
配置：
devServer:{
open: true,
port: 8081,
//跨域
proxy: { "/api": {
target: "http://localhost:9092" }
}
}
前端請(qǐng)求
axios.get("/api/info").then(res => { console.log(res);
})
