摘要：以前看或者做开发的时候，常常看到。看介绍是一个基于框架的小服务，通过来处理这个打包机小查了一下，的作用是把打包成中间件。原理大致清楚了，还可以根据需求选不同的模式事不宜迟，赶紧试试吧。那么是如何引进来的呢所以说，是生成在内存中的。
以前看demo或者做开发的时候，常常看到webpack-dev-server。
这边敲代码，同时刷新浏览器，真是nice!
但是自己却没有了解学习过它是怎一回事，直接就着用。导致现在觉得不把这个东西吃一吃，浑身不自在！
原理是什么
这么神奇的东西的原理是什么，作为小白开发者当然很好奇。
看介绍http://webpack.github.io/docs...
webpack-dev-server是一个基于express框架的nodejs小服务，通过webpack-dev-middleware来处理webpack这个打包机（小walker查了一下，webpack-dev-middleware的作用是把webpack打包成中间件）。它也有一个连接这个服务的小运行环境，经由sock.js实现（sock.js小walker查了一下，是一个js库，可用作创建跨浏览器的，浏览器和服务器间的通信信道）。
原理大致清楚了，还可以根据需求选不同的模式？事不宜迟，赶紧试试吧。
尝试代码的github地址https://github.com/WalkerZyy/...
Try No.1 hello world
文件目录：
package.json:
配置webpack.config.js：
参考着官网写了个服务：
由于unshift进dev的那串代码意义不明，所以先注释了，后面再研究
dev中的main.js：
helloworld.html:
package.json中加命令
浏览器中看结果：
好了，成功了，但是还是有些小疑惑，下面一点点来扣
首先，参数解读之contentBase
The webpack-dev-server will serve the files in the current directory, unless you configure a specific content base.
也就是说，服务会默认一个网站目录，如果我不填这个参数，相当于
contentBase:"./"
浏览器访问结果：
现象观察，生成的index.js在哪里
我的helloworld.html里引入了编译后的index.js，但是bin目录里并没有，任何目录里都没有。那么是如何引进来的呢？
所以说，是生成在内存中的。
描述中，有个publicPath，这时候我如果添加publicPath，也就是“/assets/”
取不到了
改为：
就ok了
另外如英语描述，打包是实时的，我加个新感叹号
就看到又打包了，刷新网页：
自动刷新
刚才没有自动刷新的，因为没有配
自动刷新有两种模式Inline 和iframe
最终效果都一样
参考http://blog.csdn.net/chengnuo...
这两种模式，官网都有讲
webpack-dev-server的启动模式有两种
node Api模式和cmd模式
之前注释掉的下面这段代码就是配置nodejs Api形式的inline模式
Hot Module Replacement
热替换是什么
参考https://segmentfault.com/a/11...
命令行方式的做法先略去，直接看node.js Api的做法
按照官网的做法
public地址不对会有跨域报错
热替换原来也是要刷新页面的吗？
https://segmentfault.com/a/11...
https://segmentfault.com/q/10...
所以说，热替换是给可以热替换的模块用的
好了，不纠结了，先写这么多
文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。
转载请注明本文地址：https://www.ucloud.cn/yun/81454.html
摘要：处理文件的扩展名很多的配置文件都有一个属性，然后就像下面代码所示有一个空字符串的值。空字符串在此是为了一些在文件时不带文件扩展名的表达式，如或者译者注实际就是自动添加后缀，默认是当成文件来查找路径就这么多。 原文 Webpack—The Confusing Partsissue讨论 Webpack是目前基于React和Redux开发的应用的主要打包工具。我想使用Angular 2或其他...
摘要：是一个和差不多同时代的产物，但是它只支持基于，对于来说只能兴叹了。找一个自己顺手的就好，顺便一提，我现在主要使用辅助。 说到自动化构建，你想到了什么？基于AMD的requirejs？还是基于commoJS的browserify？他们都在各自的领域或者说时代发挥了很重要的作用。但是时代的变迁，webpack成了现在的佼佼者，我们不知道什么时候wepback也会被取代，但是现在我们必须要掌...
摘要：而则可制定个人需求的一套解决方案仅安装需要的插件。迫不及待的你已经等不及安装使用了吧。安装及使用一般是结合自动化工具使用，如果要单独使用可以安装，这里我先对的安装使用讲解下。接下来说点实际的，如何利用结合自动化工作在项目中使用。 PostCSS介绍 PostCSS是一个利用JS插件来对CSS进行转换的工具，这些插件非常强大，强大到无所不能。其中，Autoprefixer就是众多Post...
摘要：译文原文来自写在前面使用已经蛮长一段时间但是在新项目开始之际都是东拼西凑其他项目的配置来使用如果要自己从零开始写一个完整项目的配置估计得费死劲所以在发布版本之际正是时候来认真从零开始学习了是一个出自的库用于构建用户交互界面是一个非常厉害的有 译文,原文来自https://scotch.io/tutorials/s...写在前面,使用webpack已经蛮长一段时间,但是在新项目开始之际,...
摘要：介绍说明的包管理器，用于插件管理包括安装卸载管理依赖等使用安装插件命令提示符执行插件名称。总结安装新建文件全局和本地安装安装插件新建文件通过命令提示符运行任务。 showImg(https://segmentfault.com/img/remote/1460000010873466); 前言 众所周知目前比较火的工具就是gulp和webpack，但webpack和gulp却有所不同，本...
阅读 1549·2021-11-22 15:33
阅读 1761·2021-10-08 10:04
阅读 3402·2021-08-27 13:12
阅读 3291·2019-08-30 13:06
阅读 1354·2019-08-29 16:43
阅读 1288·2019-08-29 16:40
阅读 609·2019-08-29 16:15
阅读 2539·2019-08-29 14:13
