webpack5 之 基础构建打包
1：webpack5 之 基础构建打包
初始化 package.json文件
- 运行 npm init -y 初始化 生成 package.json文件
- package.json文件 进行配置 脚本指令
- npm run dev 开发运行
- npm run build 打包构建 生产包
- 需要安装 开发时依赖 webpack 与 webpack-cli
{
"name": "webpack-1",
"version": "1.0.0",
"description": "",
"main": "mian.js",
"scripts": {
"dev": "webpack --mode development",
"build": "webpack --mode production",
"test": "echo \"Error: no test specified\" && exit 1"
},
"devDependencies": {
"webpack": "^5.67.0",
"webpack-cli": "^4.9.2"
},
"keywords": [],
"author": "",
"license": "ISC"
}
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
const path = require('path')
module.exports = {
entry: {
main: './src/main.js'
},
output: {
path:path.resolve(__dirname,'dist'),
filename:'bunder.js' ,
},
module: {
rules: []
},
plugins: []
}
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
src / main.js
console.log("main.js");
index.html ( npm run build 之后在 dist 目录下生成bunder.js 文件 引入查看效果)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script src="./dist/bunder.js"></script>
</body>
</html>
效果
