webpack的一些基础

Posted 2021-06-14 少林寺的智清大师

1. wobpack有什么用?
打包整合压缩转译你的代码

2.webpack的本质是什么？
第三方的包，需要下到当前工程里

3.webpack基础使用
(1):初始化package.json-

(2).yarn add webpack webpack-cli  -D

(3): package.json里配置自定义命令("build": "webpack")

(4):(重要)编码 - 所有的代码都要和入口”有直接或间接引入关系才会被webpack一起打包

4. webpack默认的入口和出口
入口： src/index.js
出口:    dist/main.js

 

5. webpack相关的配置

webpack.cpnfig.js 

entry - 入口

output - 出口

6.(重要)编写代码是开发环境 · 运行的都是打包后的代码
webpack-插件:更多的功能
htal-meopack-plugin(自动生成htn1文件-自动引入打包后的一切)

（重要)webpack默认只能识别js文件
 

7. webpack-加载器:处理更多类型的文件
css-loader:解析css文件
style-loader:把css插入到0OM上去