記錄如何搭建一個最簡單的能跑的項目！
1.首先，需要下載安裝nodejs環境，可以直接百度搜索nodejs去官網下載符合你操作系統的環境。
安裝完nodejs后，在控制台輸入命令：
npm -version
如果成功看到nodejs的版本，那么說明環境已經成功安裝了！
2.新建package.json
打開命令行工具(CMD)，把路徑切換到webpack項目路徑下，我的項目路徑是D:\WorkSpace\webpack\testProject1
所以我在CMD中輸入
D: //切換到D盤
cd D:\WorkSpace\webpack\testProject3 //切換到項目路徑下
然后我們使用命令
npm init //創建package.json文件
來創建package.json
我使用package.json的默認參數，所以，一直回車確認即可.
最后在Is this OK? (yes)輸入y即可創建完畢package.json
3.創建webpack.config.js文件
剛剛的package.json文件是通過命令創建的，webpack.config.js文件就要自己手動創建了
module.exports = {
entry: './index.js',
output: {
path: __dirname,
filename: "bundle.js"
},
}
//思考entry為什么是 './index.js'
新建文件，把上面一段代碼寫入js文件
4.創建前台頁面
在項目路徑根目錄下創建index.html和index.js文件
index.html文件
<script src="bundle.js"></script> //思考為什么是bundle.js而不是index.js
index.js文件
document.write("hello world")
5.npm start啟動項目
現在，基本項目文件都有了，已經可以開始嘗試啟動項目了
在CMD控制台輸入命令
npm start
會發現啟動報錯 --npm ERR! missing script: start
這是因為在package.json文件中沒有找到對應的命令
所以需要添加
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"dev": "webpack-dev-server --hot --inline",
"start": "webpack-dev-server --hot" //添加這段代碼
},
繼續 npm start
然后發現報錯
'webpack-dev-server' 不是內部或外部命令，也不是可運行的程序
這是因為需要安裝webpack-dev-server 模塊
輸入命令(我所安裝的模塊包都是安裝在全局變量下)
npm install webpack-dev-server -g
繼續 npm start
繼續報錯
Error: Cannot find module 'webpack'
這是因為需要安裝webpack 模塊
輸入命令
npm install webpack -g
繼續 npm start
繼續報錯
Error: Cannot find module 'webpack-cli/bin/config-yargs'
這是因為需要安裝webpack-cli 模塊
輸入命令
npm install webpack-cli -g
繼續 npm start
繼續報錯(也可能不報錯)
ERROR in multi (webpack)-dev-server/client?http://localhost:8080 webpack/hot/dev-server ./index.js
其實項目現在已經成功跑起來了，只是加載js報錯了
這是因為需要安裝start-webpack-dev-server-hot 模塊
輸入命令
npm install --save-dev start-webpack-dev-server-hot
最后再啟動的話，項目就成功沒有報錯運行了
到這里，一個最簡單的webpack的helloworld案例就完成了！