Webpack作为目前前端最流行的构建工具，作为前端程序员，掌握构建工具的基本使用我认为是必要的，那么这篇文章会带领大家入门webpack~
一、什么是webpack?
概念：webpack是前端工程化的具体解决方案。
主要功能：它提供了有好的前端模块化开发支持，以及代码压缩混淆、处理浏览器端JavaScript的兼容性、性能优化等强大的功能。
好处：提供了开发效率和代码的可维护性。
二、webpack基本使用
安装
npm install webpack@5.42.1 webpack-cli@4.7.2 -D 复制代码
在项目中配置webpack
- 在项目根目录创建名为webpack.config.js的webpack配置文件，并初始化如下的基本配置：
module.exports = { mode: 'development' // mode用来指定构建模式，可选值有development和production } // development适用于开发环境，不会对打包生成的文件进行代码压缩和性能优化，打包速度快， //适合在开发阶段使用。 复制代码
- 在package.json的script节点下，新增dev脚本如下：
"script":{ "dev": "webpack" // script节点下的脚本，可以通过npm run 执行，例如npm run dev,就会启动项目。 } 复制代码
等等，如何生成package.json文件呢？在项目终端中运行命令
npm init -y即可
webpack.config.js文件的作用
webpack.config.js是webpack的配置文件。webpack在真正开始打包构建之前，会先读取这个配置文件，从而基于更定的配置，给项目进行打包。
webpack中的默认约定
在webpack4.x和5.x的版本中，有如下的默认约定：
- 默认的打包入口文件为src ->index.js
- 默认的输出文件路径为dist ->main.js
这个约定是可以修改的。
自定义打包的入口与出口
在webpack.config.js配置文件中，通过entry节点指定打包的入口，通过output节点指定打包的出口。
const path = require('path') // 导入node.js中专门操作路径的模块 modeule.exports = { entry:path.join(__dirname,'./src/index1.js'), // 打包入口文件的路径 output:{ path: path.join(__dirname,'/dist'), // 输出文件的存放路径 filename: 'bundle.js' // 输出文件的名称 } } 复制代码
三、webpack中的插件
通过安装和配置第三方的插件，可以拓展webpack的能力，从而让webpack用起来更方便~
插件1：webpack-dev-server
作用：每当我们修改了源代码，webpack会自动化进行项目的打包和构建
安装webpack-dev-server
npm install webpack-dev-server@3.11.2 -D 复制代码
配置webpack-dev-server
修改package.json ->scripts中的dev命令
"scripts": { "dev": "webpack serve" } // 再次运行npm run dev，访问localhost:8080即可 // webpack-dev-server会启动一个实时打包的http服务器 复制代码
使用webpack-dev-server插件打包过后的文件是放在内存中的~
插件2：html-webpack-plugin
作用：
- 通过HTML插件复制到项目根目录中的index.html界面，也被放到内存中
- HTML插件在生成的index.html页面，自动注入了打包的bundle.js文件
安装html-webpack-plugin
npm install html-webpack-plugin@5.3.2 -D 复制代码
配置html-webpack-plugin
// 1.导入HTML插件，得到一个构造函数 const HtmlPlugin = require('html-webpack-plugin') // 2.创建HTML插件的实例对象 const htmlPlugin = new HtmlPlugin({ template: './src/index.html',// 指定原文件的存放路径 filename: './index.html'// 指定生成的文件的存放路径 }) module.exoports = { mode:development, plugins:[htmlPlugin], // 3. 通过plugins节点，使htmlPlugin插件生效 } 复制代码
devServer节点
可以通过devServer节点对webpack-dev-server插件进行更多的配置~
devServer: { open: true, // 初次打包后，自动打开浏览器 host: '127.0.0.1', // 实时打包所使用的主机地址 port: 80, // 实时打包使用的端口号 // 在http协议中，如果端口号是80可以被省略 } // 修改配置，必须重启打包的服务器 复制代码
四、webpack中的loader
在实际开发过程中，webpack默认只能打包处理以.js后缀名结尾的模块。其他非.js后缀名结尾的模块，webpack默认处理不了，需要调用loader加载器才可以正常打包，否则会报错！常见的loader有css-loader,less-loader,babel-loader等。
打包处理css文件
运行npm i style-loader@3.0.0 css-loader@5.2.6 -D命令，安装处理css文件的loader 在webpack.config.js的moule ->rules数组中进行配置
module: { // 所有第三方文件模块的匹配规则 rules: [ // 文件后缀名的匹配规则 {test: /\.css$/,use：['style-loader','css-loader'] } ] } /* 其中，test表示匹配的文件类型，use表示对应要调用的loader 注意： use数组中指定的loader顺序是固定的 多个loader的调用顺序是：从后往前 */ 复制代码
打包流程：
- webpack默认只能打包处理.js结尾的文件，处理不了其他后缀的文件。
- 由于代码中包含index.css文件，因此webpack默认处理不了。
- 当webpack发现某个文件处理不了的时候，会查找webpack.config.js这个配置文件，看module.rules数组中，是否配置了对应的loader加载器。
- webpack把index.css这个文件，先转交给最后一个loader进行处理（先转交给css-loader）。
- 当css-loader处理完毕之后，转交给下一个loader（转交给style-loader）。
- 当style-loader处理完毕之后，发现没有下一个loader了，于是就把处理的结果，转交给webpack。
- webpack把style-loader处理的结果，合并到/dist/bundle.js中，最终生成打包好的文件。
打包处理less文件
sass，stylus文件打包处理方式一致，这里就以less文件为例
- 运行
npm i less-loader@10.0.1 less@4.1.1 -D命令 - 在webpack.config.js的module ->rules数组中，添加loader规则如下：
module: { // 所有第三方文件模块的匹配规则 rules: [ // 文件后缀名的匹配规则 {test: /\.less$/,use：['style-loader','css-loader','less-loader'] } ] } 复制代码
打包处理样式表中与url路径相关的文件
- 运行
npm i url-loader@4.1.1 file-loader@6.2.0 -D命令
- 在webpack.config.js的module ->rules数组中，添加loader规则如下：
module: { // 所有第三方文件模块的匹配规则 rules: [ // 文件后缀名的匹配规则 {test: /\.jpg|png|gif$/,use: 'url-loader?limit=22229' } ] } /* ?之后的是loader的参数项，limit用来指定图片的大小，单位是字节， 只有<=limit大小的图片，才会被转为base64格式的图片 */ 复制代码
打包处理ES6+语法
对于一些高级的JS语法，webpack也无法处理，我们需要借助于babel-loader进行打包处理。
- 运行
npm i babel-loader@8.2.2 babel/core@7.14.6 @babel/plugin-proposal-decorator@7.14.5 -D命令 - 在webpack.config.js的module ->rules数组中，添加loader规则如下：
module: { // 所有第三方文件模块的匹配规则 rules: [ // 文件后缀名的匹配规则 {test: /\.js$/,use: 'babel-loader',exclude: /node-modules/ } ] } /* ?之后的是loader的参数项，limit用来指定图片的大小，单位是字节， 只有<=limit大小的图片，才会被转为base64格式的图片 */ 复制代码
- 在项目根目录下，创建名为babel.config.js的配置文件，定义Babel的配置项如下：
module.exports = { // 声明babel可用的插件 plugins: [['@babel/plugin-proposal-decorators',{legacy:true }]] } 复制代码
五、打包发布
为了让项目能够在生产环境中高性能的运行，因此需要对项目进行打包发布。 在package.json文件的scripts节点下，新增的build命令如下：
"scripts": { "dev": "webpack serve",// 开发环境中，运行dev命令 "build": "webpack --mode production"// 项目发布时，运行build命令 } /* mode是一个参数项，用来指定webpack的运行模式，production代表生产环境， 会对打包生成的文件进行代码压缩和性能优化。 */ 复制代码
把图片文件统一生成到image目录下
修改webpack.config.js的url-loader配置项，新增outputPath选项即可指定图片文件的输出路径
{test: /\.jpg|png|gif$/,use: 'url-loader?limit=22229&outputPath=images' } 复制代码
实现自动清理目录下的旧文件
- 安装配置clean-webpack-plugin插件
npm install clean-webpack-plugin@3.0.0 -D
- 按需导入插件，得到插件的构造函数过后，创建插件的实例对象
const {CleanWepackPlugin} = require('clean-webpack-plugin') const cleanPlugin = new CleanWebpackPlugin() 复制代码
- 把创插件实例对象，挂载到plugins节点中
plugins: [htmlPlugin,cleanPlugin],// 挂载插件 复制代码
六、Source Map
Source Map就是一个信息文件，里面存储着位置信息，也就是说，Source Map文件中存储着压缩混淆后的代码所对应转换前的位置，有了它，极大的方便后面的调试。 开发环境下默认生成的Source Map，记录的是生成代码的位置。会导致运行时报错的行数与源代码的行数不一致的问题。 如何配置呢？
定位行数且暴露源码
只需要在webpack.congif.js中添加如下配置即可
module。exports = { mode: 'development', devtool: 'eval-source-map',// 此选项生成的Source Map能够保证报错行数与源代码行数保持一致。 } 复制代码
在发布的时候尽量关闭Source Map或者把devtool的值设置为nosoures-source-map, 这样能够防止原始代码通过Source Map的形式暴露给别有所图之人，更安全。
只定位行数不暴露源码
如果只想定位报错的具体行数，且不想暴露源码，可以添加如下配置：
module。exports = { mode: 'development', devtool: 'nosources-source-map',// 只定位报错行数 } 复制代码
Source Map最佳实践
- 开发环境下：
建议把devtool的值设置为eval-source-map。 复制代码
- 生厂环境下：
建议把devtool的值设置为nosources-source-map或关闭Source Map。 复制代码
七、webpack使用小技巧
使用@
@表示从src代码源目录，从外往里查找。尽量避免使用../../从里往外找 但使用@之前需要在webpack.confjg.js中添加如下配置：
module。exports = { resolve:{ alias:{ '@': path.join(__dirname, './src/') } } } 复制代码
最后
⚽本文介绍了webpack基本配置和基本使用，希望大家阅读完有一定的收获呦~
⚾如果这篇文章对你有帮助的话，麻烦点赞收藏哟~
