首页 > Web开发 > 详细

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

时间:2016-12-01 16:14:59      阅读:362      评论:0      收藏:0      [点我收藏+]

文档地址  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 就可以实现同样效果了

 

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

原文:http://www.cnblogs.com/txxt/p/6122386.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!