學習webpack4.X（一，安裝和配置熱更新）

什麼是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"
  }

打開服務器後，在瀏覽器地址欄輸入http://localhost:8080就可以了

npm  run start