首先，我们新建一个文件夹，初始化项目
npm init -y接下来，我们先安装webpack与webpack-cli包。
npm install webpack-cli webpack -D
我们先查看到webpack的版本号
webpack -v
然后，我们在该项目中创建一个src目录以及一些文件。具体目录如下：
?在js目录下面的util.js中我们可以使用一个简单的函数导出。
const add = (x, y) => {
return x + y
}
export default add然后我们可以在src下面的index.js文件中导入这个模块
import add from './js/util.js'
console.log(add(1,2));然后，我们在index.html中引入这个index.js文件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script type="module" src="./src/index.js"></script>
</head>
<body>
</body>
</html>使用Live Server插件运行这个html文件。可以看到src中的模块已经正常的导入并运行了。
?当然，我们的目录并非学习ES6的模块化的导入与导出。
我们主要的为了使用webpack进行打包构建，于是我们可以直接在命令行中使用webpack命令
webpack
?虽然，我们没有指定要执行打包操作的js文件以及打包后的js存放的位置。但是我们可以看到webpack以及给我们新建了一个dist目录并将打包好的js存放在这个目录下。
?为什么会这样呢？
因为，webpack有四个核心概念：
入口（entry），输出（output），loader，插件（plugins）
其中默认入口文件为src目录下的index.js文件
而默认的输出文件则为./dist目录
当我们实际开发中，我们需要给webpack配置进行设置。于是，我们可以新建一个webpack.config.js的webpack的配置文件。
?我们在package.json中配置webpack的build命令，然后我们运行npm? run build命令，我们可以看到也成功的对js文件进行打包了。
?
?
?