webpack入门第7篇--热加载
来源:互联网 发布:淘宝买论文靠谱吗 编辑:程序博客网 时间:2024/05/21 05:56
webpack研究一下热加载技术,修改代码时页面自动刷新。
在webpack入门第6篇里,已经说过了,新建几个文件,在这就不建了,因为那样做,感觉无法突出重点,所以只写改动的部分。
1、修改webpack.config.js
module.exports = { entry: "./entry.js", output: { path: __dirname, filename: "bundle.js" }, module: { loaders: [ {test: /\.css$/, loader: "style-loader!css-loader"} ] }, devServer: { contentBase: './', port: 9000 }};
比以前增加了,这是配置服务的端口号,以及监听的目录
devServer: { contentBase: './', port: 9000 }
2、在命令行输入,添加服务器
npm install webpack -Dnpm install webpack-dev-server -D
3、修改package.json
改后如下:
{ "name": "demo4", "version": "1.0.0", "description": "", "main": "index.js", "scripts": { "start": "webpack-dev-server --hot", "test": "echo \"Error: no test specified\" && exit 1" }, "author": "", "license": "ISC", "devDependencies": { "css-loader": "^0.28.7", "style-loader": "^0.18.2", "webpack": "^3.6.0", "webpack-dev-server": "^2.8.2" }}
主要修改了
"start": "webpack-dev-server --hot",
4、在命令行里输入
npm start
5、在浏览器输入
http://localhost:9000/
查看页面运行结果。
6、让我们来测试一下效果,修改content.js文件
alert(555)module.exports = "It works from content.js.";
发现页面弹窗了,再修改.css文件看看,保存
body { background: gold;}
发现页面自动变为了金色。但是并没有弹窗,说明页面并不是全部刷新,而是修改部分,这种效果不错吧。
阅读全文
0 0
- webpack入门第7篇--热加载
- webpack入门第6篇
- webpack入门第一篇
- webpack react基础配置二 热加载
- webpack实现热加载自动刷新方法
- webpack 的热加载问题 以及解决方法
- 5.2webpack的热加载配置
- vue-cli的webpack项目,webpack-hot-middleware热加载热部署有时候不刷新页面
- redux+react+webpack+热加载+兼容IE8(持续更新)
- express使用webpack热加载替换时候遇到的坑
- webpack-hot-middleware热加载相关错误的解决办法
- Webpack dev server热加载失败的解决办法
- webpack-hot-middleware热加载相关错误的解决办法
- redux+react+webpack+热加载+兼容IE8(持续更新)
- webpack的使用(5) ---- 热加载自动刷新
- 使用NPM配置React环境及Webpack热加载
- webpack配置react-hot-loader热加载局部更新
- webpack入门篇
- Hdu 5936 Difference【思维+折半枚举+二分】
- 自定义调整kindeditor编辑器的工具栏items项目
- 二叉树的递归与非递归遍历(前序、中序、后序)
- 系统吞吐量、TPS(QPS)、用户并发量、性能测试概念和公式
- YOLO_V2教程
- webpack入门第7篇--热加载
- java中方法的重载和重写的区别
- eclipse导入web工程出现的几个问题解决方法
- 完整的struts2框架应用实例
- 移动端摄像头yuv旋转、裁剪、镜像、格式转换算法的实现及其原因
- 战略与执行交付的技巧
- es6的箭头函数,function* , yeild详解
- SpringSecurity 登录重定向问题
- vue 知识点