创建一个文件夹 这个文件夹 用来使用 webpack 的 npm init - y 初始化文件 引入 webpack webapck-cli 如： yarn add webpack webapck-cli -D 新建src目录 mkdir src 创建 index.js a.js b.js inde
转载
2020-03-21 18:02:00
78阅读
2评论
增加插件 在 hand-webpck 文件夹下引入插件 less 在src 下新增 index.less index.less @nice-blue: #5b83ad; body { background: @nice-blue; } 在 webpack.config.js 配置使用的模块 let
转载
2020-03-21 23:06:00
101阅读
2评论
在m-pack 通过path 引入 webpack.config.js let config = require(path.resolve('webpack.config.js')); console.log(config) 输出： { mode: 'development', entry: './
转载
2020-03-21 21:51:00
48阅读
2评论
编写 emitFile 方法 emitFile() { // 打包输出的路径 let main = path.join(this.config.output.path, this.config.output.filename) console.log(main, 'test') this.asset
转载
2020-03-21 22:45:00
54阅读
2评论
手写webpack核心原理[toc]一、核心打包原理1.1打包的主要流程如下需要读到入口文件里面的内容。分析入口文件，递归的去读取模块所依赖的文件内容，生成AST语法树。根据AST语法树，生成浏览器能够运行的代码1.2具体细节获取主模块内容分析模块安装@babel/parser包（转AST）对模块内容进行处理安装@babel/traverse包（遍历AST收集依赖）安装@babel/core和@b
原创
2020-10-22 12:27:29
405阅读
缘起jquery 时代，javascript 的模块化只能在 node 端实现，前端页面只能这么写前端复杂页面，引入无尽的脚本前端<script src="./a.js"></script><script src="./b.js"></script><script>console.log('a==>>', a); consol
转载
2021-02-03 10:11:07
278阅读
2评论
目录： 基本概念 loader开发入门 本地loader调试 发布并引用loader Demo: 雪碧图loader 1. 基本概念 众所周知，webpack是个模块打包器。但是webpack只能处理js和json文件。 loader 让 webpack 能够去处理其他类型的文件，并将它们转换为有效 ...
转载
2021-09-25 21:53:00
158阅读
2评论
.box{width:100px;height:100px;background-image:url('./public/img.jpg')}webpack无法直接找到public文件夹，需要将url里面的路径转为require引入的形式function loader(source){ let reg=/url\((.+?)\)/g let pos=0; ...
原创
2021-09-03 13:39:05
425阅读
前言前端性能优化是一个老生常谈的话题，关于性能优化的技术文档和书籍都特别多。如果大家想深入学习前端性能优化相关内容，有以下推荐雅虎军规35条某东上搜“前端性能优化”，书籍也特别多。但是前端性能优化做的所有工作，都和一个灵魂拷问有极大的关系：在浏览器输入url后，发生了什么？首先url是一个域名，首先它要被解析成ip地址。如果你的设备之前访问过该url，那么本地可能会缓存ip地址。如果没有缓存过，那
原创
2022-09-28 13:09:09
163阅读
序言对于webpack来说，loader和plugin可以算是需求程度最为广泛的配置项了。但是呢，单单止步于配置可能还不够。如果我们自己有时候想要diy一个需求，但是webpack又没有相关的loader和plugin。那这个时候我们可能就得开始造点轮子来供给自己使用了。因此，在今天的文章当中，将带领大家手写一个简易的loader和plugin，并学会如何在项目中运用自己所编写的loader和pl
原创
2022-09-28 13:17:01
128阅读
手写webpack核心原理一、核心打包原理1.1 打包的主要流程如下1.2 具体细节二、基本准备工作三、获取
原创
2022-03-28 11:05:19
318阅读
一、webpack 打包编译的主要流程compiler 的流程：将 webpack.config.js 作为参数传入 Compiler 类 (entry-options）创建 Compiler 实例调用 Compiler.run 开始编译 （make）创建 Compilation（ compiler 内创建 compilation 对象，并将 this 传入，compilation 就包含了对 c
转载
2021-02-03 10:38:46
428阅读
2评论
1.全局安装webpack4.xcnpminstallwebpackwebpack-cli--g2.初始化npmcnpminit--y(默认都是yes)3.安装依赖包cnpminstall4.在package.json文件添加“private”:true(防止npm发布私有包）
原创
2019-12-08 23:19:01
314阅读
点赞
webpack这类的打包工具，能帮助我们把用esModule组织起来的代码打包到一个js文件中，在浏览器中运行。实现前端项目的模块化，同时优化请求数量，文件大小等。
话不多说，我们自己来实现一个类似的bundler,对模块化的前端代码进行打包，输出能在浏览器运行的js文件。 ...
转载
2021-09-15 15:27:00
162阅读
2评论
Learn how to use the new Webpack Dashboard from Formidable Labs to display a pretty, useful output for monitoring the status of your webpack builds. T
转载
2016-08-17 02:49:00
229阅读
2评论
Great improvements and optimizations can be made to the output of bundled code. Prepack provides the ability to optimize code at build-time, producing
转载
2017-05-05 18:37:00
236阅读
2评论
1. 初识webpack 安装 Webpack 在安装 Webpack 前，你本地环境需要支持 node.js。 使用 npm 安装 webpack： npm install webpack webpack-cli -g //全局安装 npm install webpack webpack-cli ...
转载
2021-10-20 19:50:00
201阅读
2评论
什么叫webpack：webpack 是一个模块打包工具,起初它只能打包js文件，发展到现在可以打包任何
原创
2019-12-02 22:02:41
238阅读
目录1. 什么是webpack？1.1 JavaScript模块化1.2 CSS模块化1. 什么是webp
原创
2022-07-12 21:07:59
253阅读
CSS有Less、Scss、Stylus等预处理器，它们使CSS可以和编程语言一样有变量、控制语句等功能，这大大提高了CSS代码复用率、开发效率。 JavaScript有TypeScript、Flow等超集，TypeScript使得JavaScript更适合开发大型应用软件，减少多人协同开发带来的， ...
转载
2021-10-01 23:33:00
367阅读
2评论
