輸入cmd點擊打開

輸入node -v 出現nodejs版本號

輸入npm -v 出現npm版本號則安裝npm安裝成功，

2、安裝webpack

桌面新建一個webpack-test文件夾，點擊進入文件webpack-test夾 按下shift+鼠標右鍵 點擊在此處打開命令窗口

輸入npm init 一直點擊回車鍵 當出現Is this ok？時 輸入yes，然後點擊回車鍵

進入webpack-test文件夾，出現package.json文件

使用notepad++打開package.json

回到cmd窗口，輸入 npm install –save-dev webpack

這時候使用 webpack -v 會出現’webpack’ 不是內部或外部命令，也不是可運行的程序或批處理文件。

繼續輸入 npm install –save-dev webpack-cli

npm install –global webpack

npm install –global webpack-cli

使用webpack -v 出現版本號則安裝成功

使用webpack 命令 出現錯誤ERROR in Entry module not found: Error: Can’t resolve ‘./src’ in ‘C:\Users\Administrator\Desktop\webpack-test’

錯誤原因是webpack入口默認為src/index.js 進入webpack-test文件夾新建文件夾 src，進入src文件新建index.js

在index.js中寫入內容

alert(“webapck test”);

然後回到cmd窗口輸入webpack

打包成功 但是還有一個警告 WARNING in configuration The ‘mode’ option has not been set. Set ‘mode’ option to ‘development’ or ‘production’ to enable defaults for this environment.是因為使用webpack沒有指定mode為 development（開發模式）或者為production（生產模式）

也可以在package.json文件中加入

最終package.json文件內容為

然後使用 npm run dev (相當於 webpack –mode development )或者

使用npm run build(相當於 webpack –mode production)

接下開看一下開發模式和生產模式的區別

我們首先看一下開發模式，回到cmd窗口 輸入 npm run dev

進入webpack-test文件夾，發現自動生成了一個dist文件夾，這是webpack默認輸出文件位置

進入dist文件夾 發現出現一個main.js 這是webpack默認輸出的js文件

使用notepad++ 打開main.js 內容如下 js文件為正常開發時的格式

然後看一下生產模式，回到cmd窗口 輸入 npm run build

進入webpack-test/dist，然後再打開main.js，發現內容格式非常緊湊，適合生產環境下使用

我們在webpack-test目錄下新建一個index.html，引入main.js看是否可用

index.html內容為 保存之後點擊index.html使用瀏覽器打開

我使用的chrome瀏覽器 打開效果為下圖，說明index.js打包成功

至此webpack安裝完成，至於後面應用配置還要更加繁瑣，根據個人需求可以在官方文檔參考如何配置

windows 使用npm安裝webpack 4.0以及配置問題的解決辦法