webpack新建項目

記錄如何搭建一個最簡單的能跑的項目！

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案例就完成了！