目录
（2）创建一个名为modules的目录，用于放置JS模块等资源文件
（4）在modules下创建一个名为main.js的入口文件main.js，用于打包时设置entry属性
（5）在项目目录下创建webpack.config.js配置文件，使用webpack命令打包
（7）在项目目录下创建HTML页面，如index.html，导入webpack打包后的JS文件
1、安装Webpack
WebPack是一款模块加载器兼打包工具， 它能把各种资源， 如JS、JSX、ES6、SASS、LESS、图片等都作为模块来处理和使用
安装：
npm install webpack -g
npm install webpack-cli -g
测试安装成功：
webpack -v
webpack-cli -v
配置：
- entry：入口文件， 指定Web Pack用哪个文件作为项目的入口
- output：输出， 指定WebPack把处理完成的文件放置到指定路径
- module：模块， 用于处理各种类型的文件
- plugins：插件， 如：热更新、代码重用等
- resolve：设置路径指向
- watch：监听， 用于设置文件改动后直接打包
module.exports = {
entry:"",
output:{
path:"",
filename:""
},
module:{
loaders:[
{test:/\.js$/,;\loade:""}
]
},
plugins:{},
resolve:{},
watch:true
}
直接运行webpack命令打包
2、使用webpack
（1）创建项目
在2021学习中创建文件夹webpack-study，然后用IDEA打开
（2）创建一个名为modules的目录，用于放置JS模块等资源文件
（3）在modules下创建模块文件hello.js
//暴露一个方法
exports.sayHi = function () {
//输出：山姆看英语
document.write("<h1>山姆看英语1</h1>")
};
exports.sayHi1 = function () {
//输出：山姆看英语2
document.write("<h1>山姆看英语2</h1>")
};
exports.sayHi2 = function () {
//输出：山姆看英语3
document.write("<h1>山姆看英语3</h1>")
};
exports.sayHi3 = function () {
//输出：山姆看英语4
document.write("<h1>山姆看英语4</h1>")
};
exports.sayHi4 = function () {
//输出：山姆看英语5
document.write("<h1>山姆看英语5</h1>")
};
（4）在modules下创建一个名为main.js的入口文件main.js，用于打包时设置entry属性
//引入hello.js
let hello = require("./hello");
hello.sayHi();
（5）在项目目录下创建webpack.config.js配置文件，使用webpack命令打包
module.exports = {
//entry:这个就是程序的入口
entry: './modules/main.js',
//输出
output: {
filename: "./js/bundle.js"
}
};
（6）打包
说明：打包如果失败，就用管理员权限运行webpack
（7）在项目目录下创建HTML页面，如index.html，导入webpack打包后的JS文件
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Java</title>
</head>
<body>
<script src="dist/js/bundle.js"></script>
</body>
</html>
（8）直接打开index.html就能输出结果！
注：
# 参数--watch 用于监听变化,如果要打包的东西有变化，就重新打包
webpack --watch