webpack devserver模式

webpack devserver

在进行开发的过程中，我们需要让代码修改后自动更新页面，因此需要设置对应的devServer

安装webpack-dev-server

yarn add webpack-dev-server -D

配置

module.exports = {
  ...,
  devServer: {
    contentBase: path.join(__dirname, 'dist'),
    compress: true,
    port: 9000
  }
}

配置启动脚本

在package.json中配置脚本，启动服务需要使用 webpack server 命令

{
  "scripts": {
    "serve": "webpack server"
  }
}

启动服务

npm run serve

热更新

模块内容修改后，页面会自动刷新，当我们页面模块过多时，频繁刷新会影响性能，我们想要的是，当模块发生改变时，只有对应的页面更新，这个时候可以开启热更新模式

module.exports = {
  devServer: {
    ...,
    hot: true 
  }
}

思考

• 路径别名 就像vue引入时可以使用 “@”
• 路径引入省略后缀
• vue-loader