webpack 及webpack-dev-server安裝

1、webpack 及webpack-dev-server安裝

1.1 npm常用命令解釋

   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 的簡寫

2、安裝步驟

2.1 webpack安裝版本

		 npm i [email protected] -g

2.2 webpack-dev-server 安裝版本

           npm i [email protected] -D

直接安裝完webpack-dev-server後會出現如下警告

這是因爲webpack是全局安裝的，在本地安裝webpack-dev-server後會不識別已經安裝的webpack，因此還需要在本地再安裝一次webpack

2.3 再次安裝本地項目的webpack

npm i [email protected] -D

此時如果直接輸入命令webpack-dev-server則會提示

因爲只有全局安裝的命令纔會直接在控制檯輸入命令，這樣的方式提示不是內部命令也很正常。所以需要在package.json的scripts標籤下配置“dev”:“webpack-dev-server”,通過這樣的方式來運行webpack-dev-server命令

2.4 配置package.json的dev

命令含義

-- webpack-dev-server:指定打包插件
-- open：打包後自動打開瀏覽器
-- contentBase  src  ：指定首頁打開的***.html文件在哪個目錄下
-- hot:自動編譯是熱編譯