这是我参与「第四届青训营 」笔记创作活动的第4天
webpack知识体系|青训营笔记
1、什么是webpack
在远古时期，在前后端不分离的时代，前端是由html、css、JavaScript和各种img静态资源组成，这对于前端开发很不友好。随着react、vue组件化、前后端分离，模块化、工程化的思想孕育而生，webpack是一个前端资源加载/打包工具。它可以根据模块按照指定的规则生成对应的静态资源。wenpack可以讲一个前端工程化的项目中的js、css、less转化成一个静态文件，减少页面的请求。
2、使用webpack
核心的流程可以分为入口处理、依赖解析、资源解析、资源合并打包，递归最后两步知道资源全部处理完毕。
好处：
- 多个文件资源合并成了一个，减少http请求数
- 支持模块化开发
- 支持高级JS特性
- 支持Typescript语言
- 统一图谱、css、字体、等其他资源的处理模型
3、如何使用webpack
使用webpack基本都是围绕"配置"来说，这些配置可以分为两类：
流程类:作用于流程中某个或者若干个环节，直接可以影响打包的效果。 工具类：主流程之外，提供更多工程化能力的配置项。
webpack.config.js
module.exports = { entry: "./src/index.js", //打包入口文件 output: "./dist", //输出结构 mode: "production", //打包环境 module: { rules: [ //loader模块处理 { test: /\.css$/, use: "style-loader" } ] }, plugins: [new HtmlWebpackPlugin()] //插件配置 };
4、loader和plugin的区别
loader主要是用来转换作用，plugin是执行比转换更复杂的任务，比如合并压缩等
loader:让webpack能够处理非js文件，然后你就可以利用 webpack 的打包能力，对它们进行处理。 例如：css-loader、style-loader、postcss-loader、sass-loader
plugins:从打包优化和压缩，一直到重新定义环境中的变量. 例如：uglify-webpack-plugin、clean-webpack-plugin、babel-polyfill
相对于loader转换指定类型的模块功能，plugins能够被用于执行更广泛的任务比如打包优化、文件管理、环境注入等……
loader，它是一个转换器，将A文件进行编译成B文件，比如：将A.less转换为A.css，单纯的文件转换过程。
plugin是一个扩展器，它丰富了webpack本身，针对是loader结束后，webpack打包的整个过程，它并不直接操作文件，而是基于事件机制工作，会监听webpack打包过程中的某些节点，执行广泛的任务。
