webpack的理解以及打包的使用

1. webpack的功能

讲多个文件合并(打包),减少HTTP请求次数,从而提高效率

对代码进行编译,确保浏览器兼容性

对代码进行压缩,减少文件体积,提高加载速度

检测代码格式确保代码质量

提供热更新服务,提高开发效率

针对不同环境,提供不同的打包策略

2. webpack核心概念

1. 入口(Entry)

• 打包时,第一个被访问的源码文件
• 默认是src/index.js(可通过配置文件指定)
• webpack通过入口,加载整个项目

如图:

2. 出口(Output)

• 打包后输出的文件名称
• 默认是dist/main.js(可通过配置文件指定)

如图:

3. 加载器(Loader)

• 专门用来处理一类文件 (非js) 的工具

  • webpack默认只能识别 JS ,想要处理其他类型的文件,需要对应的loader

• 命名方式: xxx-loader (css-loader | html-loader | file-loader)

  • 以-loader为后缀

• 常用加载器:

  https://www.webpackjs.com/loaders/

JS文件打包流程如图:

4. 插件(Plugins)

• 实现loader之外的其他功能

  • plugin是webpack的支柱,用来实现丰富的功能

• 命名方式: xxx-webpack-plugin (html-webpack-plugin)

  • 以-webpack-plugin为后缀

• 常用插件:

  https://www.web