目录
1 .安装Webpack
WebPack是一款模块加载器兼打包工具(类似Maven),它能把各种资源,如JS、JSX、ES6、SASS、LESS.图片等都作为模块来处理和使用。
1.1 使用命令提示符安装
以管理员模式运行
npm install webpack -g
npm install webpack-cli -g
1.2测试安装是否成功
webpack -v
webpack-cli -v
2.实现
2.1 创建一个项目
2.1.1创建一个文件夹modules
2.1.2 编写hello.js(暴露一个方法)
//暴露一个方法exports,main.js使用require接收
exports.syHai=function () {
document.write("<h1>啦啦啦</h1>")
};
2.1.3 编写main.js(接受一个方法)
var hello=require("./hello");
hello.syHai();
2.1.4 在项目里面创建webpack.config.js
module.exports={
entry:'./modules/main.js',
output:{
filename:"./js/bundle.js"
}
/*
entry: 入口文件,指定WebPack 用哪个文件作为项目的入口
output:输出,指定WebPack把处理完成的文件放置到指定路径
module:模块,用于处理各种类型的文件
plugins:插件,如:热更新、代码重用等
resolve:设置路径指向
watch:监听,用于设置文件改动后直接打包
* */
};
2.1.5 命令行输入webpack
2.2 刷新项目自动出现打包好的js
2.3 创建index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<!--前端模块化开发-->
<script src="dist/js/bundle.js"></script>
</body>
</html>