充电五分钟...

文章目录普通文件处理普通文件处理普通文件：不是css文件，也不是js文件，而是一些图片/字体文件等通过js 添加的图片，放到src/assets文件夹下//希望导入的模块结果是一个可用的资源路径import png from "./assets/webpack.png"console.log(png)var img = document.createElement("img");img.src = png;document.body.appendChild(img);像上面的代码中：

文章目录关于webpack-dev-serverwebpack-dev-server 原理配置关于webpack-dev-server在**开发阶段**，目前遇到的问题是打包、运行、调试过程过于繁琐，回顾一下我们的操作流程：1. 编写代码 --> 2. 控制台运行命令npx webpack完成打包 --> 3. 打开页面查看效果 – >4. 继续编写代码，回到步骤2并且，我们往往希望把最终生成的代码和页面部署到服务器上，来模拟真实环境为了解决这些问题，webpack官方制作了

文章目录插件1、clean-webpack-plugin -- 清除输出目录2、html-webpack-plugin -- 自动生成页面多页面配置 -- 多使用几次插件，多次实例化3、copy-webpack-plugin -- 复制静态资源 到dist目录下具体用法去 npm官网上 查看插件1、clean-webpack-plugin – 清除输出目录修改代码后，重新打包，dist目录下生成新文件的时候，自动删除dist里的旧文件用法详见npm//webpack.config.js

文章目录1、context -- 配入口和loaders的基准路径2、outputlibrary -- 工程，库--存入口文件导出的结果libraryTarget3、target -- 构建的目标环境4、module.noParse -- 不需要解析的模块5、resolvemodules -- 模块的查找位置extensions -- 配置 自动补全 后缀名alias -- 别名 - 方便导入依赖6、externals1、context – 配入口和loaders的基准路径context:

