part2_模块二作业

一、简答题

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