Webpack如何理解

共计 3264 个字符，预计需要花费 9 分钟才能阅读完成。

Webpack 如何理解，很多新手对此不是很清楚，为了帮助大家解决这个难题，下面丸趣 TV 小编将为大家详细讲解，有这方面需求的人可以来学习下，希望你能有所收获。

1. 摘要

Webpack 是一种前端资源构建工具，一个静态模块打包器。在 Webpack 看来，前端的所有资源文件 (js/json/css/img/less/…) 都会作为模块处理，当 Webpack 处理应用程序时，它将根据模块的依赖关系进行静态分析，打包生成对应的静态资源。Webpack 打包流程图如图 1 - 1 所示。

图 1 -1 Webpack 打包流程图

2. Webpack 五个核心概念

2.1 Entry

入口 (Entry) 指示 Webpack 以哪个文件作为入口起点分析构建内部依赖图并进行打包。

2.2 Output

输出 (Output) 指示 Webpack 打包后的资源 bundles 输出到哪里去，以及如何命名。

2.3 Loader

Loader 让 Webpack 能够去处理那些非 JavaScript 语言的文件，Webpack 本身只能理解 JavaScript。

2.4 Plugins

插件 (Plugins) 可以用于执行范围更广的任务，插件的范围包括从打包和压缩，一直到重新定义环境中的变量等。

2.5 Mode

模式 (Mode) 指示 Webpack 使用相应模式的配置。分为 development 和 production 两种模式，下面分别进行简述。

development:  开发模式，能让代码本地运行的环境，会将 process.env.NODE_ENV 的值设为 development，同时启用 NamedChunksPlugin 和 NamedModulesPlugin 插件；

production:  生产模式，能让代码优化运行的环境，会将 process.env.NODE_ENV 的值设为 production，同时启用 FlagDependencyUsagePlugin、FlagIncludedChunksPlugin、ModuleConcatenationPlugin、NoEmitreplaceStringsPlugin、OccurrenceOrderPlugin、SideEffectsFlagPlugin 和 UglifyJsPlugin 插件。

3. Wbepack 配置 3.1 webpack.config.js 文件

webpack.config.js 是 webpack 的配置文件，用来指示 webpack 工作，运行 webpack 指令时，会加载里面的配置，所有构建工具都是基于 nodejs 平台运行的，默认采用 commonjs 模块化。webpack.config.js 基础配置如图 3 - 1 所示。

图 3 -1 webpack.config.js 基础配置

3.2 devServer 配置

开发服务器 (devServer) 用来实现自动化(自动编译、自动打开浏览器、自动刷新浏览器)，只会在内存中编译打包，不会有任何文件输出，本地安装 webpack-dev-server 后，通过 npx webpack-dev-server 命令启动 devServer，核心代码如图 3 - 2 所示。

图 3 -2 devServer 配置核心代码

3.3 打包 html/ 样式 / 图片 / 其它资源

打包不同的资源会使用不同的 loader 和插件，打包 html/ 样式 / 图片 / 其它资源的流程如下所述。

3.3.1 打包 html 资源

1. 下载 html-webpack-plugin 插件；

2. 引入 html-webpack-plugin 插件；

3. 使用 html-webpack-plugin 插件，并进行相应配置。

3.3.2 打包样式资源

不同的样式文件需要配置不同的 loader

1. 下载 loader；

2. 配置 loader，css 样式文件使用 css-loader 和 style-loader，less 文件使用 less-loader、css-loader 和 style-loader。其中 css-loader 的作用是将 css 文件变成 commonjs 模块加载到 js 文件中，style-loader 的作用是创建 style 标签，将 js 中的样式资源插入进去，添加到 head 中生效。

3.3.3 打包图片资源

1. 下载 url-loader，file-loader

2. 配置 loader

3.3.4 打包其它资源

1. 下载 file-loader

2. 配置 loader，配置该 loader 作用于不为 html/css/less/js 的其他文件

3.4 提取 css 成单独文件 /css 兼容性处理 / 压缩 css3.4.1 提取 css 成单独文件

样式文件打包后会默认和 js 文件一起输出，可以通过插件将打包后的 css 文件单独输出，流程如下所述。

1. 下载 mini-css-extract-plugin 插件

2. 引用该插件

3. 配置

3.4.2 css 兼容性处理

1. 下载 postcss-loader 和 postcss-preset-env

2. 在 package.json 中 browsetslist 属性中分别对开发环境和生产环境进行兼容性配置，设置支持样式的浏览器版本

3. 通过 postcss 找到 package.json 中 browserslist 里面的配置，通过配置加载指定的 css 兼容性样式。

3.4.3 压缩 css

1. 下载 optimize-css-assets-webpack-plugin 插件

2. 引用该插件

3. 使用该插件

3.5 js 语法检查 eslint/js 兼容性处理 /js 压缩 3.5.1 js 语法检查 eslint

1. 下载 eslint-loader 和 eslint

2. 在 package.json 中的 eslintConfig 中进行配置

3. 配置 eslint-loader，其中只需检测 js 文件并要排除第三方库，只检测自己写的源代码，同时可在 options 配置中设置 fix:true，自动修复 eslint 的错误。

3.5.2 js 兼容性处理

1. 下载 babel-loader、@babel/core、@babel/preset-env，通过 @babel/preset-env 做基本的 js 兼容性处理，然后通过 corejs 做前面无法实现的兼容性处理，并实现按需加载

2. 配置 loader

js 兼容性处理核心代码如图 3 - 3 所示

图 3 -3 js 兼容性处理核心代码

3.5.3 js 压缩

mode 设置为 production 生产环境时会自动压缩 js 代码。

4. webpack 性能优化

可以从开发环境和生产环境分别对 webpack 进行性能优化。其中开发环境主要考虑从打包构建速度和代码调试两个方面进行优化，生产环境主要考虑从打包构建速度和代码运行性能这两个方面进行优化。下面简单介绍下开发环境上通过 HMR 提升构建速度。

4.1 HMR

HMR(热模块替换)，作用是一个模块发生变化后，只会更新打包这一个模块而不是所有模块，通过在 devServer 中设置 hot:true 属性启动 HMR 功能。

其中对于样式文件，可以使用 HMR 功能，因为 style-loader 内部实现了；

对于 js 文件，默认不能使用 HMR 功能，解决方法：修改入口文件 js 代码，添加支持 HMR 功能的代码，另外 HMR 只能处理非入口 js 文件的其他文件，对入口文件并不能生效，因为一旦入口文件更新，入口文件引入的其他文件一定会被重新加载；

对于 html 文件，默认不能使用 HMR 功能，同时会导致 html 文件不能热更新，解决方法：修改 entry 入口文件，将 html 文件引入，只能解决 html 文件不能热更新的问题。

js 文件支持 HMR 功能的核心代码如图 4 - 1 所示。

图 4 -1 js 文件支持 HMR 功能核心代码

4.2 HMR 效果

在入口 index.js 文件中引入 print.js 文件，运行 npx webpack-devserver 后，页面如图 4 - 2 所示。

4-2 初始页面

修改 print.js 文件后，只会重新加载 print.js 文件，而不会重新加载 index.js 文件，HMR 效果如图 4 - 3 所示。

4-3 HMR 效果图

看完上述内容是否对您有帮助呢？如果还想对相关知识有进一步的了解或阅读更多相关文章，请关注丸趣 TV 行业资讯频道，感谢您对丸趣 TV 的支持。