![](https://img-blog.csdnimg.cn/20201014180756913.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
webpack
文章平均质量分 93
yanwuhc
实践出真知。
展开
-
手写一个简易版的mini-webpack
在写一个mini-webpack之前,需要先了解一个概念:AST。AST(abstract syntax tree)抽象语法树抽象语法树:在计算机科学中,抽象语法树,或者成为语法树,是源代码语法结构中的一种抽象表示。它以树状的形式表现编程语言的语法结构。树上的每个节点都表示源代码中的每个结构。个人理解就是:AST抽象语法树根据JavaScript代码解析得到,JavaScript代码中的各个部分都可以在AST中表示出来。AST的形成了反映出各部分代码之间的关系。手写Webpack的核心思想我们可原创 2021-09-10 01:14:29 · 155 阅读 · 1 评论 -
笔记 | webpack学习笔记
学习准备nodejs 10以上Webpack 4.26版本以上基本Nodejs只是和npm指令熟悉ES6语法第一章 webpack简介1.1 webpack是什么?webpack是前端资源构建工具,一个静态模块打包器。将前端一系列需要构建的工具整合到一个东西上面,比如对less文件的预处理、es语法的处理等其他。webpack打包过程:先从入口文件index.js开始。将每一个依赖都记录好,形成一个依赖关系树状图。根据依赖关系图形成一个chunk代码块。对代码块进行各项处原创 2021-07-19 21:02:52 · 188 阅读 · 0 评论 -
笔记 | webpack的更多用法
下面记录一下关于webpack的几个更多的使用方法。(1)对于module.exports={ mode:'development',}在ES6中的写法是:export default{...}导入的时候是:import ... from 'id'(2)对于前一篇文章所述,每当我们修改原来的js文件之后,总是需要使用 npm run dev来对main.js进行更新,显然是很繁琐的事情。对于这个问题,可以有下面的解决方法。在终端输入指令,安装webpack-dev-serve原创 2020-09-13 22:23:12 · 94 阅读 · 0 评论 -
webpack结合VScode的基本使用方法
先打开vscode,打开项目文件夹,同时打开终端。输入代码npm init -y进行初始化。初始化完成后,会出现一个叫package.json文件,里面有相关配置信息。因为这是一个前端项目,所以需要创建一个src文件夹,同时创建相关的html、css、JavaScript文件。并写入自己的代码。<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <met原创 2020-09-13 21:10:16 · 1598 阅读 · 1 评论