//一、 //答:初始化参数: 从配置文件和shell语句中读取合并参数,得到最终的参数, //开始编译: 用上一步得到的参数初始化 Compiler 对象,在不同的钩子中执行不同的配置插件,执行对象的run方法开始编译, //确定入口: 根据配置中的 entry 找出文件的入口, //编译模块: 根据入口文件调用配置中的 loader 对模块进行解析,plugin 对模块进行其他操作递归查找所有依赖模块并做同样的操作, //完成编译: 根据上一步得到编译完的最后结果以及他们的依赖管系, //输出资源: 根据入口和模块的依赖关系组装成一个个包含多个模块的 Chunk,再把每个 Chunk 转换成一个单独的文件加入到输出列表,这步是可以修改输出内容的最后机会; //输出完成: 根据配置的输出文件目录和文件件名,将文件内容输出到文件系统 //二、 //答: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
}
}
}
})
} } //编程题 ///** 项目开发过程说明文档 **/
//安装 webpack 和 webpack-cli
//公共打包配置
//处理js 文件 安装 babel-loader @babel/core @babel/preset-env
//处理 vue 文件需要安装 vue-loader 依赖 css-loader vue-template-compiler 同时需要使用 VueLoaderPlugin
//处理 less 文件需要安装 less less-loader style-loader
//处理 img 图片 file-loader 图片不显示问题 -- file-loader在新版本中esModule默认为true,因此手动设置为false
//运行打包是报错 Error: Cannot find module '@vue/cli-plugin-babel' 将babel.config.js 内容注销
//运行打包报错 Cannot find module file-loader 安装 file-loader 模块
//处理HTML打包 html-webpack-plugin 配置全局变量 BASE_URL new 利用 webpack[ 'ProvidePlugin' ]
//生产环境配置
//利用 webpack-merge 合并公共的配置
//增加删除的优化动作 clean-webpack-plugin
//拷贝项目中的 public 中的文件 开发环境配置
//利用 webpack-merge 合并公共的配置
//利用 webpack-dev-server 开启一个开发服务器
//解决报错Cannot find module 'webpack-cli/bin/config-yargs' 安装 "webpack": "^4.41.2", "webpack-cli": "^3.3.9", "webpack-dev-server": "^3.9.0"
//ESLint 代码检查配置
//安装 eslint 模块 安装 eslint-loader 模块
//初始化 .eslintrc.js 文件 npx eslint --init
代码地址:https://github.com/Nympheas/fed-e-task-02-02/tree/main/vue-app-base