Webpack简述

一、为什么要构建工具

人类喜欢书写的代码以及开发方式计算机不喜欢,构建工具的作用就是让人类舒舒服服写自己喜欢的代码,然后一打包生成计算机喜欢的代码

第一个webpack自身仅仅是将我们引入的模块打包成一个文件(编译import),至于es6,ts等等的编译是引入的插件和loader做的

二、webpack的基础配置

通过js引入关系建立树,然后最终打包成一个js

webpack本地的版本和项目的版本不一样

直接输入指令,npm run dev调用会使用本地的webpack进行打包

1.打包配置命名

默认以根目录下的webpack.config.js作为入口进行打包,如果想指定文件作为入口

要用commonjs(require)的语法规范写,不能用es6(import export default)

2.mode的三个取值

  • none:直接打包,不做处理

  • 生产模式(production):压缩和简化代码

  • 开发模式(development):不会压缩和简化代码

3.基本格式

loader

三、webpack处理js

1.babel-loader的配置

javascript 复制代码
npm install babel-loader @babel/core

babel-loader作为接口安装真正编译的包@babel/core

loader定义对某种类型的处理方案

2.options配置

也可以将presets配置放在.babelrc的文件中以json格式书写

3.eslint的工作

在根目录下新建一个eslintrc.js文件,用于写eslint的插件配置

相关推荐
会豪7 小时前
Electron-Vite (一)快速构建桌面应用
前端
中微子7 小时前
React 执行阶段与渲染机制详解(基于 React 18+ 官方文档)
前端
唐某人丶7 小时前
教你如何用 JS 实现 Agent 系统(2)—— 开发 ReAct 版本的“深度搜索”
前端·人工智能·aigc
中微子7 小时前
深入剖析 useState产生的 setState的完整执行流程
前端
遂心_7 小时前
JavaScript 函数参数传递机制:一道经典面试题解析
前端·javascript
小徐_23337 小时前
uni-app vue3 也能使用 Echarts?Wot Starter 是这样做的!
前端·uni-app·echarts
RoyLin8 小时前
TypeScript设计模式:适配器模式
前端·后端·node.js
遂心_8 小时前
深入理解 React Hook:useEffect 完全指南
前端·javascript·react.js
Moonbit8 小时前
MoonBit 正式加入 WebAssembly Component Model 官方文档 !
前端·后端·编程语言
龙在天8 小时前
ts中的函数重载
前端