初始webpack
webpack是什么?
静态资源打包工具
中文官网:https://www.webpackjs.com/concepts/
有哪些打包工具?
- gulp
- Grunt
- Pacel
- Webpack
- Rollup
- Vite
基本使用
以一个或多个文件作为打包的入口,将整个项目的文件编译打包出去,将webpack输出的文件叫做 bundle。
两种模式
开发模式:只编译JS中的ES Module语法
生产模式:能编译JS的ESM,还能压缩代码
开始使用
1.npm init 初始化
2.下载好webpack webpack-cli依赖
3.写好入口文件main.js
4.使用打包命令
npx webpack './src/main.js' --mode=development
文件打包会在dist目录下:
五个核心概念:
entry(入口)
output(输出)
loader(加载器)
plugins(插件)
mode(模式)
基本配置:
webpack.config.js
const path = require("path");
module.exports={
// 入口文件
entry:"./src/main.js",
// 文件的输出路径与文件名
output:{
path:path.resolve(__dirname,"dist"), //绝对路径
filename:"main.js",
},
//加载器
module:{
rules:[
//loader的配置
]
},
// 插件
plugins:[
// plugin的配置
],
mode:"development"
}
开发模式要完成哪些事:
1.编译代码,是浏览器识别运行
html资源,样式资源,字体图标,图片等等,webpack默认不能处理这些资源,需要加载配置来编译这些资源。
2.代码质量检查