1.安裝node
2.全局安裝webpack
npm install -g webpack
注: 全局安裝的好處是能直接在控制臺使用webpack命令，且可以共享；
3. 創(chuàng)建項目文件夾(react_webpack)
4. 初始化項目
npm init //一路回車
5. 局部安裝webpack
npm i --save-dev webpack
6. 創(chuàng)建目錄結(jié)構(gòu)
結(jié)構(gòu).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"，會根據(jù)entry下面的key值進(jìn)行文件名命名
}
}
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.在控制臺在執(zhí)行webpack
bundle.png
此時在dist文件夾中生成了bundle.js;
用webstorm在chrome中打開index.html；
過三秒就能在控制臺看到123
至此一個簡單的webpack打包器就完成了。
