webpack配置热加载webpack-dev-server

2018.05.13 12:07 阅读 660 评论 0

在开发过程中,热加载的功能,修改内容后,会自动刷新页面,而不需要手动刷新页面,更方便了开发。

webpack中配置热加载需要webpack-dev-server依赖包,首先安装依赖。

npm install webpack-dev-server -D

然后在webpack.config.js中配置热加载

module.exports = {
  // 其他配置省略
  devServer: {
    host: '0.0.0.0',
    port: '8080',
    noInfo: true,
    hot: true
  }
}

devSever参数

  • host: 主机名,默认为localhost,也可以设置为本机ip,当设置为0.0.0.0时本机ip和localhost都可以访问
  • port: 端口号,默认为8080
  • hot: 是否开启模块热加载,默认为false,开启后需要添加webpack的HotModuleReplacementPlugin插件和NamedModulesPlugin插件。
const webpack = require('webpack')

module.exports = {
  // 其他配置省略
  plugins: [
    new webpack.NamedModulesPlugin()
    new webpack.HotModuleReplacementPlugin(),
  ],
  devServer: {
    host: '0.0.0.0',
    port: '8080',
    noInfo: true,
    hot: true
  }
}
  • inline: 热加载模式true为inline模式,false为iframe模式,默认为inline模式。当为inline模式的时候页面会自动刷新替换修改的内容,当为iframe模式的时候,需要手动刷新页面。
  • noInfo: 是否显示编译的信息,默认是false显示信息,当设置为true的时候不显示编译信息

配置好webpack后,在package.json中配置script

{
  // 其他配置省略
  "scripts": {
    "dev": "webpack-dev-server"
  }
}

在命令窗口下输入npm run dev就可以运行项目

0 条评论
发布