webpack入門——配置出入口和服務熱更新

配置完成後，直接輸入npm run server  啓動服務，再瀏覽器中輸入網址即可，具體配置參考下方

新建文件webpack.config.js

const path=require('path');
module.exports={
    entry:{
        entry:'./src/entry.js',/**入口文件地址**/
        entry2:'./src/entry2.js'
    },
    output:{
        path:path.resolve(__dirname,'dist'),/**打包輸出的文件的絕對地址**/
        filename:'[name].js'/*打包輸出的文件名和打包的文件名一致，只有一個輸出文件時可以只寫一個文件名，filename:'bundle.js'*/
    },
    module:{},
    plugins:[],
    /*安裝服務器插件 npm install webpack-dev-server --save-dev*/
    devServer:{
        contentBase:path.resolve(__dirname,'dist'),
        host:'IP地址',/*服務器IP地址*/
        compress:true,/*啓動服務器壓縮*/
        port:1818
    }
}

1.在webpack.config.js中配置好入口文件和出口文件（參考上方代碼中的entry:{}、output:{}）——在index.html中引用輸出的文件;輸入命令webpack——打包成功

2.服務器配置，把本機當做服務器地址,ipconfig查看本機地址

devServer:{
        contentBase:path.resolve(__dirname,'dist'),
        host:'IP地址',/*服務器IP地址*/
        compress:true,/*啓動服務器壓縮*/
        port:1818
    }

熱跟新（瀏覽器中實時根據本地修改的代碼變化，顯示內容）安裝server插件：npm install webpack-dev-server --save-dev 

package的script中配置啓動命令

執行：npm run server  ，直接瀏覽器中輸入運行結果中的地址:http:IP地址:port/