Webpack2 完整踩坑教程(一)
Webpack的核心哲學思想
1.一切都是模組——就像JS檔案可以視作“模組”一樣，其他所有的一切（CSS，圖片，HTML）都可以被視作模組，通過require載入。。
2.模組載入器會把所有的模組最終打包生成一個巨大的“bundle.js”檔案，並且會一直不停進行載入！所以Webpack通過大量的特性去分割你的程式碼，生成多個“bundle”片段，並且非同步地載入專案的不同部分。
一．起步(HELLO WORLD)
nodejs安裝請參考官網。
先安裝http-server伺服器：npm install http-server -g（非必須）
1.建立node專案：npm init ，名字為webpack-test，得到package.json檔案
{
"name": "webpack-test",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"author": "",
"license": "ISC",
"devDependencies": { }
}
2.建立index.html ，並新建一個id為app的div。
3.建立index.js
var app=document.getElementById('app');
app.innerHTML="hi";
4.安裝webpack: npm install webpack –save-dev
5.輸入./node_modules/webpack/bin/webpack.js index.js bundle.js 將index.js打包為bundle.js檔案
6.在index.html引用bundle.js
<!DOCTYPE html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"></script>
</head>
<body>
<div id="app"></div>
<script src="bundle.js"></script>
</body>
</html>
7.此時可以輸入http-server -p 3000 ，然後在瀏覽器開啟localhost:3000，頁面輸出hi字樣。開啟bundle.js檢視打包後的原始碼，至此第一步成功實現。