1.安装webpack打包工具
webpack是使用npm安装
npm install webpack -g //全局安装
在命令行中就可以使用webpack这个命令了。
提示：由于npm安装会去找国外镜像，所以安装国内淘宝cnpm镜像
npm install cnpm -g
以后所有的npm操作都用cnpm命令代替就行！
注：webpack采用的是commonJs规范
使用webpack（一）
calc.js
function add(x, y) {
return x + y;
}
module.exports = {
addFun: add
};
main.js
var addExport = require(‘./calc.js‘); console.log(addExport.addFun(1, 2));
使用webpack命令打包
webpack main.js build.js //这样就生成了build.js，就可以在html中使用script引入
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<script src="./build.js"></script>
</body>
</html>
完成命令行中的打包！
2用webpack.config.js配置文件
如果只使用命令行，肯定每次都敲很多参数，这样不利于开发，所以如果将这些依赖写入一个配置文件中，每次都使用一个webpack命令就行
webpack.config.js
module.exports = {
entry: ‘./main.js‘,
output: {
filename: ‘./build.js‘
}
};
在命令中就只要敲webpack这个命令就能自动生成build.js文件
时间： 2024-07-30 03:23:38