nodejs中package.json中的依賴必須每個項目都有自己的node_modules文件夾，而無法在多個項目之間共用一套node_modules（像Java中的Maven那樣）。
依賴管理是每個現代語言的標配。依賴管理和打包工具是兩個概念，npm是依賴管理，webpack是打包工具。
在Java中，maven既能實現依賴管理又能實現打包。
安裝了全局的webpack後，在項目中還需要再安裝webpack，這也是官方推薦的：
1. 全局安裝 npm install webpack -g
2. 項目安裝 npm install --save-dev webpack
3. 打包命令(適用於高版本) webpack runoob1.js -o bundle.js --mode development，同時也可以用下面一條命令
3. 查看npm全局安裝過哪些模塊： npm list -g --depth 0
4. 查看,修改npm全局安裝目錄 npm config get prefix 或者執行 npm config ls
5. 修改prefix的值 npm config set prefix *
6. 安裝cnpm npm install -g cnpm --registry=https://registry.npm.taobao.org
npx webpack runoob1.js -o bundle.js --mode development
npm i module_name -S <==> npm install module_name --save 寫入到 dependencies
npm i module_name -D <==> npm install module_name --save-dev 寫入到 devDependencies
npm i module_name -g 全局安裝
i 是install 的簡寫
-S就是–save的簡寫
-D就是–save-dev 這樣安裝的包的名稱及版本號就會存在package.json的devDependencies這個裏面，而–save會將包的名稱及版本號放在dependencies裏面。
在package.json 文件裏面的, devDependencies 裏面的插件只用於開發環境，不用於生產環境，而 dependencies 是需要發佈到生產環境的。
但是有一個問題是：我們每改變一次main.js文件，就要重新運行一次webpack命令
運行npm i webpack-dev-server -D 把這個工具安裝到項目的本地開發依賴
這個工具要想正常運行，需要先在本地安裝webpack和webpack-cli
將webpack-dev-server命令配置到package.json文件中：配置dev這個命令，這樣就可以在終端直接npm run dev 就可以運行webpack-dev-server了
紅框中說明項目本地運行地址，在瀏覽器中輸入 http://localhost:8080/ 就可以打開項目
綠框中說明webpack打包輸出的文件在該項目根路徑下，下面綠字說明打包生成的文件爲bundle.js
所以：在index.html中要將<script src="../dist/bundle.js"></script>換成<script src="/bundle.js"></script>
這個bundle.js文件是託管在項目的根路徑下，所以我們看不見這個文件，但是這個文件存在，可以在瀏覽器中輸入地址http://localhost:8080/bundle.js打開文件。
運行完npm run dev以後，我們改動main.js文件中的內容，保存以後，項目就會自動運行，重新打包生成新的bundle.js文件替換原來的
但是，運行npm run dev以後，需要我們手動點擊http://localhost:8080/ 纔可以打開項目。
webpack-dev-server的常用命令參數
在package.json文件中配置：
"dev": "webpack-dev-server --open" 運行npm run dev 會自動打開瀏覽器
"dev": "webpack-dev-server --open --port 3000" 運行npm run dev 會自動打開瀏覽器，此時的端口號爲3000
"dev": "webpack-dev-server --open --port 3000 --contentBase src" --contentBase src指定運行的根路徑，這樣打開http://localhost:3000/就直接是我們的項目主頁面了，因爲src文件夾下有index.html
"dev": "webpack-dev-server --open --contentBase src --hot" --hot 添加這個命令以後，更新main.js中的代碼，自動運行不會重新生成bundle.js文件替換之前的bundle.js文件，而是以補丁的形式更新
webpack-dev-server配置命令的第2種方式
在webpack.config.js中配置
index.html是物理磁盤上的HTML頁面，但bundle.js是託管到內存中的文件，那麼，如何把HTML頁面也導入到內存中呢？
（1）安裝插件 npm i html-webpack-plugin -D
（2）在webpack.config.js中配置
當使用了這個插件以後，我們就不需要手動處理bundle.js的引用路徑了，因爲這個插件，已經自動幫我們創建了一個合適的script，並引用了正確的bundle.js的路徑。因此就可以把物理磁盤中的index.html中<script src="/bundle.js"></script>註釋掉了。
運行npm run dev，打開頁面以後，可以查看頁面源代碼，我們就會發現：
內存中的index.html比我們磁盤中的index.html，在body底部多了一行<script type="text/javascript" src="bundle.js"></script>
html-webpack-plugin插件的兩個基本作用是：
（1）自動在內存中根據指定頁面生成一個內存中的頁面
（2）自動把打包好的bundle.js追加到頁面中去