![](https://img-blog.csdnimg.cn/20201014180756916.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
webpack
文章平均质量分 77
ass_ace
选择你所喜欢的,爱你所选择的
展开
-
webpack知识点总结
webpack是什么?webpack是一种前端资源构建工具,一个静态模块打包器。在webpack看来,前端的所有资源文件都会作为模块处理。它将根据模块的依赖关系进行静态分析,打包生成对应的静态资源。webpack与gulp的区别是什么?webpack与gulp最大的区别就是在于打包过程上有所不同Grunt、Gulp 这类构建工具的打包过程是通过遍历源文件–>匹配规则–>打包,整个过程是基于文件流的打包方式且做不到按需加载。webpack 是从入口文件开始,把相关模块引入通过加载模块–&原创 2021-08-05 22:33:29 · 731 阅读 · 0 评论 -
模拟babal-loader简单实现webpack打包获取所有模块依赖的核心原理
1.核心打包原理:1) 打包的主要流程如下:需要读到入口文件里面的内容。分析入口文件,递归的去读取模块所依赖的文件内容,生成AST语法树。根据AST语法树,生成浏览器能够运行的代码2. 常见的模块解析包@babel/parser:将获取到的模块内容 解析成AST(es6的)语法树@babel/traverse: 遍历AST语法树@babel/core @babel/preset-env:ES6的AST转化成ES5的AST核心代码如下:完整代码地址// 获取主入口文件con原创 2021-03-07 15:16:54 · 2683 阅读 · 1 评论 -
webpack——多页面打包通用方案
我们都知道在webpack的打包配置中,如果要配置webpack的打包入口,直接在配置文件exports的对象中的entry字段配置打包入口。这个entry字段可以接收对象也可以是数组但如果配置文件中的plugins插件数组中的htmlWebpackPlugins对象只有一个的话即打包出来的应用是单页面打包,如果是多个就是多页面打包假如你像实现一个多页面打包的通用配置,应该如何配置呢?目标:src目录下为动态的打包入口,即在src目录每新增一个文件夹,打包入口就多一个;每一个打包入口最后输原创 2021-02-27 23:09:15 · 538 阅读 · 0 评论 -
Webpack 核心模块 tapable 解析(转)
原文出自:https://www.pandashen.com前言Webpack 是一个现代 JavaScript 应用程序的静态模块打包器,是对前端项目实现自动化和优化必不可少的工具,Webpack 的 loader(加载器)和 plugin(插件)是由 Webpack 开发者和社区开发者共同贡献的,而目前又没有比较系统的开发文档,想写加载器和插件必须要懂 Webpack 的原理,即看懂 Webpack 的源码,tapable 则是 Webpack 依赖的核心库,可以说不懂 tapable 就...转载 2021-02-26 23:39:12 · 144 阅读 · 0 评论 -
如何通过webpack配置并部署属于自己的npm包
验证是否成功部署自己的npm包到npm网站上,只需要在部署后,在npm官网搜索自己的npm包名(即,package.json配置中的name字段内容)即可,效果如下,1.npm的功能支持以及达到的效果要求如下,1)实现大整数加法功能;2)实现压缩大打包和非压缩打包;3)支持amd,cjs,ems模块引入;2.创建项目并实现大整数加法功能,mkdir large-numbernpm init -ynpm i webpack webpack-cli -D1) 通..原创 2021-02-21 12:34:12 · 802 阅读 · 0 评论 -
require.context()
require.context()用法:接受三个参数(require.context(directory,useSubdirectories,regExp))directory:说明需要检索的目录useSubdirectories:是否检索子目录regExp: 匹配文件的正则表达式,一般是文件名返回参数require.context返回一个require 函数,此函数可以接收一个参数返回的函数:functionwebpackContext(req) {return __w.转载 2020-06-29 16:45:14 · 486 阅读 · 0 评论 -
package.json配置说明
package.json文件的作用在git上克隆很多项目下来之后我们的第一件事是 npm run install,我们会知道这个指令是为项目下载项目运行所需要的依赖包,但这个指令下载什么包,下载某个包的哪个版本的一句从哪里来呢?答案就是package.json这个文件。package.json定义了这个项目所需要的各种模块,以及项目的配置信息(比如名称、版本、许可证等元数据)。npm i...原创 2020-04-17 22:47:10 · 1569 阅读 · 0 评论 -
webpack中文文档笔记——管理资源、输出
1.webpack的打包入口可以是一个也可以是多个,出口也是可以有一个也可以有多个,完全取决于webpack.config.js的配置。当打包入口有多个,但是又希望,打包的出口可以不用在入口改变的时候,手动维护。那么我们可以修改配置文件,使得出口文件的与入口文件列举的键值一一对应,定义了什么入口文件,就生成什么出口文件。打包出来的文件结构如下:2.HtmlWebpackPlugin上面...原创 2019-12-16 22:14:59 · 192 阅读 · 0 评论 -
CleanWebpackPlugin is not a constructor
在跟着webpack官网增加CleanWebpackPlugin清除插件的时候,发现打包会报如下错误。新版的引用方式已改成 const { CleanWebpackPlugin } = require(‘clean-webpack-plugin’);如果继续使用旧版引用方式,会报 “CleanWebpackPlugin is not a constructor ” 错误正确写法如下:这...原创 2019-12-16 22:04:45 · 167 阅读 · 0 评论 -
webpack中文文档笔记——起步
private :true 确保我们安装包是私有的(private)移除 main :“index.js” 可以防止意外发布你的代码2.webpack 的项目结构中的src文件和打包完的dist文件夹的区别:src “源”代码是用于书写和编辑的代码dist 是构建过程产生的代码最小化和优化后的“输出”目录,最终将在浏览器中加载npm install --save ...原创 2019-12-10 22:59:20 · 454 阅读 · 0 评论 -
webpack基本介绍以及安装使用
title: webpackdate: 2019-04-09 10:10:29tags:-webpack1.什么是webpack? WebPack也叫做模块打包机。 作用:分析你的项目结构,找到JavaScript模块以及其它的一些浏览器不能直接运行的拓展语言(Scss,TypeScript等),并将其转换和打包为合适的格式供浏览器使用。 在 Webpack 里一切文...原创 2019-04-12 21:21:35 · 178 阅读 · 0 评论