iteye_5929的博客

原创翻译，转载请注明出处。原文标题：Angular2 with NPM and Webpack原文地址：https://www.illucit.com/blog/2016/06/angular2-npm-webpack/ 这篇文章演示了怎样使用Webpack来配置Angular2工程。这些配置还包含了TypeScript，Less，CSS（例如Bootstrap）和字体（例如F...

原创翻译，转载请注明出处。 原文地址：https://webpack.js.org/guides/code-splitting/ 一个典型的应用基于框架或者功能的需求，会依赖于许多第三方库。会使用这些库的特定版本，代码不会频繁变更。相对比，应用的代码会频繁变更。连同第三方库的代码一起打包应用代码会非常低效。这是因为会基于缓存头部信息来缓存资源文件，并且缓存的文件如果内容没有变更，...

原创翻译，转载请注明出处。 原文地址：https://webpack.js.org/guides/code-splitting-import/ 动态引入目前，一个把类函数的模块加载语法import()添加到ECMAScript的提议，正在讨论中。ES2015加载器细则定义import()为一个能在运行时动态加载ES2015模块的方法。webpack把import()当作一...

原创翻译，转载请注明出处。 原文地址：https://webpack.js.org/guides/code-splitting-require/ 在这一章里，我们将讨论webpack怎样使用require.ensure来分割代码。 require.ensure()编译的时候，webpack对代码里的require.ensure()进行静态解析。任何一个作为一个依赖被引用...

原创翻译，转载请注明出处。 原文地址：https://webpack.js.org/guides/production-build/ 这一页解释了怎样使用webpack来做正式产品编译。 自动方式运行webpack –p（等同于：webpack --optimize-minimize --define process.env.NODE_ENV="'production'"...

原创翻译，转载请注明出处。 原文地址：https://webpack.js.org/guides/caching/ 为了使webpack生成的静态资源能长时间的缓存：使用[chunkhash]，为每一个文件添加一个基于内容的cache-buster。把webpack的对象清单提取到单独的文件里。确保在依赖群没有发生变化的时候，包含启动引导指令代码的入口点代码块不...

原创翻译，转载请注明出处。 原文地址：https://webpack.js.org/guides/development/ 在这一章里我们将介绍怎样开始开发，怎样从三个工具里选择一个进行开发。它假定你已经有了一个webpack配置文件。 调整你的文本编辑器一些文本编辑器有一个“safe write”的功能并被默认为有效。结果一个文件被保存之后并没有被重新编译。每种编...

原创翻译，转载请注明出处。原文地址：https://webpack.js.org/guides/dependency-management/ es6 modulescommonjsamd 通过表达式请求模块请求里包含表达式的时候，就会创建一个上下文环境，所以在编译的时候还不知道确切的模块。例子： require("./template/"+ name...

原创翻译，转载请注明出处。 原文地址：https://webpack.js.org/guides/shimming/ Webpack作为一个模块打包工具，能识别由ES2015模块，CommonJS或AMD编写的模块。但是有时候，使用第三方库的时候，它们期望有些依赖是全局可用的，给jquery定义别名$。它们也可能会创建用来导出的全局变量。这里我们会看到几种帮助webpack识别这些...

原创翻译，转载请注明出处。原文地址：https://webpack.js.org/guides/author-libraries/ webapck作为一个打包的工具，既可以打包应用代码也可以打包库代码。如果你是一个JavaScript库的作者，并且正在寻找一种简单的打包方法的话，那么这篇文档会给你帮助。 创建一个库假设你正在写一个叫webpack-numbers的小的库，...

原创翻译，转载请注明出处。原文地址：https://webpack.js.org/guides/environment-variables/ 你可以使用环境变量，来消除webpack.config.js中开发编译和正式产品编译之间的设定差异。可以利用Node.js模块里的标准访问方式：在运行webpack时设定一个环境变量，使用process.env来指向变量。变量NODE_ENV是...

原创翻译，转载请注明出处。原文地址：https://webpack.js.org/guides/public-path/ Webpack有个非常有用的配置，可以为为你应用里的所有资源指定一个基本路径。它被称为公共路径。 用例有几个在实际应用中这个特性用的很灵巧的例子。 在编译时设定值在开发模式下我们通常在index页同级别的路径下有一个assets/文件夹。这...

原创翻译，转载请注明出处。原文地址：https://webpack.js.org/guides/tree-shaking/ Tree shaking是一个术语，通常用于JavaScript的上下文来消除没有作用的代码，或者精确讲，保留有用代码。它依赖于ES2015中针对于其模块系统里静态构造的引入/导出。它的名字和概念由ES2015模块打包器rollup而广为人知。Webpac...

原创翻译，转载请注明出处。 原文地址：https://webpack.js.org/guides/code-splitting/ 用webpack打包CSS文件，把CSS文件像别的模块一样引入你的JavaScript代码，使用css-loader（把CSS作为JS模块输出），并且可选择应用ExtractTextWebpackPlugin（提取打包后的CSS并且输出CSS文件）。 ...

原创翻译，转载请注明出处。 原文地址：https://webpack.js.org/guides/code-splitting/ 代码分割是webpack诸多强大功能之一。它允许你把你的代码分割成各种各样的包，你可以按需来加载它们—像当一个用户导航到一个匹配的路由，或者来自用户的一个事件。它允许更小的包，并且允许你按照优先顺序来控制资源加载，如果运用得当，会对你的应用加载时间有显著的...

