webpack

背景 统一以及收拢与h5与app常用桥接方法，方便业务研发通过内部sdk方法快速上手相关业务功能，也方便基础库研发人员的维护与开发。 项目初始化 终端输入 package.json配置打包指令 rol

1、webpack、babel.config.js与babel-loader之间的关系 Webpack是打包工具，定义入口文件，将所有模块引入整理后，通过loader和plugin处理后，打包输出。

webpack介绍 Webpack是一个模块打包工具，其最核心的功能是解决模块之间的依赖，把各个模块按照特定的规则和顺序组织在一起，最终合并为一个JS文件（有时会有多个，这里讨论的只是最基本的情况）

参考资料 compiler对象官方说明 webpack自定义hook 背景 当我们想要监听webpack打包的过程，并且在webpack的每个生命周期中(hooks)执行一些自己自定义的操作，那么我们

参考资料 玩转 webpack，使你的打包速度提升 90% 背景 当项目使用webpak进行打包后，随着项目的迭代，项目体积会越来越大，打包构建的速度会越来越慢。需要使用一些wepack构建优化的方法

项目初始化 在根项目创建以下几个文件。 package.json 根目录创建并编辑package.json,内容如下： tsconfig.json 根目录创建并编辑tsconfig.json,内容如下

学习资料 https://developer.aliyun.com/article/61047 webpack运行流程图

背景 为了优化图片资源，使用了webp图片，但是webp图片兼容性不好，需要使用pciture标签做兼容处理。于是萌生想在开发者无感知的情况下自动将代码里面的img标签转成picture标签，并对图片

步骤1、安装vue-cli 步骤2、新建通过vue-cli搭建的项目 选择默认版本 步骤3、新建存放旧项目的文件夹 步骤4、项目迁移 第一步 在newProject文件夹的根目录下新建src文件夹，将

安装 配置文件信息 webpack.config.common.js babel.config.js 不像vue，配置react的重点在babel.config.js这个文件。 参考资料 https:

html-webpack-plugin 作用 官方文档 clean-webpack-plugin 作用 官方文档 mini-css-extract-plugin 作用 官方文档 css-minimiz

概念 webpack是一个静态模块打包工具。当 webpack 处理应用程序时，它会在内部构建一个依赖图，此依赖图对应映射到项目所需的每个模块，并生成一个或多个 bundle。 入口 依赖图的起点，根