脚本宝典收集整理的这篇文章主要介绍了webpack 的基本使用，脚本宝典觉得挺不错的，现在分享给大家，也给大家做个参考。

webpack

概念

前端项目工程化的一个具体解决方案。

主要功能：

• 前端模块化开发支持
• 代码压缩混淆
• 处理浏览器JS兼容性问题
• 性能优化
• ……

好处：

• 程序员能把工作重心放到具体的功能实现上

目前Vue，React等前端项目，基本上都是基于webpack进行工程化开发的。

基本使用

隔行初始化变色的案例

npm install jquery -s	or	npm i jquery -S
npm install jquery --save	# 与上面语义一致

• 使用-S会将包（此处为jquery）的相关信息写入package.json中的dePEndencies

在项目中安装 webpack

npm i webpack@5.42.1 webpack-cli@4.9.0 -D
npm i webpack@5.42.1 webpack-cli@4.9.0 --save-dev		# 与上面语义一致

• 使用-D会将包（此处为webpack、webpack-cli）的相关信息写入package.json中的devDependencies

• devDependencies 里面的插件只用于开发环境，不用于生产环境；dependencies 是需要发布到生产环境的。

• 比如我们写一个项目要依赖于 jQuery，没有这个包的依赖运行就会报错，这时候就把这个依赖写入dependencies ；而我们使用的一些构建工具比如 webpack 这些只是在开发中使用的包，上线以后就和他们没关系了，所以将它写入devDependencies。

在项目中配置 webpack

script 节点下的脚本是可以运行的。

"dev"是脚本的名字，可以自定义，"webpack"是固定写法。

webpack.config.js 中mode的作用

• 'development'：适合在开发阶段使用，打包速度快，不会对代码进行压缩。
• 'PRoduction'：适合在项目发布阶段使用，打包速度慢，对代码进行了压缩。

webpack.config.js 的作用

webpack.config.js 会在运行 npm run dev 命令时被读取，webpack根据其中给定的配置，对项目进行打包。

webpack 中的默认约定

在 webpack 4.x 和 5.x 的版本中，有如下的默认约定：

• 默认的打包入口文件为：src/index.js
• 默认的输出文件路径为：dist/main.js

可以在webpack.config.js中修改这一默认约定。

自定义打包入口与输出路径

在webpack.config.js中，通过entry节点指定打包的入口，通过output节点指定打包的出口。

webpack 中的插件

插件的作用

安装插件可以扩展 webpack 的能力，让它用起来更方便。常用的插件有：

• webpack-dev-server
  • 类似 node.js 的 nodemon
  • 修改源代码后，webpack 会自动进行项目的打包和构建
• htML-webpack-plugin
  • webpack 中的 html 插件
  • 可以通过此插件自定义 index.html 页面的内容

webpack-dev-server

安装

在项目路径下运行如下命令：

npm install webpack-dev-server@3.11.2 -D

配置

• 注意：webpack-dev-server 会启动一个实时打包的 http 服务器

• 引用js文件时需要注意：如果使用 webpack-dev-server 插件来自动打包，生成的js文件会放在内存中，路径为项目根目录（路径可能为output.filename）。（物理磁盘中无法看到）

  

html-webpack-plugin

安装

在项目路径下运行如下命令：

npm install html-webpack-plugin@5.3.2 -D

配置

• 这样配置完后，直接打开 http://localhost:8080/ 就可以看到 index.html 的内容了
• 复制出来的 index.html 会存储在内存中，磁盘里看不见。

一些疑惑

https://juejin.cn/post/6844903853708541959

1. 通过 html-webpack-plugin 插件复制到项目根目录中的 index.html 页面，也被放到了内存中
2. html-webpack-plugin 插件在生成的html文件中，自动注入了一个script标签，该标签的src属性为output.filename

webpack.config.js 中的一些属性

注意：修改了 webpack.config.js ，必须重启实时打包服务器，否则配置无法生效。

devServer

通过devServer属性，可以对webpack-dev-server插件进行更多配置。

webpack 中的 loader

在实际开发过程中，webpack默认只能打包处理以.js结尾的文件，其他非.js结尾的文件需要调用loader才可以正常打包，否则会报错。

loader 的作用：协助webpack打包处理特定的文件模块。比如:

• css-loader 可以打包处理.css相关的文件
• less-loader 可以打包处理.less相关的文件
• babel-loader 可以打包处理 webpack 无法处理的高级 JS 语法

loader 的调用过程

处理css文件

• 如果在入口js文件中引入了css文件，而没有使用css-loader：

  

• 安装和配置 css-loader

  1. 运行如下命令，安装 css-loader

     npm i style-loader@3.0.0 css-loader@5.2.6 -D
     

  2. 在webpack.config.js的 module -> rules 数组中，添加调用 loader 的规则：

     

     其中，test表示匹配的文件类型（正则匹配），use表示这种文件类型要调用的 loader。

