webpack--》webpack底层深入讲解，从初识到精通，真正实现从0到1的过程

推荐整理分享webpack--》webpack底层深入讲解，从初识到精通，真正实现从0到1的过程，希望有所帮助，仅作参考，欢迎阅读内容。

文章相关热门搜索词:,内容如对您有帮助，希望把文章链接给更多的朋友！

目录

webpack

webpack的基本使用

安装

配置

修改自定义打包的入口与出口

优化js或图片的存放路径

配置webpack中@符号的使用

webpack中相关插件安装

webpack-dev-server

html-webpack-plugin

clean-webpack-plugin

webpack中的loader

打包处理css文件

打包处理less文件

打包处理样式表中与url路径相关的文件

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

webpack的打包与发布

配置build命令

Source Map

webpack是前端项目工程化的具体解决方案。其主要功能为：它提供了友好的前端模块化开发支持，以及代码压缩混淆，处理浏览器端JavaScript的兼容性、性能优化等强大的功能。

前端工程化：在企业级的前端项目开发中，把前端开发所需的工具、技术、流程、经验等进行规范化、标准化。企业级中的 Vue 和 React 项目，都是基于工程化的方式进行开发，其好处为：前端开发自成体系，有一套标准的开发方案和流程。

要想使用webpack，肯定是要先安装了，在终端运行如下命令，安装webpack相关的两个包：

这里我直接默认下载最新版本，后期如果出现版本问题，在指定相关版本的修改即可。

下载完成之后就会出现在 package.json 的文件里面，显示的版本信息如下：

在项目根目录中，创建 webpack.config.js 的webpack配置文件，并初始化如下配置：

如下两种模式讲解一下：

开发时候使用development，因为追求的是打包速度，而不是体积

发布上线的时候使用production，因为上线追求的是体积小，而不是打包速度快

在package.json的scripts节点下，新增 dev 脚本如下：

script 节点下的脚本,可通过 npm run 执行,如: npm run dev

在终端运行 npm run dev 命令，启动 webpack 进行项目的打包构建。 执行命令后，当前根目录就会出现一个 dist 名字的文件夹，里面有 main.js 将html页面引入的js文件换成main.js即可。

webpack.config.js文件的作用：

webpack.config.js是webpack的配置文件，webpack在真正开始打包构建之前，会先读取这个配置文件，从而基于给定的配置对项目进行打包。注意：由于webpack是基于node.js开发出来的打包工具，因此在它的配置文件中，支持使用node.js相关的语法和模块进行webpack的个性化配置。

webpack中的默认约定：

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

默认的打包入口文件为 src -> index.js

默认的输出文件路径为 dist -> main.js

注意：可以在 webpack.config.js 中修改打包的默认约定

根据上文webpack是有默认打包的入口与出口路径文件的，如果想修改的话，看如下操作：

在 webpack.config.js 配置文件中，通过 entry 节点指定打包的入口。通过 output 节点指定打包的出口，当然这些参数也是修改我们自己进行配置的，如下：

根据上文的介绍的自定义打包的入口和出口，我们可以把js文件统一放在生成的文件名里面便于管理，如下：

在进行优化图片路径时，这个先忽略，看完下文的loader配置在看这个地方：

在我们在index.js文件中进行导入外部文件，通过需要 ../../../ 的形式从里向外导入，属实有点麻烦，所以我们进行配置一个 @符号 规定 @符号就是在 src 目录下开始的，这样我们在进行导入的时候就不是从里往外而是从外往里了，比较的方便，配置过程如下：

我们在进行webpack打包时，为了提高代码的打包更新提交速率，也是需要借助一些插件的使用，通过安装和配置第三方的插件，可以拓展 webpack 的能力，从而让 webpack 用起来更方便。最常用的webpack插件有如下几个：

类似于 node.js 阶段用到的 nodemon 工具，每当修改了源代码，webpack会自动进行项目的打包和构建，会启动一个实时打包的 http 服务器。

运行如下命令，即可在项目中安装此插件：(不指定版本号，默认下载最新版本)

接下里进行 webpack-dev-server 插件配置：

修改 package.json -> scripts 中的 dev 命令，如下：写上webpack-dev-server 即可。再次运行 npm run dev 命令，重新进行项目打包。

当我们打包完成，如果像往常一样，右键vscode的 Open with Live Server 打开网站是没有任何作用的，需要 Ctrl + 点击 打包出现的网址，如下：

打开网站仍然没有任何变化，原因如下：

原来webpack-dev-server 打包好的main.js是托管到内存中，并不会显示到物理磁盘中，所以在项目根目录中看不到；但是，我们可以认为，在项目根目录中，有一个看不见的main.js，所以我们应该把html文件中的main.js修改为如下路径：

