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

相关推荐
曦樂~4 小时前
【Web Development】02 CSS
前端·css
风骏时光牛马4 小时前
后端服务接口开发与数据逻辑处理
前端
东鹏特饮4 小时前
经典打砖块(Breakout)游戏
前端·css·css3
IT_陈寒4 小时前
Vite的HMR把我整不会了:一个生产环境的热更新坑
前端·人工智能·后端
Mh5 小时前
如何使用双缓冲优化视频切换
前端
risenav5 小时前
低头蓄力,抬头起跳:《萤虫跳跳》的 Rokid AIUI 开发实战
前端
ZhengEnCi5 小时前
如何看待 Fable 5.2 用纯代码生成 1.4MB 视觉作品:光追、水面、倒影、火光的程序化生成原理
前端
再吃一根胡萝卜6 小时前
DSH 插件的 Host 与 Client:为什么「只加载了 Host」,以及要不要自己写 Client 加载器
前端
parade岁月6 小时前
AI 写的前端代码为什么总像 5 年前的?Chrome 官方出手了
前端
tryCbest7 小时前
Vue系列——第 15 篇:内置组件全家桶——Transition、Teleport、Suspense、KeepAlive
前端·vue.js