webpack-03,开发服务器

• 下载包

  • yarn add webpack-dev-server@3.11.2 -D

• 配置自定义命令server

  • scripts: {
    	"build": "webpack",
    	"serve": "webpack serve"
    }

• 运行命令-启动webpack开发服务器

  • yarn serve 或 npm run serve

•  webpack开发服务器配置
  • 在webpack.config.js中添加服务器配置

    • module.exports = {
          // ...其他配置
          devServer: {
            port: 3000, // 端口号
            open: true // 启动后自动打开浏览器
          }
      }

    • 更改好配置之后,需要重启服务器

•  总结

  • 如何用webpack开发服务器,实时打包我们的代码?

    • 下载webpack-dev-server包
    • 在package.json配置server命令,启动
    • webpack-dev-server给我们一个地址加端口,供浏览器访问查看index.HTML页面和打包后的js和css

  •  webpack开发服务器的好处

    • 打包进内存里,使用更快
    • 代码变化,只会重新打包和更新,变化的文件和代码

  •  如何修改webpack开发服务器的配置

    • 在webpack文档查找配置项的名字
    • 在webpack.config,js的devServer选项里面去添加