Webpack基础

目录

1.什么是Webpack？为什么需要webpcak？

2.webpack的构建流程

3.什么是Loader?什么是Plugin?

4.module，chunk，bundle分别是什么？

1.什么是Webpack？为什么需要webpcak？

webpack是一个打包模块化js的工具，在webpack里一切文件皆模块，通过loader转换文件，通过plugin注入钩子，最后输出由多个模块组合成的文件，webpack专注构建模块化项目。WebPack可以看做是模块的打包机器：它做的事情是，分析你的项目结构，找到js模块以及其它的一些浏览器不能直接运行的拓展语言，例如：Scss，TS等，并将其打包为合适的格式以供浏览器使用。

还记得学习vue时的src文件夹，public文件夹吗？其实webpack的作用主要是两种：

• 压缩代码，减小文件体积；
• 在Vue框架中，将.vue文件转换为浏览器能够直接识别的html，css，js文件；

2.webpack的构建流程

主要分为三大步骤：

初始化流程：从配置文件和 Shell 语句中读取与合并参数，并初始化需要使用的插件和配置插件等执行环境所需要的参数

编译构建流程：从 Entry 发出，针对每个 Module 串行调用对应的 Loader 去翻译文件内容，再找到该 Module 依赖的 Module，递归地进行编译处理

输出流程：对编译后的 Module 组合成 Chunk，把 Chunk 转换成文件，输出到文件系统

相比文字描述，还是直接上代码比较清晰明了，这便是一个最基础的webpack.config.js文件

module.exports = {
  // 入口
  entry: "",
  // 输出
  output: {},
  // 加载器
  module: {
    rules: [],
  },
  // 插件
  plugins: [],
  // 模式
  mode: "",
};

具体流程的详细步骤可以看这篇文章，简洁明了，这里打出文章链接：http://t.csdn.cn/dYj3Z

3.什么是Loader?什么是Plugin?

webpack 本身只能处理 js、json 等资源，其他资源需要借助 loader，Webpack 才能解析

• Loaders是用来告诉webpack如何转化处理某一类型的文件，并且引入到打包出的文件

• Plugin是用来自定义webpack打包过程的方式，一个插件是含有apply方法的一个对象，通过这个方法可以参与到整个webpack打包的各个流程(生命周期)，扩展 Webpack 的功能。

常见Loader：

• css-loader：负责将 Css 文件编译成 Webpack 能识别的模块
• style-loader：会动态创建一个 Style 标签，里面放置 Webpack 中 Css 模块内容
• eslint-loader：通过ESLint检查JavaScript代码
• babel-loader：把ES6转换成ES5css-loader

4.module，chunk，bundle分别是什么？

借用一张图来说明：

很容易可以看出：

 index.css 和 common.js 在 index.js 中被引入，打包生成的 index.bundle.css 和 index.bundle.js 都属于 chunk 0，utils.js 因为是独立打包的，它生成的 utils.bundle.js 属于 chunk 1。

• 我们手写的文件，他们都是 module，可以理解为一个个模块；
• 当我们写的 module 源文件传到 webpack 进行打包时，webpack 会根据文件引用关系生成 chunk 文件，webpack 会对这个 chunk 文件进行一些操作；
• webpack 处理好 chunk 文件后，最后会输出 bundle 文件，这个 bundle 文件包含了经过加载和编译的最终源文件，所以它可以直接在浏览器中运行。

总结来说就是不同场景下的不同名字：直接写出来的是 module，webpack 处理时是 chunk，最后生成浏览器可以直接运行的 bundle。