一、简答题
1、Webpack 的构建流程主要有哪些环节?如果可以请尽可能详尽的描述 Webpack 打包的整个过程。
解答:
- 初始化参数: 从配置文件和shell语句中读取合并参数,得到最终的参数,
- 开始编译: 用上一步得到的参数初始化 Compiler 对象,在不同的钩子中执行不同的配置插件,执行对象的run方法开始编译,
- 确定入口: 根据配置中的 entry 找出文件的入口,
- 编译模块: 根据入口文件调用配置中的 loader 对模块进行解析,plugin 对模块进行其他操作递归查找所有依赖模块并做同样的操作,
- 完成编译: 根据上一步得到编译完的最后结果以及他们的依赖管系,
- 输出资源: 根据入口和模块的依赖关系组装成一个个包含多个模块的 Chunk,再把每个 Chunk 转换成一个单独的文件加入到输出列表,这步是可以修改输出内容的最后机会;
- 输出完成: 根据配置的输出文件目录和文件件名,将文件内容输出到文件系统
2、Loader 和 Plugin 有哪些不同?请描述一下开发 Loader 和 Plugin 的思路。
解答:
Loader 和 Plugin 的不同
-
Loader 是模块加载器, webpack 默认只能解析js文件,要想其它文件也参与打包就要用到 Loader。所以Loader的作用是使 webpack 拥有加载和解析其他文件的能力.
-
Plugin 是插件,用于扩展 webpack 的功能,让 webpack 更加灵活. webpack 在生命周期提供了许多事件,Plugin 可以监听这些事件在合适的时机提供 API 改变输出结果
-
Loader 在 module.rules 中配置
module: { rules: [ { test: /\.css$/, use: [ 'style-loader', 'css-loader' ] } ] },
-
Plugin 在 plugins 中单独配置
plugins: [ new HtmlWebpackPlugin({ title: 'Webpack Tutorial', template: './src/index.html' }), new webpack.HotModuleReplacementPlugin() ]
开发 Loader
- 新建一个js文件(可以发布到npm当作一个npm模块使用)
- 导出一个函数,输入是加载到的资源文件内容,输出是此次加工过后的一个结果。
- 是以多个管道进行工作的,但是输出的结果必须是一段 JavaScript 代码。方法一:直接返回一个 JavaScript 代码。 方法二:再去找一个合适的加载器接着去处理此次处理完的结果。
- 在 webpack.config.js 中使用 loader,配置 module.rules ,其中 use 除了可以使用模块名称,也可以使用模块路径
开发 Plugin
- 通过钩子机制实现,webpack在不同的时期有不同的钩子,在对应的钩子上挂载任务即可。
- 插件必须是一个函数或者是一个包含 apply 方法的对象
- 接收一个 compiler 参数,通过这个对象注册钩子函数
- 通过 tap 注册插件,第一个参数为插件名,第二个参数为挂载到钩子上的函数,接收 compilation(此次打包的上下文) 对象参数。
- 做逻辑处理返回 source 内容和 size 文件大小
class MyPlugin { apply (compiler) { console.log('MyPlugin 启动') compiler.hooks.emit.tap('MyPlugin', compilation => { // compilation => 可以理解为此次打包的上下文 console.log(compilation.assets) for (const name in compilation.assets) { // console.log(name) // console.log(compilation.assets[name].source()) if (name.endsWith('.js')) { const contents = compilation.assets[name].source() const withoutComments = contents.replace(/\/\*\*+\*\//g, '') compilation.assets[name] = { source: () => withoutComments, size: () => withoutComments.length } } } }) } }
二、编程题
1、使用 Webpack 实现 Vue 项目打包任务
具体任务及说明:
- 先下载任务的基础代码 百度网盘链接:
https://pan.baidu.com/s/1pJl4k5KgyhD2xo8FZIms8Q 提取码: zrdd
这是一个使用 Vue CLI 创建出来的 Vue 项目基础结构 - 有所不同的是这里我移除掉了 vue-cli-service(包含 webpack 等工具的黑盒工具)
- 这里的要求就是直接使用 webpack 以及你所了解的周边工具、Loader、Plugin 还原这个项目的打包任务
- 尽可能的使用上所有你了解到的功能和特性
解答:
查看 GIthub 地址: https://github.com/myxiangdong/vue-app-base