解决 webpack-dev-server 不能自动刷新的问题

简介: 原文发表于我的技术博客此文主要帮助大家解决 webpack-dev-server 启动后修改源文件浏览器不能自动刷新的问题。原文发表于我的技术博客1. webpack 不能热加载的问题主要的问题是各个版本之间的兼容性问题,请在本地的项目配置文件 package.json 中直接拷贝下面的配置文件,然后完整删除 node_modules 文件夹后,在项目文件夹下执行 npm install 即可。

原文发表于我的技术博客

截图

此文主要帮助大家解决 webpack-dev-server 启动后修改源文件浏览器不能自动刷新的问题。

原文发表于我的技术博客

1. webpack 不能热加载的问题

主要的问题是各个版本之间的兼容性问题,请在本地的项目配置文件 package.json 中直接拷贝下面的配置文件,然后完整删除 node_modules 文件夹后,在项目文件夹下执行 npm install 即可。注意 Mac 系统下需要在命令前加 sudo
安装完成后执行 webpack-dev-server --inline --hot 即可正常自动刷新了。

{% codeblock lang:js%}
{
"name": "10-03",
"version": "1.0.0",
"description": "",
"main": "root.js",
"scripts": {
"test": "echo "Error: no test specified" && exit 1"
},
"author": "",
"license": "ISC",
"dependencies": {
"antd": "^2.1.0",
"babel": "^5.8.23",
"babel-core": "^6.1.21",
"babel-loader": "^6.1.0",
"babel-plugin-react-html-attrs": "^2.0.0",
"babel-preset-es2015": "^6.24.0",
"babel-preset-react": "^6.23.0",
"babelify": "^7.3.0",
"css-loader": "^0.25.0",
"fetch": "^1.1.0",
"json-loader": "^0.5.4",
"react": "^15.3.2",
"react-dom": "^15.3.2",
"react-mixin": "^2.0.2",
"react-responsive": "^1.2.1",
"react-router": "^2.8.1",
"style-loader": "^0.13.1",
"webpack": "^1.13.2",
"webpack-dev-server": "^1.16.1"
},
"devDependencies": {
"babel-plugin-import": "^1.0.1"
}
}

{% endcodeblock %}


作者:Parry
出处:http://www.cnblogs.com/parry/
本文版权归作者和博客园共有,欢迎转载,但未经作者同意必须保留此段声明,且在文章页面明显位置给出原文连接,否则保留追究法律责任的权利。

相关文章
|
2月前
|
JavaScript
webpack打包TS
webpack打包TS
133 60
|
1月前
|
缓存 前端开发 JavaScript
Webpack 打包的基本原理
【10月更文挑战第5天】
|
1月前
|
前端开发 JavaScript
ES6模块化和webpack打包
【10月更文挑战第5天】
|
1月前
|
缓存 前端开发 JavaScript
深入了解Webpack:模块打包的革命
【10月更文挑战第11天】深入了解Webpack:模块打包的革命
|
2月前
|
JavaScript 测试技术 Windows
vue配置webpack生产环境.env.production、测试环境.env.development(配置不同环境的打包访问地址)
本文介绍了如何使用vue-cli和webpack为Vue项目配置不同的生产和测试环境,包括修改`package.json`脚本、使用`cross-env`处理环境变量、创建不同环境的`.env`文件,并在`webpack.prod.conf.js`中使用`DefinePlugin`来应用这些环境变量。
115 2
vue配置webpack生产环境.env.production、测试环境.env.development(配置不同环境的打包访问地址)
|
1月前
|
缓存 前端开发 JavaScript
Webpack技术深度解析:模块打包与性能优化
【10月更文挑战第13天】Webpack技术深度解析:模块打包与性能优化
|
1月前
|
前端开发 JavaScript 开发者
深入了解Webpack:现代JavaScript应用的打包利器
【10月更文挑战第11天】 深入了解Webpack:现代JavaScript应用的打包利器
|
2月前
|
缓存
webpack 打包多页面应用
webpack 打包多页面应用
25 1
|
2月前
webpack 打包多页面应用
webpack 打包多页面应用
|
2月前
|
前端开发 开发者
在前端开发中,webpack 作为一个强大的模块打包工具,为我们提供了丰富的功能和扩展性
【9月更文挑战第1天】在前端开发中,Webpack 作为强大的模块打包工具,提供了丰富的功能和扩展性。本文重点介绍 DefinePlugin 插件,详细探讨其原理、功能及实际应用。DefinePlugin 可在编译过程中动态定义全局变量,适用于环境变量配置、动态加载资源、接口地址配置等场景,有助于提升代码质量和开发效率。通过具体配置示例和注意事项,帮助开发者更好地利用此插件优化项目。
83 13
下一篇
无影云桌面