[toc]
Webpack的核心概念:
- Entry(入口):指定Webpack开始构建依赖关系图的入口文件,可以是一个或多个文件。
- Output(输出):指定Webpack打包后的输出文件的名称和路径。
- Loader(加载器):Webpack使用加载器来处理非JavaScript文件,例如将Sass文件转换为CSS,将TypeScript文件转换为JavaScript等。
- Plugin(插件):Webpack的插件系统可以用于执行各种任务,例如代码压缩、资源优化、环境变量注入等。
- Module(模块):Webpack将所有的文件视为模块,通过加载器和插件对模块进行处理和转换。
- Chunk(代码块):Webpack在打包过程中将模块分割成代码块,可以通过代码分割来优化应用程序的加载性能。
工作原理
- 入口文件:Webpack从一个或多个入口文件开始,根据入口文件中的依赖关系,递归地构建出整个应用程序的依赖关系图。
- 模块解析:Webpack会解析每个模块的依赖关系,包括JavaScript文件、样式表、图片、字体等资源文件,以及其他模块依赖。
- 打包输出:根据依赖关系图,Webpack将所有模块打包成一个或多个输出文件,通常是一个JavaScript文件和一些辅助的资源文件。
常用loader
file-loader:打包图片,打包字体图标。
url-loader:类似于file-loader,但是可以将小于指定大小的文件转成base64编码的Data URL格式
css-loader:和图片一样webpack默认能不能处理CSS文件, 所以也需要借助loader将CSS文件转换为webpack能够处理的类型。解析css文件中的@import依赖关系,打包时会将依赖的代码复制过来代替@import。
scss-loader:自动将scss转换为CSS
less-loader:自动将less转换为CSS
style-loader: 将css文件通过css-loader处理之后,将处理之后的内容插入到HTML的HEAD代码中。
eslint-loader:用于检查常见的 JavaScript 代码错误,也可以进行"代码规范"检查,
PostCSS-loader:PostCSS和sass/less不同, 它不是CSS预处理器(换个格式编写css)。PostCSS是一款使用插件去转换CSS的工具,PostCSS有许多非常好用的插件。例如:autoprefixer(自动补全浏览器前缀)、postcss-pxtorem(自动把px代为转换成rem)。使用说明,必须放在css规则的最后,最先执行。
babel-loader:将ES6+的代码转换成ES5的代码。
vue-loader:将Vue单文件组件编译成JavaScript代码。
常用plugins
optimize-css-assets-webpack-plugin:压缩css代码
HtmlWebpackPlugin:生成HTML文件,并自动将打包后的javaScript和CSS文件引入到HTML文件中。
CleanWebpackPlugin:清除输出目录。
ExtractTextWebpackPlugin:将CSS代码提取到单独的CSS文件中。
DefinePlugin:定义全局变量。
UglifyJsWebpackPlugin:压缩JavaScript代码。
HotModuleReplacementPlugin:热模块替换,用于在开发环境下实现热更新。
MiniCssExtractPlugin:与ExtractTextWebpackPlugin类似,将CSS代码提取到单独的CSS文件中。
BundleAnalyzerPlugin:分析打包后的文件大小和依赖关系。
什么是Webpack的热更新(Hot Module Replacement)?原理是什么?
Webpack的热更新,在不刷新页面的前提下,将新代码替换掉旧代码。
HRM的原理实际上是 webpack-dev-server(WDS)和浏览器之间维护了一个websocket服务。当本地资源发生变化后,webpack会先将打包生成新的模块代码放入内存中,然后WDS向浏览器推送更新,并附带上构建时的hash,让客户端和上一次资源进行对比.