1.安裝node
2.全局安裝webpack
npm install -g webpack
注: 全局安裝的好處是能直接在控制臺(tái)使用webpack命令耻台，且可以共享饶米；
3. 創(chuàng)建項(xiàng)目文件夾(react_webpack)
4. 初始化項(xiàng)目
npm init //一路回車
5. 局部安裝webpack
npm i --save-dev webpack
6. 創(chuàng)建目錄結(jié)構(gòu)
結(jié)構(gòu).png
dist: 打包出來(lái)的文件目錄
src: 組件目錄，index.js入口文件
index.js 中 簡(jiǎn)單的打印一些東西搬俊；
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"), //出口目錄拧晕，絕對(duì)路徑
filename:"bundle.js" //出口文件名字 也可以使用 filename:"[name].js"隙姿，會(huì)根據(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.在控制臺(tái)在執(zhí)行webpack
bundle.png
此時(shí)在dist文件夾中生成了bundle.js;
用webstorm在chrome中打開(kāi)index.html；
過(guò)三秒就能在控制臺(tái)看到123
至此一個(gè)簡(jiǎn)單的webpack打包器就完成了厂捞。
