1.安装webpack
(1)打包工具
npm install webpack -g
(2)客户端
npm install webpack-cli -g
查看版本号:webpack -v
2.使用webpack创建项目
(1)创建目录webpack-study
(2)创建modules/hello.js、modules/main.js
hello.js
// 暴露方法
exports.sayHi=function () {
document.write("<h1>webpack学习123!</h1>");
};
exports.sayHi2=function () {
document.write("<h1>webpack学习!</h1>");
};
exports.sayHi3=function () {
document.write("<h1>webpack学习!</h1>");
};
exports.sayHi4=function () {
document.write("<h1>webpack学习!</h1>");
};
main.js
var hello=require("./hello");
hello.sayHi();
(3)创建webpack.config.js用于打包配置
module.exports={
// 入口文件
entry: './modules/main.js',
// 输出位置
output: {
filename: './js/bundle.js'
}
};
(4)执行webpack命令打包生成bundle.js文件
(5)创建项目入口index.html,直接引入bundle.js即可
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<!--前端的模块化开发-->
<script src="./dist/js/bundle.js"></script>
</body>
</html>