1、定义
webpack的本质是一个第三方模块包，用于分析，并打包代码
- 支持所有类型的文件打包
- 支持less/sass=> css
- 支持ES6/7/8=>ES5
- 压缩代码，提高加载速度
2、环境安装
yarn安装
curl -o- -L https://yarnpkg.com/install.sh | bash
配置环境变量
验证
yarn -version
3、初始化项目
yarn init
yarn add webpack webpack-cli -D
配置scripts
{
"name": "base",
"version": "1.0.0",
"main": "index.js",
"author": "haochen",
"license": "MIT",
"devDependencies": {
"webpack": "^5.88.1",
"webpack-cli": "^5.1.4"
},
"scripts": {
"build":"webpack"
}
}
4、简单使用
需求 两个js文件打包成一个js文件
├── package.json
├── src
│ ├── add
│ │ └── add.js
│ └── index.js
└── yarn.lock
index.js
// webpack打包的入口
import {addFn} from './add/add.js'
console.log(addFn(5,2))
add.js
export const addFn=(a,b)=>a+b
打包命令 在对应src目录下文章来源：https://www.toymoban.com/news/detail-549638.html
yarn build
文章来源地址https://www.toymoban.com/news/detail-549638.html
到了这里，关于webpack基础知识的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！
