Webpack教程-概述
什么是Webpack
Webpack
是一个静态资源打包工具。它以一个或多个文件作为打包入口,将整个项目所有的文件编译组合成一个或多个文件进行输出。(输出的文件即编译好的文件,就可以在浏览器上运行)
Webpack官网
核心概念
entry (入口)
entiry
指webpack应该使用哪个模块,来作为项目构建的起点。打包时,webpack会根据入口文件找出项目中模块和库的(直接或间接)依赖。
output (输出)
output
指webpack打包完的文件输出路径,及文件命名。
loader (加载器)
loader
指webpack打包时用于转换或处理某些类型的模块。(webpack本身只能处理js、json等资源。)
plugin (插件)
plugin
指扩展webpack的功能。如打包优化、资源管理、注入环境变量等。
mode (模式)
mode
指webpack打包时使用哪些模式进行内置优化。(webpack主要有三种模式:development、production、none)
主要功能
模块打包
将项目中的所有模块(js、css、图片、字体)当作一个整体,通过依赖关系将它们打包成一个或多个静态资源文件。
依赖管理
Webpack可以分析模块之间的依赖关系,根据配置的入口文件找出所有依赖的模块,并将其整合到打包结果中。
文件转换
Webpack本身只处理js、json模块,但可通过loader(加载器),将其他类型的文件转换为有效的模块,使其能够被打包到最终的结果中。
代码拆分
Webpack支持将代码拆分成多个模块,实现按需加载和提升应用性能。
插件系统
Webpack 提供了丰富的插件系统,可通过插件实现各种功能的扩展。如压缩代码、自动生成HTML文件等。
注意:
Webpack
支持所有符合ES5标准的浏览器(不支持IE8及以下版本)。Webpack
中的import()和require.ensure()需要Promise。若要支持旧版本浏览器,需在使用此表达式之前,加载polyfill。Webpack5
需运行在Nodejs 10.13.0+