内涵 webpack

简介

webpack 是一个模块打包工具，可以使用它管理项目中的模块依赖，并编译输出模块所需的静态文件。它可以很好地管理、打包开发中所用到的 HTML，CSS，Javascript 和静态文件（图片、字体）等，让开发更高效。对于不同类型的依赖，webpack 有对应的模块加载器，而且会分析模块间的依赖关系，最后合并生成优化的静态资源。

webpack 的基本功能和工作原理

• 代码转换：Typescript 编译成 Javascript、SCSS 编译成 CSS 等等

• 文件优化：压缩 Javascript、CSS、HTML 代码，压缩合并图片等

• 代码分割：提取多个页面的公共代码、提取首屏不需要执行部分的代码让其异步加载

• 模块合并：在采用模块化的项目有很多模块和文件，需要构建功能把模块分类合并成一个文件

• 自动刷新：监听本地源代码的变化，自动构建，刷新浏览器

• 代码校验：在代码被提交到仓库前需要检测代码是否符合规范，以及单元测试是否通过

• 自动发布：更新完代码后，自动构建出线上发布代码并传输给发布系统

webpack 构建过程

• 从 entry 里配置的 module 开始递归解析 entry 依赖的所有 module

• 每找到一个 module，就会根据配置的 loader 去找对应的转换规则

• 对 module 进行转换后，在解析出当前 module 依赖的 module

• 这些模块会以 entry 为单位分组，一个 entry 和其所有依赖的 module 被分到一个组 Chunk

• 最后 webpack 会把所有 Chunk 转换成文件输出

• 在整个流程中 webpack 会在恰当的时机执行 plugin 里定义的逻辑

webpack 打包原理

将所有依赖打包成一个 bundle.js，通过代码分割成单元片段按需加载

是什么 webpack，与 gulp，grunt 有什么区别

将所有打包成一个 bundle.js，通过代码分割成单元片段按需加载

什么是 webpack，与 gulp，grunt 有什么区别

• webpack 是一个模块打包工具，可以递归地打包项目中的所有模块，最终生成几个打包后的文件。

• 区别：webpack 支持代码分割，模块化（AMD，CommonJ，ES2015），全局分析

什么是 entry，output？

• entry 入口，告诉 webpack 要使用哪个模块作为构建项目的起点，默认为 ./src/index.js

• output 出口，告诉 webpack 在哪里输出它打包好的代码以及如何命名，默认为 ./dist

什么是 loader，plugins？

• loader 是用来告诉 webpack 如何转换某一类型的文件，并且引入到打包出的文件中

• plugins （插件）作用更大，可以打包优化，资源管理和注入环境变量

什么是 bundle，chunk，module？

bundle 是 webpack 打包出来的文件，chunk 是 webpack 在进行模块的依赖分析的时候，代码分割出来的代码块。module 是开发中的单个模块

如何自动生成 webpack 配置？

可以用一些官方脚手架

• webpack-cli

• vue-cli

// 首先安装
npm install -g @vue/cli
// 新建项目 hello
vue create hello

• nuxt-cli

// 确保安装了 npx，npx5.2.0 默认安装了
// 新建项目 hello
npx create-nuxt-app hello

• 单个页面

module.exports = {
    entry: './path/to/my/entry/file.js'
}

• 多个页面应用

module.entrys = {
    entry: {
        pageOne: './src/pageOne/index.js',
        pageTwo: './src/pageTwo/index.js'
    }
}

webpack-dev-server 和 http 服务器如 nginx 有什么区别？

webpack-dev-server 使用内存来存储 webpack 开发环境下的打包文件，并且可以使用模块热更新，相比传统 http 服务器开发更加简单高效

什么是模块热更新

webpack 的一个功能，可以使代码修改后不用刷新浏览器就自动更新，高级版的自动刷新浏览器