webpack快速入門——配置文件：服務和熱更新

 

1.在終端安裝 cnpm i webpack-dev-server --save-dev

2.配置好後執行 webpack-dev-server，這時候會報錯

出現錯誤，只須要在pagejson裏配置下scripts就能夠了

 

 3.下載好後，須要配置下devServer

const path = require('path'); //引入path
module.exports={      //暴露出來
    entry:{
        entry:'./src/entry.js',
        entry2:'./src/entry2.js'
    },   //  入口文件配置     
    output:{
        path:path.resolve(__dirname,'dist'),//dist絕對路徑
        // filename:'bundle.js'
        filename:'[name].js'//打包後的出口和入口文件名如出一轍
    },  //  出口文件配置 
    module:{},  //  模塊，例如CSS,圖片轉換，壓縮
    plugins:[], //  插件,多個插件，因此是數組
    devServer:{
        contentBase:path.resolve(__dirname,'dist'),
        host:'172.16.64.59',
        compress:true,
        port:8080
    } //  配置webpack服務
}

host是你本身的ip地址，port是端口號

4.配置好後，在終端執行npm run server便可

 

複製上圖的地址到瀏覽器中，就能夠看到效果了，而且實現了熱更新

 

 

前端必學內容：webpack（模塊打包器）

webpack3 學習內容，點擊便可到達

(1).webpack快速入門——如何安裝webpack及注意事項

(2).webpack快速入門——webpack3.X 快速上手一個Demo   

(3).webpack快速入門——配置文件：入口和出口，多入口、多出口配置 

(4).webpack快速入門——配置文件：服務和熱更新

(5).webpack快速入門——CSS文件打包

(6).webpack快速入門——配置JS壓縮，打包

(7).webpack快速入門——插件配置：HTML文件的發佈

(8).webpack快速入門——CSS中的圖片處理

(9).webpack快速入門——CSS分離與圖片路徑處理

(10).webpack快速入門——處理HTML中的圖片

(11).webpack快速入門——CSS進階，Less文件的打包和分離

(12).webpack快速入門——CSS進階：SASS文件的打包和分離

(13).webpack快速入門——CSS進階：自動處理CSS3前綴

(14).webpack快速入門——CSS進階：消除未使用的CSS

(15).webpack快速入門——給webpack增長babel支持

(16).webpack快速入門——打包後如何調試

(17).webpack快速入門——實戰技巧：開發和生產並行設置

(18).webpack快速入門——實戰技巧：webpack模塊化配置

(19).webpack快速入門——實戰技巧：優雅打包第三方類庫

(20).webpack快速入門——實戰技巧：watch的正確使用方法，webpack自動打包

(21).webpack快速入門——實戰技巧：webpack優化黑技能

(22).webpack快速入門——集中拷貝靜態資源

(23).webpack快速入門——Json配置文件使用

 

若是個人內容對你有幫助，歡迎打賞