什麼是webpack

WebPack可以看做是模組打包機：它做的事情是，分析你的專案結構，找到JavaScript模組以及其它的一些瀏覽器不能直接執行的拓展語言（Sass，TypeScript等），並將其轉換和打包為合適的格式供瀏覽器使用。在3.0出現後，Webpack還肩負起了優化專案的責任。

可以從下圖再次瞭解一下WebPack的作用:

安裝webpack

進入cmd模式，建立資料夾

mkdir webpack_demo
cd webpack_demo

全域性安裝

npm install webpack -g 

安裝完成後，檢視版本號

webpack -v
 

提示需要安裝webpack-cli

npm install webpack-cli -g

對專案目錄進行安裝前，先初始化，生成package.json

npm init

對專案目錄進行安裝

npm install webpack webpack-cli --save-dev

這裡的引數–save是要儲存到package.json中，dev是在開發時使用這個包，而生產環境中不使用。

服務和熱更新

下載

npm install webpack-dev-server --save-dev

配置webpack.config.js中devServer

devServer:{
        //設定基本目錄結構
 

        contentBase:path.resolve(__dirname,'dist'),
        //伺服器的IP地址，可以使用IP也可以使用localhost
        host:'localhost',
        //服務端壓縮是否開啟
        compress:true,
        //配置服務埠號
        port:8080
    }

在package.json裡配置一下scripts選項

"scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
 
,
    "dev": "webpack --mode development",
    "start":"webpack-dev-server"
  }

npm  run start