简单配置webpack自动刷新浏览器

Posted 2020-08-21 TXXT

文档地址  http://webpack.github.io/docs/usage.html

首先全局安装webpack(我这里使用的是淘宝的cnpm)

cnpm install webpack

检查一下是否安装完毕，查看版本号

webpack -h

简历package.json文件

npm init  一直enter就可以了

然后再本地安装一次webpack

cnpm install webpack --save-dev

新建webpack.config.js

module.exports = {
     entry: ‘./js/app.js‘,  //入口文件
     output: {
         path: ‘./build‘,   //打包好的文件夹
         filename: ‘main‘ //打包好的文件名
     }
 };

 

配置完webpack.config后，目录需要有一个index.html文件在body内引入/build/main.js

然后就可以设置热加载了

首先是安装webpack-dev-server模块

cnpm install webpack-dev-server --save-dev

执行开启自动刷新

webpack && webpack-dev-server --hot --inline

打开浏览器输入 localhost:8080 修改app.js就可以不用刷新看到你做的修改了

 

升级版

在package.json 中的script中加入字段

"start": "webpack && webpack-dev-server --hot --inline"

现在直接输入 npm start 就可以实现同样效果了