学习webpack,基本始终是围绕:
1.如何安装webpack
2.如何使用webpack
3.如何使用loader
4.如何使用开发服务器
可能我们会在如何使用开发服务器的时候,遇到诸如调试的相关问题:
使用开发服务器
我们webpack中使用的开发调试服务器通常是 webpack-dev-server,通过这个服务我们更多的是想实现无刷新的处理编译入口文件。
通过以下命令全局安装
1
|
npm install webpack-dev-server -g |
启动服务器
1
|
webpack-dev-server --progress --colors |
这会绑定一个小型express服务器到localhost:8080
,来为你的静态资源及bundle(自动编译)服务。通过访问http://localhost:8080/webpack-dev-server/bundle
,bundle每次重编译后浏览器页面都会自动更新。
但这里可能会遇到,我们改动js文件,无法实时更新的问题,很大一部分原因是没有理解编译后的bundle是虚拟的问题,本地其实质是没有编译的,所以我们不能用本地的路径去处理,需要进行更改为http://localhost:8080/bundle.js.
我们可能预想实现无刷新是这样的:
- js 文件修改
- webpack-dev-server 监控到变化
- webpack 重新编译
- 实时更新浏览器中的页面
但可惜的是,http://localhost:8080/index.html
对 js 文件的变化无动于衷,改完之后,手动刷新才能生效。
webpack-dev-server 提供了两种模式用于自动刷新页面:
-
iframe 模式
我们不访问
http://localhost:8080
,而是访问http://localhost:8080/webpack-dev-server/index.html
-
inline 模式
在命令行中指定该模式,
webpack-dev-server --inline
。这样http://localhost:8080/index.html
页面就会在 js 文件变化后自动刷新了。
由于如此我的package.json文件可能就是这样,方便我去快速启动
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
|
{ "name" : "react-sample" , "version" : "1.0.0" , "description" : "webpack demo" , "main" : "./src/entry.js" , "scripts" : { "start" : "webpack-dev-server --inline --hot" , "build" : "webpack --display-error-details" , "watch" : "webpack --progress --colors --watch" }, "repository" : { "type" : "git" , "url" : "https://github.com/dwqs/react_practice.git" }, "keywords" : [ "react" , "webpack" ], "author" : "pomy" , "devDependencies" : { "babel-core" : "^5.8.25" , "babel-loader" : "^5.3.2" , "react" : "^0.14.5" , "react-dom" : "^0.14.5" , "react-hot-loader" : "^1.3.0" , "webpack" : "^1.12.2" , "webpack-dev-server" : "^1.14.0" } } |
解释一下官方推荐的无刷新:
示例代码:
package.json
"scripts": { "dev": "webpack-dev-server --devtool eval --progress --colors --hot --content-base build", /*build导致找不到页面 cannot file*/ "hot": "webpack-dev-server --devtool eval --progress --colors --hot --content-base", }
webpack.config.js
module.exports = { entry: [ 'webpack/hot/dev-server', 'webpack-dev-server/client?http://localhost:8080', path.resolve(__dirname, './src/entry.js') ] };
官方的无刷新,其实是在前面讲到的iframe实现的实时刷新,如果我们,至进行http://localhost:8080/index.html是不会进行实时刷新的。还有一点,就是官方后面加的build,作用时让其监测,打包出bundle.js,但亲测会导致,到cannot page file, 所以建议,调试完毕之后,手动打包。
最近给大家一个建议,多看官方的示例文档,这才是快速入门的最佳渠道,webpack官方文档。
注意:通常我们设置好webpack-dev-server服务自动刷新预览功能之后,发现手机预览不了,其实是由于webpack-pack-server服务安全机制导致的,只允许本机访问,我们可以把host设置为0.0.0.0就可以允许或者设置为本机地址。
解决参考资料:stackoverflow问答 stackoverflow问答2 github isuues
参考资料:
Webpack-dev-server结合后端服务器的热替换配置