qq_36132291的博客

1、Webpack 的构建流程主要有哪些环节？如果可以请尽可能详尽的描述 Webpack 打包的整个过程。 根据配置文件里entry找到打包入口文件 顺着入口文件代码里的import或require之类的语句，解析推断文件所依赖的资源模块 分别去解析每个资源模块对应的依赖，最后形成一颗依赖树， 递归依赖树，找到每个节点对应的资源文件， 根据配置文件 rules 属性，找到资源模块所对应的加载器， 交给对应的加载器加载对应的资源模块， 最后将加载以后的结果放入到bundle.js打包结果里， 实现整个项目的打

不同环境下的不同配置的两种方式 配置文件根据环境不同导出不同配置 一个环节对应一个配置文件 1、配置文件中添加判断 环境名参数 返回不同的配置参数（中小型项目） const webpack = require('webpack') const { CleanWebpackPlugin } = require('clean-webpack-plugin') const HtmlWebpackPlugin = require('html-webpack-plugin') const CopyWebpackP

1、自动清除输出目录文件插件 clean-webpack-plugin const { CleanWebpackPlugin } = require('clean-webpack-plugin') module:{ plugins:[ //clean-webpack-plugin new CleanWebpackPlugin(); ] } 2、自动生成html插件 html-webpack-plugin ...

Source Map 调试和报错都是基于经过webpack打包转换之后的运行代码来进行的，要解决这个问题，利用source map来映射源代码与转换代码之间的关系，转换之后的代码，通过source map逆向解析，可以得到源代码。 开发过程中帮助定位问题，生产环境中无实际意义 例：在jquery-3.4.1.min.js中最后一行添加 //# sourceMappingURL=jquery-3.4.1.min.map 即可在运行程序调试源代码 webpack 配置使用 Source Map //配置开发过

模块打包工具 1、模块打包的由来 ES Modules存在浏览器兼容问题 模块文件过多，网络请求频繁 所有的前端资源都需要模块化 webpack模块打包器