webpack常用配置（三）之开启服务

   如果需要开启一个服务，肯定要依托于一个html文件的，因此我们需要在src目录下新建一个index.html页面。
   如果要在webpack中编译html文件，还需要添加一个插件

npm i html-webpack-plugin -D

我这里安装完是4.5.2版本的
安装完以后需要在webpack.common.js中配置，这是因为html文件的编译在dev和prod环境中的都需要，因此把他的配置放在公共配置中

webpack.common.js

//首先引入html-webpack-plugin
const HtmlWebpackPlugin=require('html-webpack-plugin')
module.exports={
 plugins:[
   new HtmlWebpackPlugin({
     template:path.join(srcPath,'index.html'),
     filename:'index.html'//打完包以后的文件名称
     chunks:["index"] //这里的chunks代表的意思是引入的是哪一个入口文件，我引入的就是src下建立的index.js文件
  })
 ]
}

上面这段代码的path，srcPath在《webpack常用配置二》中有，不明白的可以翻一下之前的文章

到目前为止，html的配置就完成了，可以运行一下npm run build,打包完成后可以看到dist文件夹下面有一个index.html文件，里面用script标签引入了入口文件index.js.

那现在开始我们进入正题：开启一个服务，因为是一个本地服务，所以只需要在dev中配置就可以，首先安装webpack-dev-server

npm i webpack-dev-server -D

我这里是4.11.1版本
webpack.dev.js

module.exports=merge(webpackCommonConf,{
 devServer:{
  port:3000,
  static:distPath,//根目录
  open:true,//自动打开浏览器
  compress:true,//启动压缩
  //如果需要跨域请求接口
  proxy:{
   '/api':{
        target:'http://localhost:3000'
      }
  }
 }
})

最后配置dev命令，在package.json文件中

"script":{
  "dev":"webpack-dev-server --config build/webpack.dev.js"
}

npm run dev启动服务，浏览器会自动开启一个http://localhost:3000