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的插件配置

相关推荐
卸任2 小时前
Vibe coding工具使用心得
前端·ai编程
brien93 小时前
为什么模型标称 1M,Google Antigravity 聊到 256K 却突然失忆?我们给它做了个原生行内监控圆环
前端
修炼的dance3 小时前
录屏关键帧间隔多少合适?六档实测,2秒到10秒小了75.6%
前端
Lank_M3 小时前
关键帧从1秒拉到10秒,录屏小87.3%,摄像头小10.8%
前端
补码缩写3 小时前
用 ffprobe 拆录屏,八成字节在 29 个关键帧上
前端
百思不得小李3 小时前
一个复杂的动态表单是如何实现的
前端·设计模式
陈随易3 小时前
Cmder 停更 17 个月,2.0 支持 Windows Terminal
前端·后端·程序员
风骏时光牛马4 小时前
前沿视界
前端
kyriewen4 小时前
我扫了 814 个依赖,97 个还敢要 Node 10
前端·javascript·程序员
陈随易4 小时前
3000 万人在用的翻译插件,重写一遍就是一门生意
前端·后端·程序员