stef
- 浏览: 37811 次
- 性别:
- 来自: 大连
-
最新评论
文章列表
原创翻译，转载请注明出处。
原文地址：https://webpack.js.org/guides/webpack-and-typescript/
Typescript是一个类型化的JavaScript的超集，它被编译成纯JavaScript，在这篇指南里我们将会学习怎样统合webpack和Typascript。
原创翻译，转载请注明出处。
原文地址：https://webpack.js.org/guides/tree-shaking/
Tree shaking是一个术语，通常用于JavaScript的上下文来消除没有作用的代码，或者精确讲，保留有用代码。它依赖于ES2015中针对于其模块系统里静态构造的引入/导出。它的名字和概念由ES2015模块打包器rollup而广为人知。
Webpack2对ES2015模块提供了一个内置的支持，用来检测对未使用模块的导出。
例子
假设一个maths.js库文件导出两个函数，square和cube：
原创翻译，转载请注明出处。
原文地址：https://webpack.js.org/guides/public-path/
Webpack有个非常有用的配置，可以为为你应用里的所有资源指定一个基本路径。它被称为公共路径。
用例
有几个在实际应用中这个特性用的很灵巧的例子。
在编译时设定值
在开发模式下我们通常在index页同级别的路径下有一个assets/文件夹。这很好，但是假设你想在产品环境中把所有的静态资源文件都放在CND上呢？
原创翻译，转载请注明出处。
原文地址：https://webpack.js.org/guides/environment-variables/
你可以使用环境变量，来消除webpack.config.js中开发编译和正式产品编译之间的设定差异。可以利用Node.js模块里的标准访问方式：在运行webpack时设定一个环境变量，使用process.env来指向变量。变量NODE_ENV是常用的事实上的标准。
webpack.config.js
module.exports = {
plugins: [
new webpack.optimize.UglifyJsPlu ...
原创翻译，转载请注明出处。
原文地址：https://webpack.js.org/guides/author-libraries/
webapck作为一个打包的工具，既可以打包应用代码也可以打包库代码。如果你是一个JavaScript库的作者，并且正在寻找一种简单的打包方法的话，那么这篇文档会给你帮助。
创建一个库
假设你正在写一个叫webpack-numbers的小的库，它可以把
原创翻译，转载请注明出处。
原文地址：https://webpack.js.org/guides/shimming/
Webpack作为一个模块打包工具，能识别由ES2015模块，CommonJS或AMD编写的模块。但是有时候，使用第三方库的时候，它们期望有些依赖是全局可用的，给jquery定义别名$。它们也可能会创建用来导出的全局变量。这里我们会看到几种帮助webpack识别这些零碎模块的方式。
#相对于被打包的dist版本，更喜欢未压缩的CommonJS/AMD
原创翻译，转载请注明出处。
原文地址：https://webpack.js.org/guides/dependency-management/
es6 modules
commonjs
amd
通过表达式请求
模块请求里包含表达式的时候，就会创建一个上下文环境，所以在编译的时候还不知道确切的模块。
例子：
require("./template/"+ name +".ejs");
webpack分析require()，并提取一些信息：
Directory: ./template
Regular ...
原创翻译，转载请注明出处。
原文地址：https://webpack.js.org/guides/development/
在这一章里我们将介绍怎样开始开发，怎样从三个工具里选择一个进行开发。它假定你已经有了一个webpack配置文件。
调整你的文本编辑器
一 ...
原创翻译，转载请注明出处。
原文地址：https://webpack.js.org/guides/caching/
为了使webpack生成的静态资源能长时间的缓存：
使用[chunkhash]，为每一个文件添加一个基于内容的cache-buster。
把webpack
原创翻译，转载请注明出处。
原文地址：https://webpack.js.org/guides/production-build/
这一页解释了怎样使用webpack来做正式产品编译。
自动方式
运行webpack –p（等同于：webpack --optimize-minimize --define process.env.NODE_ENV="'productio
原创翻译，转载请注明出处。
原文地址：https://webpack.js.org/guides/code-splitting-require/
在这一章里，我们将讨论webpack怎样使用require.ensure来分割代码。
require.ensure()
编译的时候，webpack对代码里的require.ensure()进行静态解析 ...
原创翻译，转载请注明出处。
原文地址：https://webpack.js.org/guides/code-splitting-import/
动态引入
目前，一个把类函数的模块加载语法import()添加到ECMAScript的提议，正在讨论中。
ES2015加载器细则定义import()为一个能在运行时动态加载ES2015模块的方法。
原创翻译，转载请注明出处。
原文地址：https://webpack.js.org/guides/code-splitting/
一个典型的应用基于框架或者功能的需求，会依赖于许多第三方库。会使用这些库的特定版本，代码不会频繁变更。相对比，应用的代码会频繁 ...
原创翻译，转载请注明出处。
原文地址：https://webpack.js.org/guides/code-splitting/
用webpack打包CSS文件，把CSS文件像别的模块一样引入你的JavaScript代码，使用css-loader（把CSS作为JS模块输出），并且可选择应用ExtractTextWebpackPlugin（提取打包后的CSS并且输出CSS文件）。
引入CSS
像JavaScript模块一样引入CSS文件，以vendor.js举例：
import'bootstrap/dist/css/bootstrap.css';
使用css- ...
原创翻译，转载请注明出处。
原文地址：https://webpack.js.org/guides/code-splitting/
代码分割是webpack诸多强大功能之一。它允许你把你的代码分割成各种各样的包，你可以按需来加载它们—像当一个用户导航到一个匹配的路由， ...