Webpack 打包

模块打包工具的由来

ESM存在兼容问题（主流浏览器解决了）

模块打包工具概要

可以通过webpack把零散的文件打包到一个js中，通过下面这个进行代码兼容处理（转ES5）

可以根据我们意愿进行拆分打包，把想打包到一起的文件组织起来，形成一个程序运行时所需的文件，后面需要的文件，用户点击后再加载，这样就可以渐进式加载，不会导致文件过碎或过大

Webpack 快速上手

可对前端所以资源进行模块化。

yarn webpack 进行打包，会先从src index.js打包

Webpack 配置文件

webpack4后支持零配置启动打包。默认src/index.js为打包入口

如何自定义路径
根目录传教webpack.config.js文件（这个文件运行在node环境需要安装COMJS方式编写代码）

Webpack 工作模式

这个模式大大减少了webpack的使用复杂度，可以理解为 针对不同环境的几组预设配置。
如果用默认的生产模式，打包后的结果无法查看源码

开发模式的代码

mode none

主要就这三种工作模式
配置中指定

Webpack 打包结果运行原理

本次演示mode none进行打包，这样就可以看到最原始的代码

打开浏览器调试看运行过程

接受到俩个对应的模块函数

单步调试往下走

跳过一些不重要的 一直到

加载这个函数，先判断require有没有被加载过，如果有就缓存里读，没有就创建新对象

调用函数

其实打包过后的代码不会很复杂
只是把我们的模块放到了同一个文件中。

Webpack 资源模块加载

可以打包任意资源，这里css为立，运行后报错，因为还没安装css-loader

webpack默认只解析js代码，所以编译对应的代表需要loader 例如css-loader

yarn add css-loader --dev
配置

这时打开网页并没有效果，其实是webpack打包了 但是还没有使用，需要安装另一个loader
这个的作用就是把转换后的结果 通过style标签的形式追加到页面上
yarn add style-loader --dev
配置 这里注意，配置了多个loader 执行顺序是从后往前 就是下面的先执行

Webpack 导入资源模块

打包入口=启动入口

入口还是js，css在文件中import即可

规范上 css和js应该单独写，为什么webpack建议我们import呢? 因为

webpack的思想哲学，用到的地方就得导入

Webpack 文件资源加载器

yarn add file-loader --dev
配置

运行服务器后发现找不到图片，因为webpack默认打包后的文件在根目录，我们可以通过配置告诉webpack打包后的文件在那

入口函数中发现

运行服务器，可以显示了

找到对应loader 任何拷贝文件到对应目录

Webpack URL 加载器

除了拷贝处理物理文件外，还有通过dataurl表示的方法也非常主流，

dataUrls是一种特殊的协议，可以用url表示一个文件

使用这种的话就不需要发生http请求。

示例

图片

这样就可以用dataulrs表示任何文件了

yarn add url-loader --dev
配置

运行后就不生产图片文件了

此时bundel中导出的不是图片路径 而是url

适合小文件不然过大影响速度

可以通过配置上面的用法

注意，file-loader一定要安装，因为超过10kb就会调用file-loader
不然报错

Webpack 常用加载器分类

原文地址：https://blog.csdn.net/weixin_45345105/article/details/110409018