文章目录1、区分环境方法1：写两个配置文件1、区分环境有些时候，我们需要在webpack.config中 针对生产环境和开发环境分别书写webpack配置方法1：写两个配置文件简单粗暴的，分别写两个配置文件，webpack.dev.js 和 webpack.prod.js，然后在package.json里配置脚本,指定配置文件 "scripts": { "dev": "webpack --config webpack.dev.js", "prod": "we

文章目录1、plugin 作用 -- 把功能嵌入到webpack的编译流程中plugin的写法 -- plugin 如何监听事件的1、plugin 作用 – 把功能嵌入到webpack的编译流程中加载器loader 和 插件plugin 都是扩展webpack的功能的loader的定位是转换代码，把一种格式的代码 转换成另一种格式的代码，eg: css 或者图片 没办法进行语法树分析，要转换成js代码有一些其他的操作难以使用loader完成，比如如下需要把功能嵌入到webpack的编译流程中，而这

文章目录1、1、上节loader 把css代码转成js代码，以变进行语法树分析loader也可以把图片进行打包静态图片：页面直接使用<img src='' alt=''> 来使用,在页面中写死的用js来生成的动态图片：通过ajax请求服务器，得到的图片路径...

希望webpack把样式当成模块，来打包assets文件夹–静态资源 里写样式

文章目录webpack做的事情，仅仅是分析出各种模块的依赖关系，然后形成资源列表，最终打包生成到指定的文件中。更多的功能需要借助webpack loaders和webpack plugins完成。webpack 是为了让我们更方便的写代码，而不用担心代码怎么运行webpack loader： loader本质上是一个函数，它的作用是将某个源码字符串转换成另一个源码字符串返回。loader函数的将在模块解析的过程中被调用，以得到最终的源码。webpack全流程：根据配置分成很多个chunk

文章目录入口和出口的最佳实践具体情况具体分析下面是一些经典场景一个页面一个JS源码结构|—— src|—— pageA 页面A的代码目录|—— index.js 页面A的启动模块|—— …|—— pageB 页面B的代码目录|—— index.js 页面B的启动模块|—— …|—— pageC 页面C的代码目录|—— main1.js 页面C的启动模块1 例如：主功能|—— main2.js 页面C的启动模块2 例如：实现访问统计的额外功能|—— …|—— c

文章目录1、node环境下的./ 和 _dirname2、node里的path模块3、出口4、入口1、node环境下的./ 和 _dirnamenode环境下的./的含义，分2种情况：模块化代码中，比如require("./")，表示当前js文件所在的目录在路径处理中，"./"表示node运行的目录__dirname: 所有情况下，都表示当前运行的js文件所在的目录，它是一个绝对路径2、node里的path模块node内置模块 - path: https://nodejs.o

文章目录1、初始化--融合CLI参数、配置文件、默认配置2、编译1、根据入口模块（默认为./src/index.js）创建一个chunk2、构建所有依赖模块3、输出4、总过程webpack 的作用是将源代码编译（构建、打包）成最终代码整个过程大致分为三个步骤：初始化编译输出1、初始化–融合CLI参数、配置文件、默认配置此阶段，webpack会将CLI参数、配置文件、默认配置进行融合，形成一个最终的配置对象。对配置的处理过程是依托一个第三方库yargs完成的此阶段相对比较简单，主要是

文章目录devtool 配置source map 源码地图webpack中的source mapsource map 源码地图本小节的知识与 webpack 无关前端发展到现阶段，很多时候都不会直接运行源代码，可能需要对源代码进行合并、压缩、转换等操作，真正运行的是转换后的代码这就给调试带来了困难，因为当运行发生错误的时候，我们更加希望能看到源代码中的错误，而不是转换后代码的错误jquery压缩后的代码：https://code.jquery.com/jquery-3.4.1.min.js

文章目录1、命令参数很多时，配置文件更灵活1、命令参数很多时，配置文件更灵活webpack提供的cli/命令支持很多的参数（cli是命令行界面的缩写），例如–mode，但命令很多的时候，我们会使用更加灵活的配置文件来控制webpack的行为默认情况下，webpack会读取webpack.config.js文件作为配置文件，但也可以通过CLI参数--config来指定某个配置文件#修改webpack的配置文件npx webpack --config xx.js配置文件中通过CommonJS模块

文章目录1、分析编译结果的目的 ？2、自己尝试手写dist/main.js3、手写思路1、分析编译结果的目的 ？对webpack的编译结果的认识对分析编译过程有帮助，理解了编译过程对后面使用webpack的加载器和插件的理解有帮助；2、自己尝试手写dist/main.js自己尝试手写dist/main.jswebpack的作用：根据入口文件./src/index.js 分析文件的依赖关系，然后把依赖的模块合并成一个文件my-main.js ：//合并两个模块// ./src/a.js//

模块化兼容性 - es6 和 commonJs互操作时webpack是如何处理文章目录模块化兼容性 - `es6 和 commonJs互操作时webpack是如何处理`1、同模块化标准2、不同模块化标准3、例子：jquery 两种模块化标准导入由于webpack同时支持CommonJS和ES6 module模块化标准，因此需要理解es6 和 commonJs互操作时webpack是如何处理的1、同模块化标准如果导出和导入使用的是同一种模块化标准，打包后的效果和之前学习的模块化没有任何差异co

2、webpack的安装和使用webpack官网：https://www.webpackjs.com/目前的最新版本：webpack4webpack简介webpack是基于模块化的打包（构建）工具，它把一切视为模块它通过一个开发时态的入口模块为起点，分析出所有的依赖关系，然后经过一系列的过程（压缩、合并），最终生成运行时态的文件。webpack的特点：为前端工程化而生：webpack致力于解决前端工程化，特别是浏览器端工程化中遇到的问题，让开发者集中注意力编写业务代码，而把工程化过程中的

文章目录关于笔记1、浏览器端实现模块化的问题根本原因解决办法2、webpack的安装和使用webpack简介webpack的特点：webpack的安装使用3、模块化兼容性 - `es6 和 commonJs互操作时webpack是如何处理`同模块化标准不同模块化标准关于笔记学习webpack的前置知识：ES6、模块化、包管理器、git笔记特点：合适的深度：webpack使用层面很简单，但原理层面非常复杂合适的广度：webpack生态圈极其繁荣，有海量的第三方库可以融入到webpack1、浏

文章目录1.关于模块：2.html里引入模块3.esmodule 的写法打包一个文件配置打包多个文件的配置babel 将es6转译成es5前端模块化基于html的，在html里只需要引用一个模块，然后在这个模块里引用别的模块，自动加载别的模块 例如，我们新建一个main.js 用于整合js，在这里面引其他的文件，通过main.js 自动把其他js加载进来1.关于模块：node的模块分...