本节介绍webpack五大核心概念
一、entry(入口)
指示 Webpack 从哪个文件开始打包,webpack是根据依赖关系进行打包,以入口文件为起点,根据依赖关系形成依赖树,在生产模式打包时,根据tree-shaking未引用的文件不会打包,减小打包体积
二、output(输出)
指示 Webpack 打包完的文件输出到哪里去,如何命名等
三、loader(加载器)
帮助 webpack 将不同类型的文件转换为 webpack 可识别的模块。webpack 本身只能处理 js、json 等资源,其他资源(css、less、sacc、图片等)需要借助 loader,Webpack 才能解析。
我们在需要解析不同类型文件时可以到webpack官网查询loader使用文档
Webpack 官方 Loader 文档https://webpack.docschina.org/loaders/
四、plugins(插件)
webpack 就像一条生产线,要经过一系列处理流程后才能将源文件转换成输出结果。 这条生产线上的每个处理流程的职责都是单一的,多个流程之间有存在依赖关系,只有完成当前处理后才能交给下一个流程去处理。 插件就像是一个插入到生产线中的一个功能,在特定的时机对生产线上的资源做处理。webpack 通过 Tapable 来组织这条复杂的生产线。 webpack 在运行过程中会广播事件,插件只需要监听它所关心的事件,就能加入到这条生产线中,去改变生产线的运作。 webpack 的事件流机制保证了插件的有序性,使得整个系统扩展性很好。
上面是我抄来的,最简单的理解就是插件补充webpack本身的功能,使webpack功能更加完善
五、mode(模式)
主要由两种模式:
- 开发模式:development
- 生产模式:production
开发模式主要做两件事
1、编译代码,使浏览器能识别运行
开发时我们有样式资源、字体图标、图片资源、html 资源等,webpack 默认都不能处理这些资源,所以我们要加载配置来编译这些资源
2、代码质量检查,树立代码规范
提前检查代码的一些隐患,让代码运行时能更加健壮。
提前检查代码规范和格式,统一团队编码风格,让代码更优雅美观。
生产模式是开发完成代码后,我们需要得到代码将来部署上线。
这个模式下我们主要对代码进行优化,让其运行性能更好。
优化主要从两个角度出发:
- 优化代码运行性能
- 优化代码打包速度
基本示例
准备webpack文件
在项目根目录下新建文件:webpack.config.js
module.exports = {
// 入口
entry: "",
// 输出
output: {},
// 加载器
module: {
rules: [],
},
// 插件
plugins: [],
// 模式
mode: "",
};
Webpack 是基于 Node.js 运行的,所以采用 Common.js 模块化规范
修改配置文件
// Node.js的核心模块,专门用来处理文件路径
const path = require("path");
module.exports = {
// 入口
// 相对路径和绝对路径都行
entry: "./src/main.js",
// 输出
output: {
// path: 文件输出目录,必须是绝对路径
// path.resolve()方法返回一个绝对路径
// __dirname 当前文件的文件夹绝对路径
path: path.resolve(__dirname, "dist"),
// filename: 输出文件名
filename: "main.js",
},
// 加载器
module: {
rules: [],
},
// 插件
plugins: [],
// 模式
mode: "development", // 开发模式
};
运行指令
npx webpack
这里也和之前一样,只能识别js代码,后面介绍不同文件类型的解析