一、Webpack基本概念
- 定义：Webpack本质上是一个用于现代JavaScript应用程序的静态模块打包工具。它可以将多个模块打包成一个或多个文件，支持多种资源文件的处理，如JavaScript、CSS、图片等。
- 静态模块：指的是编写代码过程中的html、css、js、图片等固定内容的文件。
- 打包：把静态模块内容进行压缩、整合、转译等前端工程化处理。例如，把less/sass转成css代码，把ES6+降级成ES5，支持多种模块标准语法（CommonJS、ECMAScript）等。
二、Webpack使用步骤
-
初始化项目：
新建项目文件夹，并初始化包环境，得到package.json文件（使用
npm init -y命令）。 -
编写项目代码：
新建src源代码文件夹，并编写项目所需的代码和模块。
-
安装Webpack：
使用
npm install webpack webpack-cli --save-dev命令下载Webpack及其命令行工具到项目环境中。 -
配置Webpack：
在项目根目录新建webpack.config.js配置文件，并导出配置对象。
配置入口（entry）和出口（output）文件的路径。
-
运行Webpack：
在package.json文件中配置只属于当前项目的自定义命令（如
"scripts": {"build": "webpack"}）。使用
npm run build命令运行Webpack进行打包。
三、Webpack高级配置
-
修改Webpack打包入口和出口：
可以通过在webpack.config.js中配置entry属性来指定一个或多个不同的入口起点。
使用output字段来配置输出文件的名称和路径。
-
自动生成HTML文件：
使用html-webpack-plugin插件在Webpack打包时自动生成HTML文件。
配置webpack.config.js让Webpack拥有插件功能，并指定模板文件和输出文件。
-
打包CSS代码：
使用css-loader解析CSS代码，使用style-loader把解析后的CSS代码插入到DOM中。
为了避免CSS代码整合到JS文件中导致JS文件体积变大，可以使用mini-css-extract-plugin插件提取CSS代码到单独的文件中。
- 使用css-minimizer-webpack-plugin插件压缩CSS代码。
-
打包其他资源文件：
- 对于图片资源，可以使用file-loader或url-loader进行处理。
- 对于字体文件，可以使用类似的加载器进行处理。
-
多页应用打包：
- 修改webpack.config.js配置文件中的entry和output字段，支持多个入口和输出文件。
- 使用多个HtmlWebpackPlugin实例为每个HTML文件生成对应的配置。
-
第三方库的引入方式：
- 可以通过expose-loader进行全局变量的注入。
- 可以使用webpack.ProvidePlugin对每个模块的闭包空间注入一个变量，自动加载模块。
-
区分环境配置文件打包：
- 使用webpack-merge合并开发环境和生产环境的配置文件。
- 在配置文件中使用DefinePlugin定义环境变量，以便在代码中区分开发阶段和上线阶段。
四、Webpack性能优化
- 启用cache选项：在webpack.config.js中启用cache选项，缓存编译结果，减少重复编译的时间。
- 优化loader配置：只对必要的文件类型应用loader，避免不必要的文件处理。
- 使用DllPlugin：对于不经常变化的第三方库，可以使用DllPlugin进行预打包，减少每次打包的时间。
- 代码分割：使用代码分割技术将代码拆分成更小的块，以便按需加载。
- Tree Shaking：通过配置mode为production来启用Tree Shaking功能，移除未使用的代码。
五、常见问题解决方案
- 配置文件错误：检查语法错误，确保在配置文件中正确引入了所有必要的插件和加载器，并且版本兼容。
- 模块解析失败：检查模块路径是否正确，配置resolve选项指定模块解析的路径和扩展名，或使用绝对路径避免相对路径带来的问题。
- 打包速度慢：使用上述性能优化技巧来提高打包速度。