• 当 webpack 发现某个文件处理不了的时候，会查找配置文件 webpack.config.js ，看 module.rules 数组中是否配置了相应的 loader。如果有，webpack 把这个文件转交给 module.rules 中的最后一个 loader处理。

• 注意：use 数组中指定的 loader 的顺序是固定的，调用顺序：从后往前调用。

• 所有的 loader 处理完后，将处理结果转交给 webpack，webpack 最终生成了打包好的文件。

处理less文件

1. 运行如下命令，安装 less-loader

   npm i less-loader@10.0.1 less@4.1.1 -D
   

2. 在webpack.config.js的 module -> rules 数组中，添加调用 loader 的规则：

   

处理url路径相关的文件

• 如果在js文件中导入了url路径相关的文件（如图片），而没有调用对应的loader：

  

• 安装和配置 url-loader

  1. 运行如下命令

     npm i url-loader@4.1.1 file-loader@6.2.0 -D
     

  2. 在webpack.config.js的 module -> rules 数组中，添加调用 loader 的规则：

     

     用正则表达式匹配了后缀为.jpg、.png、.gif的文件。

• url-loader 的 limIT 选项

  limit用来控制是否对图片进行base64编码，以减少http请求。

  低于limit大小的图片将会进行base64编码。

  

  单位是字节（Byte）

打包处理js文件中的高级语法

• webpack 只能打包处理一部分的高级 JS 语法。对于那些 webpack 无法处理的高级 JS 语法，需要借助babel-loader进行打包处理。

• 安装和配置 babel-loader

  1. 运行如下命令：

     npm i babel-loader@8.2.2 @babel/core@7.14.6 @babel/plugin-proposal-decorators@7.14.5 -D
     

  2. 在webpack.config.js的 module -> rules 数组中，添加调用 loader 的规则：

     

     一定要写 exclude，避免处理 node_modules 目录中的 .js 文件

  3. 配置 babel-loader

     在项目根目录下，创建配置文件babel.config.js，内容详情参考 Babel 官网

打包发布

为什么要打包发布

配置webpack的打包发布

在package.json的scripts节点下，新增 build 命令：

--mode 是一个参数选项，用来指定 webpack 的运行模式。"production"代表生产环境。

注意：通过--mode指定的参数项会覆盖webpack.config.js中的mode选项

优化图片和js文件的存放位置

按照上面的操作打包发布后，所有的文件都放到了dist目录下，显得比较杂乱。

我们希望能够将图片、js文件放到单独的文件夹中。

js文件

• 更改webpack.config.js中的output节点

  这样webpack打包生成的bundle.js将会放在 js 目录下

  

图片

• 修改webpack.config.js中的 url-loader 配置项，新增outputPath选项

  

  也可以这样写：

  

最终结果

• 运行命令

  npm run build
  

• 可以看到dist目录的结构更清晰了

  

自动清理dist目录下的旧文件

每次用webpack打包发布前，都要手动删除旧的 dist 目录。

为了自动清理掉 dist 目录中的旧文件，我们需要用到插件：clean-webpack-plugin

1. 安装 clean-webpack-plugin

   npm install -D clean-webpack-plugin
   

2. 修改webpack.config.js

   

   CleanWebpackPlugin为什么要加{}？（解构赋值）

   

   

Source Map

引例

当你的 js 代码出错时

由于 webpack 打包生成的输出 js 文件和你写的 js 文件并不完全一致，报错的也就不是第18行。

这种情况下，debug 就会变得十分困难。

因此我们需要用到Source Map。

什么是 Source Map

Source Map就是一个信息文件，里面储存着位置信息。也就是说，Source Map 文件中存储着压缩混淆后的代码，所对应的转换前的位置。

有了它，出错的时候，开发工具将直接显示原始代码，而不是转换后的代码，能够极大的方便后期的调试。

解决方式

eval-source-map

development模式下，在webpack.config.js中添加如下配置：

安全起见，production模式下不建议使用此配置。

@H_954_777@

再次运行，可以看到报错信息里显示的是原始代码了：

nosources-source-map

如果希望能够只看到准确的出错行数，而点击文件时不会看到原始代码，可以进行如下配置：

效果如下：

既方便了调试，也保证了安全性（浏览器端无法看到原始代码）。

最佳实践

• development模式下
  • devtool 的值设置为 'eval-source-map'
• production模式下
  • 不使用 devtool（关闭 Source Map）
  • devtool 的值设置为 'nosources-source-map'

webpack中的'@'

更多：https://blog.csdn.net/yangfengjueqi/article/details/86506813

​ https://webpack.js.org/configuration/resolve/#resolve-alias

@是 webpack 设置的路径别名，一般代表src目录。

可以在webpack.config.js中进行配置：

在 import 时常常使用@符号。

脚本宝典总结

以上是脚本宝典为你收集整理的webpack 的基本使用全部内容，希望文章能够帮你解决webpack 的基本使用所遇到的问题。

如果觉得脚本宝典网站内容还不错，欢迎将脚本宝典推荐好友。

本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ：384754419，请注明来意。