• https://www.webpackjs.com/ 官网地址

当自己在简历中写着熟练使用webpack的时候，殊不知自己只是在vue脚手架，react脚手架的路上走着比较轻松而已。

当面试官问你这几个问题的时候，你还能从容答上来吗(高手请忽略)

• 什么是webpack，webpack的打包过程是怎么样的？
• webpack基础配置的属性有哪些
• 什么是loader?什么是plugin?他们执行先后关系是什么？
• 提高webpack的构建速度(这个比较广泛)
• 是否自己写过plugin(一旦你回答写过，马上问题就来了)
• 是否用过compiler ，介绍其中几个方法？

正文

先抛开这几个问题。谈谈本人正常学习webpack的过程，由于几年前先接触的vue，一套vue-cli跑下来 ，生成demo以后感觉自己不仅

学会了vue，还精通了webpack。

后面有个偶然的机会，想自己从头使用webpack部署。才知道里面没有那么简单。

这里有个参考的文章:

入门Webpack，看这篇就够了。

感兴趣的可以自己看。

webpack的打包过程是怎么样的

这个当自己实践着一步步去尝试开始的时候的，会有个比较清晰的理解的。

webpack是一个打包模块化javascript的工具，在webpack里一切文件皆模块，

通过loader转换文件，通过plugin注入钩子，最后输出由多个模块组合成的文件，

webpack专注构建模块化项目。

webpack基础配置的属性有哪些

• 入口(entry)
• 输出(output)
• loader
• 插件(plugins)

当然在实际工程中，看到的的webpack的配置属性远远没有这么简单。

比如：我们会环境配置。dev,pro等等。

可能会使用到代理配置:类似于下面代码所示，用来进行跨域配置

 proxyTable: {
      '/api': {
        target: 'http://……………………',
        changeOrigin: true,
        pathRewrite: {
          '^/api': '/api'
        }
      },
 }

每个属性的配置都可以延伸开，比如入口，可以是单入口，也可以是多入口。

一旦用到具体的场景的话。

每个配置项都有可能变得复杂起来。

什么是loader?什么是plugin?他们执行先后关系是什么？

loader 用于对模块的源代码进行转换。

loader 可以使你在 import 或"加载"模块时预处理文件。

因此，loader 类似于其他构建工具中“任务(task)”，并提供了处理前端构建步骤的强大方法。

插件是 webpack 的支柱功能。

webpack 自身也是构建于，你在 webpack 配置中用到的相同的插件系统之上！

插件目的在于解决 loader 无法实现的其他事。

自然而然，这样通过描述，就能比较清晰的理解的。

plugin是在loader之后执行的，当loader处理完模块代码，plugin继续处理loader未能做完的事情

提高webpack的构建速度

这里有的一篇文章介绍的比较详细

https://www.jianshu.com/p/bb1e76edc71e

当然优化的点大致可以区分下

- 选用合适的loader，这个是比较重要的，能够有效的提升webpack编译的速度。

- 使用Happypack 实现多线程加速编译。

- 不需要打包编译的插件库换成全局"script"标签引入的方式

- 开启缓存

什么是compiler

这个只有当自己真正去写插件的时候，才会意识到的。

compiler

Compiler 模块是 webpack 的支柱引擎，它通过 CLI 或 Node API 传递的所有选项，

创建出一个 compilation 实例。它扩展(extend)自 Tapable 类，以便注册和调用插件。

大多数面向用户的插件，会先在 Compiler 上注册。

以下生命周期钩子函数，

实际应用的时候，大概只需要上面几个编译前，编译后的几个钩子

最后

请原谅偶只是个标题党，文章也只是大致介绍的webpack所有需要了解的知识点的大概范围。

在实际场景应用的时候，各不相同。