原创翻译，转载请注明出处。 原文地址：https://webpack.js.org/guides/installation/  前提条件在开始之前，确保你已经安装了新版本的Node.js。当前的LTS版是理想的起点。使用老版本的话你会遇到很多问题，它们可能缺少功能性的webpack或者需要相关联的包。下面将会告诉你怎样在项目里本地安装webpack。 本地安装...

原创翻译，转载请注明出处。原文地址：https://webpack.js.org/concepts/ 概念Webkack是一个现代javascript程序的打包工具。它可以灵活配置，在开始使用之前，你应该理解它的4个核心概念。作为学习webpack的一部分，这个文档的目的是给你一个这些概念的高层次的概述，同时会提供这些概念的详细用例连接。 入口（Entry）We...

原创翻译，转载请注明出处。原文地址：https://webpack.js.org/concepts/entry-points 就像我们在介绍里提到的那样，在你的webpack配置文件里有很多方法去定义entry属性。我们将给你展示几种方法，并说明它为什么对你有用。 单个的Entry（简写）语法用法：entry: string | Array<string>...

原创翻译，转载请注明出处。原文地址：https://webpack.js.org/concepts/output/ 选项会影响编译的输出。Output的选项告诉webpack怎样把编译后的文件写入硬盘。注意，可能会有多个入口点，但是能有一个output配置。如果使用hashing（[hash]或[chunkhash]），需要确保模块的顺序保持不变。可以用OccurrenceOrd...

原创翻译，转载请注明出处。 原文地址：https://webpack.js.org/concepts/loaders/ 加载器是应用于你的应用里源代码，实现转换。它们是函数（运行于Node.js），用源文件作为参数，生成新文件。例子例如，使用加载器来告诉webpack加载CSS文件，或者把TypeScript转换为Javascript。首先，安装对应的加载器： ...

原创翻译，转载请注明出处。 原文地址：https://webpack.js.org/concepts/plugins/ 插件是webpack的核心。Webpack本身就是在你的wepback配置文件里使用的同样的插件系统来构建的。它还能实现加载器不能实现的其他任何事情。 解析一个webpack插件，就是一个带有apply属性的javascript对象。apply属性被...

原创翻译，转载请注明出处。 原文地址：https://webpack.js.org/concepts/plugins/  你可能注意到极少有webpack配置文件看起来一模一样。这是因为webpack配置文件是一个能导出一个对象的JavaScript文件。Webpack根据它定义的属性来处理这个对象。因为它是一个标准的Node.js CommonJS模块，所以你可以做一下事情...

原创翻译，转载请注明出处。原文地址：https://webpack.js.org/concepts/modules/ 在模块编程里，开发人员把程序分割成几个功能性的块，成为模块。每一个模块都有一个相对于整个程序较小的表层部分，做一些验证，调试和零碎测试等。写个比较好的模块，提供了一致的抽象和边界封装，所以，在应用整体里每一个模块都有一个清晰的设计和明了的目的。Node.js几...

原创翻译，转载请注明出处。 原文地址：https://webpack.js.org/concepts/module-resolution/ 模块解析解析器是一个库，它能依据模块的绝对路径来找到模块。使用下面的方法，一个模块就可以被另一个模块当作依赖来请求：import foo from'path/to/module'// orrequire('path/to/mod...

原创翻译，转载请注明出处。 原文地址：https://webpack.js.org/concepts/dependency-graph/ 任何时候，一个文件依赖于另一个文件，webpack就把它看作一个依赖。这样就允许webpack能处理非代码资源，像图片或字体，并且也可以作为依赖，在你的应用里提供他们。 当webpack处理你的应用的时候，它从命令行或者它的配置文件里定义的...

原创翻译，转载请注明出处。 原文地址：https://webpack.js.org/concepts/dependency-graph/ 因为JavaScript即可以编写服务器端程序也可以编写客户端程序，webpack提供了多个部署目标，你可以在webpack配置文件里设定。 用法只要简单的在webpack配置文件里设定target值，就可以设定target属性：w...

原创翻译，转载请注明出处。 原文地址：https://webpack.js.org/concepts/hot-module-replacement/ 模块热替换（Hot Module Replacement/HMR），用来在一个运行中的应用里变换，增加和删除模块，而不需要页面再加载。这使变更一个模块的时候，不用通过刷新页面而更新这个模块，提高了开发的速度。 它是怎样工作的？...

原创翻译，转载请注明出处。 原文地址：https://webpack.js.org/guides/get-started/ Webpack是一个在应用里构建JavaScript模块的工具。在安装完之后，通过命令行接口（cli）或api来使用它。Webpack通过快速构建一个应用的依赖图并按照正确的顺序绑定它们来简化工作流程。Webpack可以通过配置来定制优化你的代码，为你的产品分割...

原创翻译，转载请注明出处。原文地址：https://webpack.js.org/guides/webpack-and-typescript/ Typescript是一个类型化的JavaScript的超集，它被编译成纯JavaScript，在这篇指南里我们将会学习怎样统合webpack和Typascript。 基本设定为了开始webpack和Typescript，首先我们...