![](https://img-blog.csdnimg.cn/20201014180756926.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
webpack
文章平均质量分 59
JIseven
这个作者很懒,什么都没留下…
展开
-
webpack【插件---持续更新】
webpack4通过mini-css-extract-plugin分离css文件再通过optimize-css-assets-webpack-plugin压缩 css原创 2021-12-15 18:29:56 · 764 阅读 · 0 评论 -
webpack之plugins 【常用插件集合】
1: 提取 “公共类库/打包公共代码” 插件 在基于Webpack构建的多页面应用中,每个页面配有唯一的入口文件,即使多个入口使用了相同的类库(比如jQuery),也会各自打包进自己的js文件中,这样无疑增加了额外的代码量。传统的前端项目并没有这样的问题,因为那个时候没有模块打包这样的过程,多个页面会引入公共的静态资源。 Webpack的CommonsChunkPlugin可以分析出各个入口文件中引用的公共代码片段,然后将其提取出来,作为公共类库供各个入口文件使用plugi...原创 2021-11-16 14:57:42 · 633 阅读 · 0 评论 -
webpack-dev-server【devServer属性配置】
前言: DevServer是webpack开发服务器。webpack-dev-server: 是一个本地开发服务器,会自动监听变化,自动打包构建,自动更新刷新浏览器特点:不会产生dist文件,将打包结果暂时存在内存中,内部的http-sever访问这些文件并读取数据,发送给浏览器 减少磁盘的读取,提高构建效率写法:在webpack.config.js文件中,通过属性devServer: { } 设置与 webpack-dev-server相关的配置安装:下载安装...原创 2021-11-12 18:01:54 · 17421 阅读 · 1 评论 -
Webpack基本
1、Webpack 的构建流程主要有哪些环节?如果可以请尽可能详尽的描述 Webpack 打包的整个过程。前言: webpack构建运行在 node.js环境下,它的配置文件遵循CommonJS规范, webpack.config.js 导出一个object对象webpack打包流程如下:1: 初始化参数: 根据用户在命令窗口输入的参数 和 webpack.config.js文件配置的参数,形成最后的配置结果2: 开始编译: 通过前...原创 2021-10-11 16:23:01 · 77 阅读 · 0 评论 -
webpack源码 -【构建流程】(一)
tapable是什么?有什么作用? tapable 是一个类似于 Node.js 中的 EventEmitter 的库,但更专注于 自定义事件的 触发 和 处理 tapable创建各种钩子 插件将自己的方法注册到对应钩子上,交给 webpack webpack 编译时,会适时地触发相应钩子,因此也就触发了tapable的方法tapable与webpack之间的关联? webpack 通过 tapable 将实现与流程解耦,所有具体实现通过 插件的形式存在。 ...原创 2021-08-16 18:44:15 · 124 阅读 · 0 评论 -
webpack-【打包结果运行原理】
webpack 是一个模块打包器,在它看来,每一个文件都是一个模块。无论你开发使用的是 CommonJS 规范还是 ES6 模块规范,打包后的文件都统一使用 webpack 自定义的模块规范来管理、加载模块。本文将从一个简单的示例开始,来讲解 webpack 模块加载原理。CommonJS 规范假设现在有如下两个文件:// index.jsconst test2 = require('./test2')function test() {}test()test2()//原创 2021-08-01 21:19:18 · 1361 阅读 · 0 评论 -
webapck【webpack-dev-Server 配置:解决开发阶段接口跨越问题】
如上图所示我们需要:解决问题:开发阶段接口跨越问题目标:将GitHub API代理到 本地开发服务器上前言:webpack Dev Server支持配置代理-API1: 配置 webpack.config.jsconst CopyWebpackPlugin = require('copy-webpack-plugin')module.exports = { // devServer属性专门为 webpack-dev-server指定配置选项 devServer: ..原创 2021-08-09 15:19:33 · 350 阅读 · 0 评论 -
如何用webpack开发一个插件
目标: 我没想要开发一个插件,用来删除 打包文件 (dist/*.js) 的注释前言: webpack 要求插件,必须是一个函数或者是一个包含 apply 方法的对象 emit 钩子:是 webpack即将往输出目录输出时执行的钩子函数1:在 webpack.config.js 里面定义 插件 并 加载插件 我们自定义一个插件。插件名字叫 MyPlugin// 定义插件:MyPluginclass MyPlugin { // apply()在...原创 2021-08-09 14:53:48 · 1008 阅读 · 2 评论 -
如何用 webpack 开发一个loader
设想:创建一个markdown-loader,用来加载 .md 文件目录结构如下:具体步骤如下:1: 新建一个 about.md 文件, main.js 引入 about.md about.md# 关于我我是sevenJi ,一个纠结大王~ main.jsimport about from './about.md'console.log(about)2: 创建一个markdown-loader.js: 我们自定义的 loader 用来加载 ....原创 2021-08-03 10:58:21 · 681 阅读 · 1 评论