适用于初级前端的webpack了解

一、webpack的作用

webpack是模块化打包工具

二、为什么使用webpack

1.开发的时候使用前端模块化，但是浏览器对模块化的支持程度很低，所以我们要借助webpack模块化打包工具，将模块化代码打包成浏览器支持的规范。或者说可以理解为：将项目模块化打包生成浏览器支持的普通脚本文件，引入到html中。

三、webpack的核心

事例图：

 

1.配置webpack

entry:'入口文件'，

output：‘输出文件’，

2.插件

plugins:[];

（1）htmlWebpackPlugin：自动生成html文件，自动引入打包好的脚本文件

（2）webpack-bundle-analyzer：可视化插件，分析模块化的大小

（3）splitChunks：抽离出公共重复的依赖，单独存放在一个脚本文件，优化前端性能

对于插件都是先下载，后引入配置文件，再使用

3.由于webpack只解析js文件，所以利用loader将非js文件解析成js文件，如：sass css png等。

详情见webpack中文网官网：webpack 中文文档 | webpack 中文网