Webpack

一、认识Webpack

webpack是静态模板打包器，当webpack处理应用程序时，会将所有这些模块打包成一个或多个文件。

模块：webpack可以处理js/css/图片/图标字体等单位

静态：开发过程中存在于本地的js/css/图片/图标字体等文件，就是静态的

动态的内容webpack没办法处理，只能处理静态的。

二、Webpack初体验

1.初始化项目

2.安装webpack需要的包

 报错，原因：初始化时设置的包名与我们安装的webpack包名冲突，我们要更改初始化时的包名。

 再次安装，成功

3.配置webpack

在项目的根目录下创建webpack的配置文件webpack.config.js。（使用的是node.js的模块系统）

打开webpack官网地址：https://www.webpackjs.com/，复制使用webpack打包的配置文件代码到我们的webpack.config.js文件中：

 

4.打包并测试

在package.json文件中写命令，使用webpack命令执行配置文件：（如果执行的文件名不写，只写一个webpack则默认执行的是webpack.config.js文件）

 运行命令：

把bundle.js引入index.html中： 

 运行结果：

二、Webpack的核心

1.entry和output

1.1：entry单入口和多入口的写法

 1.2：output对应单入口和多入口的出口的写法

2.loader

2.1:什么是loader

loader让webpack能够去处理那些非JS文件模块和更好的处理js文件，示例babel-loader

https://www.webpackjs.com/loaders/babel-loader/

记得安装 编译新增API的包：npm install --save-dev core-js@3.6.5

https://babeljs.io/docs/en/babel-polyfill

在源码index.js的最上面引入 import "core-js/stable";

 

 3.插件Plugins

3.1：插件的概念

参考官方文档的概念：https://www.webpackjs.com/concepts/#%E6%8F%92%E4%BB%B6-plugins-

示例：HtmlWebpackPlugin（一款帮助你自动将打包后的js文件引入到html文件中的插件）

1.基本步骤和用法参考以下链接：

https://www.webpackjs.com/plugins/html-webpack-plugin/#%E5%AE%89%E8%A3%85

2.插件的配置：

如果是单入口，则可以使用默认配置，参考上面的链接；

如果是多入口，需自己手动配置，否则所有的入口文件都将被引入到index.html文件中

总结：这篇的内容我们主要需要掌握查阅文档，找到需要使用的工具，根据文档去使用它。而不是去记住。