CommonJS 的规范：我们在写符合 CommonJS 规范的模块时，就是使用了 require 、 exports 、 module 三个东西，然后一个 js 文件就是一个模块，知道这个原理后，就很容易把符合 CommonJS 模块规范的项目代码，转化为浏览器支持的代码。很多工具都是这么实现的，从入口模块开始，把所有依赖的模块都放到各自的函数中，把所有模块打包成一个能在浏览器中运行的 js 文件，譬如webpack，还有Grunt， gulp,Parcel,Rollup,vite....，市面上最流行的还是webpack.

Webpack 是一个打包模块化 JavaScript 的工具，它会从 main.js 出发，识别出源码中的模块化导入语句，递归的寻找出入口文件的所有依赖，把入口和其所有依赖打包到一个单独的文件中，我们将webpack输出的文件叫做bundle。从 Webpack2 开始，已经内置了对 ES6、CommonJS、AMD 模块化语句的支持。

功能介绍 webpack本身的功能是什么

开发模式：仅能变易JS中的ES Module
生产模式：能变易JS中的ES module语法，还能压缩js代码

1. 开发模式

自己新建一个项目，然后简单看一下webpack的基本使用默认webpack 会将文件打包输出到dist目录下 Webpack 本身的功能比较少，只能处理js资源，一旦遇到css等其他资源就会报错，所以学习webpack打包，主要学习如何处理其他资源

基本配置 5大核心的概念

entry(入口）指示webpack从哪个文件开始打包
output（输出）指示webpack打包完的文件输出到哪里去如何命名
loader（加载器） webpackbenshenzhinengchulijs，json等资源，其他资源需要借助loader，webpack才能解析， webpack常用的loader，click here
plugin（插件）扩展webpack的功能
mode（模式）主要有两种模式，开发模式：development，生产模式：production

// webpack.config.js
const path=require('path')

module.exports={
//入口

entry:'./src/main.js', //相对路径
//输出
output:{
path:path.resolve(__dirname,"dist"), //绝对路径
filename:'main.js'
},

//加载器
module:{
rules:[],
},

//插件
plugins:[],
//模式
mode:'development'
}

开发模式介绍 主要两件事：1，编译代码，使浏览器能够识别 2，代码规范和质量

处理样式资源 CSS，Less，Sass，Scss，Styl样式资源

npm install styles-loader css-loader -D 用到什么loader就要下载什么loader，官网例子可能有漏掉一些,一般开发的时候就选择一种就可以了

处理图片资源 webpack内置了图片处理，所以不需要单独配置，但是可以加一些规则对图片进行压缩，例如：

修改打包输出资源的路径

每次打包自动清空上次打包的内容 clean:true

处理字体图标资源 原封不动的输出，统一的到asset/resource

处理JS资源 原因是因为webpack对js的处理是有限的，只能变易js中ex模块化语法，不能编译其他语法，导致js不能在ie等浏览器中运行，所以我们需要做一些兼容性的处理

其次在开发中，团队对于代码格式是有严格要求的，我们不能由肉眼去检测代码格式，需要使用专业的工具来检测

针对js兼容性处理，我们使用Babel来完成，
针对代码格式，我们使用eslint来完成，我们需要先完成eslint，检测代码格式无误后，再由babel来做代码的兼容性处理

Eslint 配置文件

EslintWebpackPlugin

配置文件有多种写法

在根目录下新建 .eslintrc.* , 可以是.eslintrc .eslintrc.js .eslintrc.json区别在于配置格式不一样，也可以在package.json中写eslintConfig 具体的配置，比如.eslintrc.js配置文件为例：

Eslint rules reference

.eslintignore 文件里面可以定义你不想检查的文件夹，跟gitignore一样的功能

Babel 配置 babel

babel.config.*: 新建文件，位于根目录，babelrc,babelrc.js,babelrc.js
package.json里可以设置babel

具体配置

babel.config.js
module.exports ={
//预设
presets:[]

}

处理HTML资源

通过插件自动引入，webpack.js.org/plugins/htm…

以上是一些常见的资源的处理，以上每次代码修改都需要重新打包

开发服务器&自动化

npm i webpack-dev-server -D Then config webpack.config.js, and run npx webpack server

配置后，dev-server会检测我们的文件，使得webpack会自动编译，然后浏览器就会看到变化，不需要每次都打包

2. 生产模式

我们可以修改mode=“production”，然后运行的时候不需要webpack dev server，所以可以改成不同的命令，设置不同的环境变量也可以，或者不同的config文件也可以，可以写一个webpack.prod.js

生产环境中CSS

1.提取css成单独的文件，可以预防闪屏问题，因为CSS文件目前被打包到js文件中，当js文件加载时候，会创建一个style标签来省城样式，这样对于网站来说，会出现闪屏现象，用户体验不好，我们应该是单独的css文件，然后通过link标签加载性能才好

使用插件 webpack.js.org/plugins/min…

csc的兼容性处理

可以在package.json里面配置兼容到什么程度

封装样式loader函数

把重复出现的一些loader封装成一个函数

CSS压缩

webpack.js.org/plugins/css…

总结

两种开发模式

开发模式：代码能编译自动化运行
生产模式：代码编译优化输出

webpack基本功能

开发模式：可以变易ES Module语法
生产模式：可以变易ES Module语法，压缩js代码

Wepack配置文件

5个核心概念
- entry
- output
- loader
- plugins
- mode
devServer配置

Webpack脚本指令用法

webpack直接发包输出
webpack serve 启动开发服务器，内存编译打包没有输出

Webpack 基础

1. 开发模式

开发服务器&自动化

2. 生产模式

总结