构建环节:
初始化参数
通过根目录下webpack.config.js
配置文件或者--config
命令指定的配置文件拿到项目打包配置信息。
开始编译
通过初始化好的参数创建compiler,并且向compiler挂在所有loader,且挂在文件读写能力,为后续读取与输出准备,此时也会挂在plugins,完毕后执行compoiler.run方法开始编译
确定入口
通过初始化后的参数entry信息(不传递默认src/index.js),确定入口位置。加载入口内容后转换ast语法树,通过对语法树的解析,找出入口文件的依赖模块,并递归此查找,直到最后无依赖
模块编译
在递归查找的过程中,查找到的每个依赖模块根据文件类型调用配置的相应loader进行转换编译,转换完毕后再继续进行依赖模块递归过程。在这个过程中,webpack会抛出不同的勾子,plugin会此时进行处理,将加载与抓换的内容拿到,加上自己的处理后再次返回处理过后内容。如依赖js模块时,通过laoder加载该模块,加载时会通过babel(常见)进行编译处理,转换完毕后会通过ugliify等plugin进行压缩处理。
完成编译
通过模块编译阶段,得到每个模块的最终结果,和模块之间的依赖关系。
输出文件
根据刚才得到的最终结果及依赖关系生成单独chunk文件,此时可以通过plugin对此阶段做最后处理。完毕后将结果输出到outpu配置目录。
webpack默认只能处理js文件,类似于css、font、img等类型文件无法处理。而loader则是提供转换的能力,将不同类型文件转换为webpack可处理的js模块。
plugin
通过loader将文件处理为js模块后,对文件的压缩、复制、全局变量、模板等非模块转换的其他所有能力,需要通过plugin进行处理,完成loader无法完成或不便完成的任务。
plugin是通过监听webpack的声明周期,在不同的生命周期勾子内进行逻辑处理,最终将处理后的内容返回给webpack继续处理。
开发loader
webpack运行在node.js环境中,遵循默认的CommonJs规范,loader是一个遵循CommonJs规范的功能函数。而此功能函数接受的形参则为webpack处理过程中配置的特定类型文件内容(源码),在loader函数内处理该内容(可使用其他三方模块),处理后将最终结果返回以继续执行。
// XXX-loader
module.exports = (source) => {
const result = source;
// 此处添加具体逻辑代码
return result; // 最终返回
}
开发plugin plugin需是一个函数或者包含apply方法的对象
class MyPlugin {
// 接收配置信息
constructor(options) {
// 这里保存和处理
}
// 接收compiler对象
// 通过compiler对象挂载和注册相应的勾子回调
// 这里的注册是通过tapable来注册
apply(compiler) {
compiler.hooks.beforeRun.tab('MyPlugin', compiler => {
// 在此处书写触发时执行的逻辑
if (compiler.inputFileSystem === inputFileSystem) {
compiler.fsStartTime = Date.now();
inputFileSystem.purge();
}
})
}
}
编程题及文档请看code/vue-app-base目录下内容
编程题及文档请看code/vue-app-base目录下内容
编程题及文档请看code/vue-app-base目录下内容
具体任务及说明:
提示:(开始前必看)
在视频录制后,webpack 版本以迅雷不及掩耳的速度升级到 5,相应 webpack-cli、webpack-dev-server 都有改变。
项目中使用服务器的配置应该是改为下面这样:
// package.json 中部分代码
"scripts": {
"serve": "webpack serve --config webpack.config.js"
}
vue 文件中 使用 style-loader 即可
其它问题, 可先到 https://www.npmjs.com/ 上搜索查看相应包的最新版本的配置示例, 可以解决大部分问题.
本次作业中的编程题要求大家完成相应代码后
此处可能存在不合适展示的内容,页面不予展示。您可通过相关编辑功能自查并修改。
如您确认内容无涉及 不当用语 / 纯广告导流 / 暴力 / 低俗色情 / 侵权 / 盗版 / 虚假 / 无价值内容或违法国家有关法律法规的内容,可点击提交进行申诉,我们将尽快为您处理。