目录

1. Webpack基础打包

1. Vue-CLI是基于webpack；

1.1 认识webpack

1. 是前端的一个构建工具；
2. 前端在目前的开发已经越来越复杂：

1. 模块化的方式开发；
2. 也会使用一些高级的特性来加快我们的开发效率或者安全性，比如通过ES6+、TypeScript开发脚本逻辑，通过sass、less编写css样式；
3. 实时监听文件的变化，并且反映到浏览器上，提高开发效率；
4. 代码压缩、合并以及其他相关的优化；

3. 对于前端开发者来讲，并不需要考虑这些问题的原因：

1. 使用三大框架开发：Vue、React、Augular；
2. 事实上，这三大框架的创建过程都是借助于脚手架(CLI)的；
3. Vue-CLI、create-react-app、Angular-CLI都是基于webpack来帮助我们支持模块化、less、TypeScript、打包优化等的；

1.2 脚手架依赖webpack

1. 我们上面提到的所有脚手架都是依赖webpack；

1.3 webpack到底是什么？

1. 官方解释：

webpack是一个静态的模块化打包工具，为现代的JavaScript应用程序；

1. 打包bundler：webpack可以将帮助我们进行打包，所以它是一个打包工具；
2. 静态的static：这样表述的原因是我们最终可以将代码打包成最终的静态资源(部署到静态服务器)；
3. 模块化module：webpack默认支持各种模块化开发，ES Module、CommonJS、AMD等；
4. 现代的modern：现代前端开发面临的问题，催生了webpack的出现和发展；

2. .hbs 模板引擎；
3. 通过webpack打包 TypeScript等， 然后生成 Static Assets，浏览器才能认识；
4. 编写TypeScript、sass等是为了提高安全性；

1.4 Vue项目加载的文件

1. JavaScript的打包：

1. 将ES6换成ES5的语法；
2. TypeScript的处理，将其转化成JavaScript；

2. Css的处理：

1. CSS文件模块的加载、提取；
2. Less、Sass等预处理器的处理；

3. 资源文件img、font：

1. 图片img文件的加载；
2. 字体font文件的加载；

4. HTML资源的处理：

1. 打包HTML资源文件；

5. 处理vue项目的SFC文件.vue文件：

1.5 webpack的安装

1. webpack的安装目前分为两个：webpack、webpack-cli；
2. webpack-cli的作用：在命令行使用webpack 传递参数的时候， webpack --entry ./src/index.js
3. webpack、webpack-cli 互相调用；
4. 安装

1. 全局安装：npm install webpack webpack-cli -g
2. 局部安装：npm install webpack webpack-cli -D

1.6 wbepack的基本使用

1. 使用全局webpack的缺点：

1. 项目多，需要webpack版本不同，兼容性有问题；

2. 创建 package.json文件，记录项目相关的依赖包版本等；

npm init // 在项目中创建 package.json的命令；
npm init -y // 后面的选项都为 yes

3. 局部安装的包分两种：

1. 开发阶段会使用到的； npm install webpack webpack-cli -D(–save-dev：简写) 可以指定开发阶段使用
2. 生产阶段会使用到的(生产依赖)； npm install webpack webpack-cli 直接回车，默认生产依赖

4. 如何使用局部webpack进行打包：

第一种方式： npx webpack // 使用局部的webpack
第二种方式：在package.json 中的 “scripts”脚本中 添加 “build” : “webpack” 命令行运行 npm run build 也可以完成打包；

1.7 webpack的配置文件

1. 默认去找当前目录下src目录下的index.js 然后进行打包；
2. 命令行配置入口、出口：

npx webpack --entry ./src/main.js --output-path ./build

3. webpack.config.js webpack的配置文件

const path = require("path");  // 引入一个node路径模块
 // 只可以使用 commonJS导出方式进行编写
 module.exports = {entry:" ./src/main.js ",  // 指定打包的入口文件output: {// resolve可以拼接地址， __dirname,是这个文件本身的路径path: path.resolve(__dirname , "./build"),  filename : " bundle.js " // 指定打包之后的文件名称}
 }
 

4. 如何修改 webpack.config.js 这个文件名字

// package.json
 " scripts " : {" build " : " webpack --config han.config.js "  // 指定配置文件为 han.config.js
 }
 

1.8 webpack的依赖图

1. webpack是如何对我们的代码进行打包:

1. webpack在处理应用程序的时候，它会根据命令或者配置文件找到入口文件；
2. 从入口开始，会生成一个依赖关系图(数据结构)，这个依赖关系图会包含应用程序中所需的所有模块；
3. 然后遍历图结构，打包一个个模块(根据文件的不同使用不同的loader来解析);

1.9 loader(例css-loader)

1. 什么是loader？

1. loader可以用于对模块的源代码进行转换(解析)；
2. 将css文件看成一个模块，通过import加载这个模块；
3. 加载这个模块的时候，webpack并不知道如何对其进行加载，必须制定对应的loader来完成这个功能；

2. css 读取css文件 ：css-loader；
3. 如何使用css-loader：

1. 内联方式(基本不用)；
2. CLI方式(webpack5中不再使用);
3. 配置方式；

1.10 loader配置方式

1. 在webpack.config.js文件中写明配置信息:

1. module.rules中允许配置多个loader;
2. 这种方式可以更好地表示loader的配置，方便后期维护，同时对各个loader有一个全局的概览；

2. rules属性对应的值是一个数组: [ rules ]
3. rules属性中包含的：test、loader（use的简写）、use

module: {rules : [{// 正则表达式  $表示以 .css 结尾的所有文件,//   转义 ， .在正则中代表很多其他字符test:/.css$/,  // 使用的laoder为css-loader  （语法糖）// loader: " css-loader "// 完整写法use: [ " css-loader "   // 一个css-loader可能没有办法正确显示，这种可以写多个loader]}]
 }
 

4. 认识style-loader

1. css-loader只是负责将.css文件进行解析，并不会将解析之后的css插入到页面中；
2. 如果我们希望再完成插入style的操作，还需要style-loader；

5. use中的loader加载的顺序是从后往前执行loader；

1.11 如何处理less文件(less-loader)

1. 将less转成普通的css，通过lessc(less Compiler)，这个跟webpack没有关系**；
2. npx 是去 node_module的bin下面去找某一个目录的；

1.12 认识PostCSS工具

1. 通过JavaScript来转换样式的工具；
2. 帮助我们进行一些CSS的转换和适配，比如自动添加浏览器前缀，css样式的重置；
3. 如何使用PostCSS：

1. 查找PostCSS在构建工具中的扩展，比如webpack中的postcss-loader；
2. 选择可以添加你需要的PostCSS相关的插件；

4. 命令行使用postcss

1. npm install postcss postcss-cli -D
2. 需要添加浏览器前缀，要安装autoprefixer： npm install autoprefixer -D
3. 直接使用postcss工具，并且制定使用autoprefixer：
   npx postcss --use autoprefixer -o end.css ./src/css/style.css
   

1.13 postcss-preset-env

1. 它可以帮助我们将一些现代的css特性，转换成大多数浏览器认识的css样式；
2. 将rules中的对象写到一起：