一、webpack是什么
webpack 是一个用于现代 JavaScript 应用程序的静态模块化打包构建工具
Webpack的运行需要依赖Node.js，因此需要先安装Node.js。
下载地址
查看是否安装成功
// 查看版本
node - v // 例如 ：v16.13.1
二、webpack快速使用
2.1 初始化package.json
npm init -y
2.2 安装webpack相关依赖
npm i webpack webpack-cli -D
2.3 写一点点测试代码
src目录下 创建 main.js,tools.js
public目录下 index.html 引入dist/main.js
tools.js
// 随意写的两个方法
module.exports = {
add:function(a,b) {
return a+b
},
jian:function(a,b) {
return a-b
}
}
main.js
// 引入 tools文件
const tools = require('./tools')
console.log('tools',tools.add(4,6));
2.4 在package.json中添加打包脚本
{
....
"scripts": {
"build":"webpack"
},
...
}
2.5 编写webpack配置文件
编写webpack配置文件，让webpack实现灵活环境定制，如下：
//引入相关依赖
const path=require('path')
//创建一个webpak配置对象
const config = {
// 设置模式
mode:'development',
//配置入口
entry:'./src/main.js',
//配置出口
output: {
//打包路径
path:path.resolve(__dirname,'dist'), // dist 打包后的文件名
//打包文件名
filename: 'js/bundle.js',
//清理无用文件
clean:tru
}
}
//抛出
module.exports = config
2.5 安装webpack服务器
安装webpack-dev-server： npm i webpack-dev-server -D
配置webpack.config.js
{
....
//配置webpack服务器
devServer: {
port: 9999, // '9999'自定义
//静态目录位置
static: {
directory:'dist'
}
}
....
}
3.配置package.json运行脚本
{
...
"scripts": {
"build": "webpack",
"serve": "webpack serve"
},
...
}
最后：使用命令打包
npm run build
