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