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/