搭建好webpack配置之后,开始启动热更新。
第一步:安装 webpack-dev-server 注意版本问题
npm install webpack-dev-server --save-dev
第二步:在webpack.config.js 进行插件启用
var webpack = require('webpack'); /** 省略 **/ // 插件 plugins:[ // 热更新 new webpack.HotModuleReplacementPlugin() ]
第三步:设置端口号
方法一:在package.json中设置端口号 "scripts": { "test": "echo "Error: no test specified" && exit 1", "build": "webpack", "dev": "webpack-dev-server --port 8080" } 方法二:在webpack.config.js中设置端口号 devServer: { inline: true, port: 3000 },
第四步:设置启动
"scripts": {
"test": "echo "Error: no test specified" && exit 1",
"build": "webpack",
"dev": "webpack-dev-server --port 8080"
}
第五步:打开设置的端口连接:
http://localhost:8080/
展示的就是index文件得到的内容。