一句话概括：

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);

})

webPack核心原理一：基本使用