内涵 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 的一个功能,可以使代码修改后不用刷新浏览器就自动更新,高级版的自动刷新浏览器