stef
- 浏览: 37820 次
- 性别:
- 来自: 大连
-
最新评论
文章列表
原创翻译，转载请注明出处。
原文地址：https://webpack.js.org/guides/installation/
前提条件
在开始之前，确保你已经安装了新版本的Node.js。当前的LTS版是理想的起点。使用老版本的话你会遇到很多问题，它们可能缺少功能性的webpack或者需要相关联的包。
下面将会告诉你怎样在项目里本地安装webpack。
原创翻译，转载请注明出处。
原文地址：https://webpack.js.org/guides/get-started/
Webpack是一个在应用里构建JavaScript模块的工具。在安装完之后，通过命令行接口（cli）或api来使用它。Webpack通过快速构建一个应用的依赖图并按照正确的顺序绑定它们来简化工作流程。Webpack可以通过配置来定制优化你的代码，为你的产品分割出服务商，CSS或者JS代码，运行开发服务器它不用刷新页面而可以热加载代码等等非常棒的特性。
创建一个包
建一个演示用路径来实验webpack
原创翻译，转载请注明出处。
原文地址：https://webpack.js.org/concepts/hot-module-replacement/
模块热替换（Hot Module Replacement/HMR），用来在一个运行中的应用里变换，增加和删除模块，而不需要页面再加载。这使变更一个模块的时候，不用通过刷新页面而更新这个模块，提高了开发的速度。
它是怎样工作的？
以应用视点
应用代码要求运行期HMR
原创翻译，转载请注明出处。
原文地址：https://webpack.js.org/concepts/dependency-graph/
因为JavaScript即可以编写服务器端程序也可以编写客户端程序，webpack提供了多个部署目标，你可以在webpack配置文件里设定。
用法
只要简单的在webpack
原创翻译，转载请注明出处。
原文地址：https://webpack.js.org/concepts/dependency-graph/
任何时候，一个文件依赖于另一个文件，webpack就把它看作一个依赖。这样就允许webpack能处理非代码资源，像图片或字体，并且也可以作为依赖，在你的应用里提供他们。
当webpack处理你的应用的时候，它从命令行或者它的配置文件里定义的模块列表开始。从这些入口点开始，webpack递归创建一个依赖图，它包含了你的应用需要的所有模块，然后把这些应用打包到几个包里，经常是就一个，在你的浏览器里被加载。
-- End --
原创翻译，转载请注明出处。
原文地址：https://webpack.js.org/concepts/module-resolution/
模块解析
解析器是一个库，它能依据模块的绝对路径来找到模块。使用下面的方法，一个模块就可以被另一个模块当作依赖来请求：
import foo from'path/to/module'
// or
require('path/to/module')
依赖模块可以是应用代码也可以是第三方的库。在每一个require/import声明的地方，解析器帮助webpack找到模块的代码把它们包含到包里。Webpack在打包模块的时候使用e ...
原创翻译，转载请注明出处。
原文地址：https://webpack.js.org/concepts/modules/
在模块编程里，开发人员把程序分割成几个功能性的块，成为模块。
每一个模块都有一个相对于整个程序较小的表层部分，做一些验证，调试和零碎测试等。写个比较好的模块，提供了一致的抽象和边界封装，所以，在应用整体里每一个模块都有一个清晰的设计和明了的目的。
Node.js几乎从它开始启动的时候，就支持模块编程。在互联网上，支持模块已经慢慢来到。在网上已经有多个支持模块的工具，它们有各样的优点和局限。Webpack从这些系统中吸取教训，把模块的概念适用于你项目中的所有文件。 ...
原创翻译，转载请注明出处。
原文地址：https://webpack.js.org/concepts/plugins/
你可能注意到极少有webpack配置文件看起来一模一样。这是因为webpack配置文件是一个能导出一个对象的JavaScript文件。Webpack根据它定义的属性来处理这个对象。
因为它是一个标准的Node.js CommonJS模块，所以你可以做一下事情：
通过require(…)
原创翻译，转载请注明出处。
原文地址：https://webpack.js.org/concepts/plugins/
插件是webpack的核心。Webpack本身就是在你的wepback配置文件里使用的同样的插件系统来构建的。
它还能实现加载器不能实现的其他任何事情。
解析
一个webpack插件，就是一个带有apply属性的javascript对象。apply属性被webpack编译器调用，整个编译生命周期都有这个权利。
ConsoleLogOnBuildWebpackPlugin.js
原创翻译，转载请注明出处。
原文地址：https://webpack.js.org/concepts/loaders/
加载器是应用于你的应用里源代码，实现转换。它们是函数（运行于Node.js），用源文件作为参数，生成新文件。
例子
例如，使用加载器来告诉webpack加载CSS文件，或者把TypeScript转换为Javascript。
原创翻译，转载请注明出处。
原文地址：https://webpack.js.org/concepts/output/
选项会影响编译的输出。Output的选项告诉webpack怎样把编译后的文件写入硬盘。注意，可能会有多个入口点，但是能有一个output配置。
如果使用hashing（[hash]或[chunkhash]），需要确保模块的顺序保持不变。可以用OccurrenceOrderPlugin或者recordsPath。
用法
Webpack配置文件里output属性的最低要求是给一个对象设定值。它包含两个东西：你想要的编译后的文件名（filename），和一个ou ...
原创翻译，转载请注明出处。
原文地址：https://webpack.js.org/concepts/entry-points
就像我们在介绍里提到的那样，在你的webpack配置文件里有很多方法去定义entry属性。我们将给你展示几种方法，并说明它为什么对你有用。
单个的Entry（简写）语法
用法：entry: string | Array<string>
webpack.config.js
const config ={
entry:'./path/to/my/entry/file.js'
};
module.export ...
原创翻译，转载请注明出处。
原文地址：https://webpack.js.org/concepts/
概念
Webkack是一个现代javascript程序的打包工具。它可以灵活配置，在开始使用之前，你应该理解它的4个核心概念。
作为学习webpack的一部分，这个文档的 ...
原创翻译，转载请注明出处。
原文标题：Angular2 with NPM and Webpack
原文地址：https://www.illucit.com/blog/2016/06/angular2-npm-webpack/
这篇文章演示了怎样使用Webpack来配置Angular2工程。这些配置还包含了TypeScript，Less，CSS（例如Bootstrap）和字体（例如FontAwesome）。
必须的NPM包
Webpack需要的所有依赖，都放到package.json的devDependencies里，这样的话NPM就能自动安装它们。
...
1、定义接收端事件的处理
对每个PeerConnection定义[fileTransfer]事件的处理，取得元数据和filetransfer.Receiver参数。
1.1、对Receiver定义[progress]事件处理：传输过程中
receiver.on('progress', function (bytesReceived) {});
1.2、对Receiver定义[receivedFile]事件处理：传输完了
receiver.on('receivedFile', function (file, metadata) {});
2、定义发送端事件的处理
2.1、对发 ...