一、简介
1.是前端构建工具：less是无法被浏览器识别，需要借助工具把less编译成css才可以，css预处理器（需要借助工具）构建工具：把前端需要的多个小工具合并起来
2.静态模块打包器：引入js/样式/图片字体等资源，这些都交给webpack处理，首先得告诉webpack入口文件作为起点开始打包，将每一个依赖形成依赖关系树状图，然后依次按顺序引进这些资源，形成chunk代码块，再对chunk代码块进行处理（比如将less编译成css文件/js编译成浏览器能识别的js语法，这些操作概括起来就叫做打包）然后把这些文件输出出去就叫bundle
根据入口文件的依赖关系，将这些资源引进来形成chunk，叫代码块
根据chunk按照不同资源进行不同处理，处理过程叫做打包
打包之后将这些文件输出出去，叫做bundle
在webpack看来，前端的所有资源文件（js/css/src/img/less……）都会作为模块处理，它将根据模块的依赖关系进行静态分析，打包生成对应的静态资源（bundle）
二、核心概念（5个）
1.Entry（入口）
告诉webpack以哪个文件（为入口起点）开始打包，分析构建内部依赖图，比如说告诉wp从index.js开始打包，首先得分析好index.js依赖哪些资源文件，然后把这些都分析好的文件一个个加载进来然后进行打包处理。
2.Output（输出）
webpack打包之后有很多资源bundles输出到哪里去，以及如何命名？
3.Loader
帮wp处理那些非js的文件，因为wp自身只能理解js，loader帮wp翻译css/img让wp能看懂能识别，让wp能处理这些资源文件
4.Plugins（插件）
这个可以用于执行范围更广功能更强大的任务，比如说loader只能做类似翻译的操作，而这个plugins插件可以从打包优化和压缩，一直到重新定义环境中的变量等功能
5.Mode（模式）
模式指示wp使用对应模式的配置
开发模式：能让代码在本地调试运行的环境，这个模式配置相对简单
生产模式：需要考虑各种兼容信息优化处理达到性能最好
三、webpack初始化
npm i webpack webpack-cli -g
npm i webpack webpack-cli -D添加到开发依赖
以上是开发环境的打包流程
下面是生产环境的打包：生产环境会压缩js代码，打包后的js资源是都能正常运行，如果里面有console.log，在html文件里引入也是会正常输出
也可以处理json文件
打包css文件的时候，会报异常，打包失败，所以不能处理css/img等资源
结论：
1.webpack能处理js/json资源，不能处理css/img等其他资源
2.生产环境和开发环境将es6模块化编译成浏览器能识别的模块化
3.生产环境比开发环境多一个压缩js代码
四、wp打包样式资源
1.webpack.config.js文件
wp配置文件，指示wp要干什么，当运行wp指令时候，会加载里面的配置，按照里面的配置进行干活，所有的构建工具都是基于node运行的，模块化默认采用common.js
2.css-lodaer/style-loader
在rules:里配置
{
test:/.css$/,
use:[
‘style-loader’,
‘css-loader’.
]
}
npm i css-loader style-loader -D
3.less-loader/css-loader/style-loader
不同文件必须配置不同的loader处理，less文件需要标题的三个loader帮忙处理；npm i less-loader -D
五、wp打包html资源(html-webpack-plugin)
loader需要先下载，再配置loader使用
plugins也是要先下载，再引入，然后使用
npm html-webpack-plugin -D
六、打包图片资源（url-loader、file-loader）
将图片转化成base64编码字符串处理，优点：减少请求数量（减轻服务器压力），缺点：图片体积会更大，导致文件请求速度变慢。一般8-12kb会进行转base64比较好
url依赖于file包，所以要下载两个包
这张图片转成了base64编码
这种处理有个缺点，当html中引入./hhhh.jpg,是无法处理的，因为url-loader是默认使用es6模块化解析，而html-loader引入图片是common.js，所以解析的时候会报错[object module]，所以需要关闭url-loader的es6模块化，使用commonjs解析
html-loader处理html文件的img图片（负责引入img，从而能被url-loader进行处理）
七、打包其他资源
八、devServer开发服务器
作用：自动编译，自动打开浏览器，自动刷新浏览器。
特点：只会在内存中编译打包，不会有任何输出
启动gzip压缩，可以体积更小，压缩更快
启动指令：webpack-dev-server
监视源代码的变化，一旦发生改变，自动进行编译自动刷新浏览器
九、开发环境搭建
开发环境的要求较低：能让代码运行就好
运行项目指令：
webpack会将打包结果输出出去
npx webpack-dev-server 只会在内存中编译打包，没有输出
十、构建环境
生产环境：性能更好，运行更快，代码能在各个浏览器都能运行平稳。
1.css样式文件打包之后是放在js中，这样会导致体积很大，因此得先加载js才能创建样式，所以可能出现闪屏现象，所以需要将css从js中提取出来
2.压缩代码
3.样式代码/js兼容性问题
十一、提取css成单独文件（mini-css-extract-plugin）
npm i mini-css-extract-plugin -D
上面都是在webpack.config.js配置的，记得先引入，const MiniCssExtractPlugin = require(‘mini-css-extract-plugin’)再配置
这个插件是要等css-loader将css文件整合到js文件中之后，再进行处理。此时就没必要再用style-loader（作用：创建style标签将样式放入）了，而是用这个mini代替，所以要记得在module里用MiniCssExtracPlugin.loader取代style-loader
重新打包之后，build文件夹下多了个main.css文件，项目中会自动引入打包之后的css。
如果为还想把打包后的css放进css文件夹下，那么需要再plugins里传入new MiniCss ExtractPlugin的参数filename，对输出的css文件进行重命名。最后打包出来的结果就是会把css打包到/build/css文件夹下的build.css
若有收获，就点个赞吧
0 人点赞
