一句话概括：
webpack是一种前端模块化的打包工具，它会从入口文件开始，识别所有的依赖模块（js/css/各种其他资源），将其打包成一个可在浏览器端运行的可执行函数
当然这里的可执行函数的语法需要用babel来转换
其主要有以下几种模块
- 基本API
- loaders （因为webpack只能识别js/json文件，其他的比如css/图片等需要通过加载相对的loader来识别）
- Plugins （插件在webpack的使用过程中很重要，webpack的执行过程相当于有个生命周期，插件的目的就是在这个生命周期过程中实现自己需求）
WeChat423e4885bd11e0f5d76b738bf2714c8d.png
简单使用
1. 安装
//安装webpack V4+版本时，需要额外安装webpack-cli
npm i webpack -d
npm I -d webpack-cli
//使用npx来检测版本（npx：帮助我们在项⽬目中的node_modules里面寻找依赖）
npx webpack -v
2.简单构建
新建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;
}
然后执行构建，直接会根据默认的配置 生成可以执行运行在浏览器端的自执行函数
npx webpack
默认的配置是：
const path = require("path")
module.exports = {
// 必填 webpack执⾏行行构建⼊入⼝口 entry: "./src/index.js", output: {
// 将所有依赖的模块合并输出到main.js filename: "main.js",
// 输出⽂文件的存放路路径，必须是绝对路路径
path: path.resolve(__dirname, "./dist")
} };
然后我们主要的工作是手动配置这个默认配置，比如给他加个loader/plugin等等
3.loader
因为webpack不认识一些外来模块，所以要使用一些加载器，比如识别css/react/vue/png等
module : {
rules:[
{ test:/\.xxx$/,//指定匹配规则
use:{ loader: 'xxx-load' } //指定使⽤用的loader
}，
...其他的
] }
4. Plugins
plugin 可以在webpack运⾏行行到某个阶段的时候，帮你做⼀一些事情，类似于⽣生 命周期的概念
比如打包的后需要生成一个html文件，并且引入生成的bundle.js文件
使用：HtmlWebpackPlugin这个插件
npm install --save-dev html-webpack-plugin
配置：
这里注意了，插件都是一个class哦
plugins:[
new htmlWebpackPlugin({
title: "My App",
filename: "app.html", template: "./src/index.html"
})
]
编译后生成
5. 其他配置
- mode 指定当前的构建环境，使用mode可以触发内置的函数，达到优化的效果（比如压缩）
- sourceMap 代码映射关系 可以较快的找到代码错误的地方
devtool:"cheap-module-eval-source-map",// 开发环境配置
//线上不不推荐开启
devtool:none
- WebpackDevServer
建设本地跨域代理，配置自刷新浏览器
npm install webpack-dev-server -D
修改 package.json
"scripts": {
"server": "webpack-dev-server"
}
配置：
devServer:{
open: true,
port: 8081,
//跨域
proxy: { "/api": {
target: "http://localhost:9092" }
}
}
前端请求
axios.get("/api/info").then(res => { console.log(res);
})
网友评论