1.安装node
2.全局安装webpack
npm install -g webpack
注: 全局安装的好处是能直接在控制台使用webpack命令，且可以共享；
3. 创建项目文件夹(react_webpack)
4. 初始化项目
npm init //一路回车
5. 局部安装webpack
npm i --save-dev webpack
6. 创建目录结构
结构.png
dist: 打包出来的文件目录
src: 组件目录，index.js入口文件
index.js 中 简单的打印一些东西；
setTimeout(function(){console.log(123)},3000)
7.新建webpack.config.js(配置webpack)
var path = require("path");
module.exports = {
entry:{
app:["./src/index.js"] //入口文件
},
output:{
path:path.resolve(__dirname,"dist"), //出口目录，绝对路径
filename:"bundle.js" //出口文件名字 也可以使用 filename:"[name].js"，会根据entry下面的key值进行文件名命名
}
}
8. 在dist文件夹下面添加index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<script src="./bundle.js"></script> //加载打包之后的bundle.js
</body>
</html>
9.在控制台在执行webpack
bundle.png
此时在dist文件夹中生成了bundle.js;
用webstorm在chrome中打开index.html；
过三秒就能在控制台看到123
至此一个简单的webpack打包器就完成了。
