今天学习一下如何创建自己的WebPack配置以使用WebPack和Babel捆绑小型JavaScript实用程序库。
初始化
在一个文件夹下执行以下命令
改命令会创建一个package.json文件夹， -y表示按照默认配置生成模板
1
2
3
4
5
| $ mkdir src //创建src文件夹
$ cd src
$ touch addDOMContent.js
$ touch capital.js
$ touch index.js //主文件夹
|
文件目录如下
1
2
3
4
5
6
| demo
|-- package.json
|-- src
|--index.js
|--capital.js
|--addDOMContent.js
|
向src中的文件中添加内容
capital.js
1
2
3
4
5
6
7
| function capital(string) {
const capitalizedString =
string.substring(0, 1).toUpperCase() + string.substring(1)
return capitalizedString
}
export default capital
|
addDOMContent.js
1
2
3
4
5
6
7
| function addDOMContent(content) {
const node = document.createElement("h1")
node.innerText = content
document.body.appendChild(node)
}
export default addDOMContent
|
index.js
1
2
3
4
| import capital from "./capital"
import addDOMContent from "./addDOMContent"
export { capital, addDOMContent }
|
安装 babel语法转换器
此时如果直接执行任意一个js文件，会发现程序报错，原因是导出的时候使用的是es6的语法，所以需要安装将es6语法装换成es5语法的相关依赖
1
| $ npm i --save-dev webpack webpack-cli @babel/core @babel/preset-env babel-loader
|
此时，package.json文件会多出以下配置
1
2
3
4
5
6
7
| "devDependencies": {
"@babel/core": "^7.16.0",
"@babel/preset-env": "^7.16.4",
"babel-loader": "^8.2.3",
"webpack": "^5.64.1",
"webpack-cli": "^4.9.1"
}
|
创建 webpack.config.js 文件
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
| const path = require("path")
module.exports = {
entry: path.resolve(__dirname, "src/index.js"), //打包入口文件
output: {
path: path.resolve(__dirname, "dist"),//打包后的文件夹
filename: "index_bundle.js", //打包后的文件名称
library: "$", // 库名称
libraryTarget: "umd", // 通用模块定义
},
module: {
rules: [
{
test: /\.(js)$/,
exclude: /node_modules/, //不解析node_modules文件夹中的文件
use: "babel-loader", // 用babel-loader解析所有的以.js为后缀的所有文件
},
],
},
mode: "development",
}
|
更多配置内容看这里：https://webpack.docschina.org/configuration/
创建一个 .babelrc 文件
添加如下内容
1
2
3
| {
presets: ["@babel/preset-env"]
}
|
在package.json中添加如下内容
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
| {
"name": "demo",
"version": "1.0.0",
"description": "",
+ "main": "dist/index_bundle.js",
+ "scripts": {
+ "build": "webpack"
+ },//+表示添加的内容
"keywords": [],
"author": "Hridayesh Sharma",
"license": "ISC",
"dependencies": {},
"devDependencies": {
"@babel/core": "^7.10.4",
"@babel/preset-env": "^7.11.0",
"babel-loader": "^8.1.0",
"webpack": "^4.44.1",
"webpack-cli": "^3.3.12",
}
}
|
打包编译
此时会生成打包后的文件
创建index.html文件
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
| <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Demo</title>
</head>
<body>
<script src="dist/index_bundle.js"></script>
<script>
console.log($)
alert($.capital("hridayesh"))
$.addDOMContent("Well It Works Fine!!!")
</script>
</body>
</html>
|
最后在浏览器中打开该静态index.html文件，完成！！！！