修改完成之后我们访问控制台上  http://localhost:8081/  网址，点击src文件夹就能看到我们实时更新的index.html网站了。

注意！！！：

如果你是第一次使用webpack的话，安装这个webpack-dev-server插件可能会出现许多问题，推荐看一下我之前在 React 中对webpack的讲解，里面详细介绍了初学者使用webpack出现的一系列问题：点击右边网站 —> webpack-dev-server出现的一系列问题讲解

通常我们所知，内存和物理磁盘相比，内存的运转速度是最快的，处于性能的考虑，devserver把打包好的文件放到内存当中去托管也就是上文我们讲到的mian.js这个文件，现在我们要把首页index.html也托管到内存当中去，这时就要借助我们现在讲的这个插件了。

执行如下命令进行安装插件：（默认安装最新版本）

安装完成之后就开始在webpack.config.js文件中对该配件进行相关配置：

配置完成之后，我们在终端打开本地链接打开网站就不需要在进行点击src文件进入了，而是直接进入。右键点击查看网页源代码，如下：

可以看出源代码多出一个main.js，html-webpack-plugin这个插件有个能力，能自动把打包好的main.js追加到我们的页面当中去。所以说有了我们就不需要再引入main.js了，插件会自动处理这个问题。所以注释掉即可，不会影响页面运行。

那么可不可以当我们在终端运行了 npm run dev 的时候就能自动帮我们打开页面呢，答案是可以的，在webpack.config.js 配置文件中，可以通过devServer节点对webpack-dev-server插件进行更多的配置，案例如下：

如果有杀软的朋友，在第一次执行此操作会有杀软的弹框提示，点击允许即可。

我的React文章对webpack中这个插件也有讲解，大家可以相互看一下：React中的插件讲解

为了在每次打包发布时自动清理掉dist目录中的旧文件，可以安装配置这个插件，能帮助我们自动清理dist目录下的旧文件。

终端执行以下命令进行安装插件：(默认安装最新版本)

安装完成之后，我们需要在webpack.config.js文件中进行相关配置：

配置完成后，下次再重新编译打包时，会自动删除dist中的旧文件，再重新生成。

在实际开发过程中，webpack默认只能打包处理以 .js 后缀名结尾的模块。其他非 .js 后缀名结尾的模块，webpack默认处理不了，需要调用 loader 加载器才可以正常打包，否则会报错！

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

css-loader：可以打包处理 .css 相关的文件

less-loader：可以打包处理 .less 相关的文件

babel-loader：可以打包处理webpack无法处理的高级JS语法

终端执行以下命令，安装处理css文件的loader：(默认安装最新版本)

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

其中：test表示匹配的文件类型；use表示对应要调用的loader。注意：use数组中指定的loader顺序是固定的；多个loader的调用顺序是：从后往前调用。

原理：webpack把index.css这个文件，先转交给最后一个loader进行处理(先转交给css-loader)，当css-loader处理完之后，会把处理的结果，转交给下一个loader(转交给style-loader)，当style-loader处理完毕之后，发现没有下一个loader了，于是把处理的结果转交给了webpack，webpack把style-loader处理的结果，合并到 /dist/index.js 中，最终生成打包好的文件。

所以接下里我们在源文件，即index.js中导入css模块，如下图所示：

导入之后，不需要再index.html文件中引入css文件了，直接再css文件中书写样式，打包之后，我们想要的样式即会出现在页面上。

终端执行以下命令，安装处理less文件的loader：(默认安装最新版本)

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

所以接下里我们在源文件，即index.js中导入less模块，如下图所示：

导入之后，不需要在index.html文件中引入less文件了，直接再less文件中书写样式，打包之后，我们想要的样式即会出现在页面上。 

在终端执行以下命令，安装处理图片文件的loader：(默认安装最新版本)

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

其中 ? 之后的是loader参数项，limit用来指定图片的大小，单位是字节(byte)，只有<=limit 的大小的图片，才会被转为 base64 格式的图片。

所以接下里我们在源文件，即index.js中导入图片模块，并给其动态赋值如下图所示： 

webpack只能打包处理一部分高级的JS语法，对于那些webpack无法处理的高级js语法，需要借助于babel-loader进行打包处理。如下的高级语法，webpack是无法识别的，需要下载相关loader处理。

安装 babel-loader 相关包：

在终端执行以下命令，下载相关依赖的包：(默认下载最新版本)

在webpack.config.js的module -> rules 数组中。添加 loader 规则如下：

配置 babel-loader

在项目根目录中，创建名为 babel.config.js 配置文件，定义 Babel 的配置项如下：