diff --git a/.gitignore b/.gitignore index 72c0ffe11891..4482e967f10d 100755 --- a/.gitignore +++ b/.gitignore @@ -2,8 +2,7 @@ node_modules npm-debug.log build generated -support-backers.json -support-sponsors.json +support-*.json starter-kits-data.json .antwar .idea diff --git a/src/components/Splash/Splash.jsx b/src/components/Splash/Splash.jsx index 66c8c20f1a9e..e1c2ccba1cef 100755 --- a/src/components/Splash/Splash.jsx +++ b/src/components/Splash/Splash.jsx @@ -29,19 +29,19 @@ const Splash = () => (

通过你的贡献、捐款或者赞助，webpack 将获得繁荣发展。你的捐助直接用于支持我们付出工作、持续改进，最加重要的是有助于我们提供优秀的文档和资料！

平台赞助

- +

金牌赞助

- +

银牌赞助

- +

铜牌赞助

- +

赞助者

- + diff --git a/src/components/Support/Support.jsx b/src/components/Support/Support.jsx index e43777d2b3dd..2890af4772c5 100755 --- a/src/components/Support/Support.jsx +++ b/src/components/Support/Support.jsx @@ -1,9 +1,17 @@ import React from 'react'; -import Additional from './support-additional.json'; +import GoldSponsors from './support-goldsponsors.json'; +import SilverSponsors from './support-silversponsors.json'; +import Sponsors from './support-sponsors.json'; +import Backers from './support-backers.json'; +import Additional from './support-additional.js'; import './Support.scss'; const ranks = { + backer: { + maximum: 200 + }, bronze: { + minimum: 200, maximum: 2000 }, silver: { @@ -19,17 +27,37 @@ const ranks = { } }; +function formatMoney(number) { + let str = Math.round(number) + ''; + if (str.length > 3) { + str = str.substr(0, str.length - 3) + ',' + str.substr(-3); + } + return str; +} + export default class Support extends React.Component { render() { - let { rank, type } = this.props; - let supporters = require(`./support-${type}.json`); + let { rank } = this.props; + let supporters = [ + ...GoldSponsors, + ...SilverSponsors, + ...Sponsors, + ...Backers, + ]; - if (type === 'sponsors') { - supporters = supporters.slice(); - supporters.push(...Additional); - supporters.sort((a, b) => b.totalDonations - a.totalDonations); + // merge or add additional backers/sponsors + for(const additional of Additional) { + const existing = supporters.find(supporter => supporter.username && supporter.username === additional.username); + if (existing) { + existing.totalDonations += additional.totalDonations; + } else { + supporters.push(additional); + } } + // resort list + supporters.sort((a, b) => b.totalDonations - a.totalDonations); + let minimum, maximum; if (rank && ranks[rank]) { @@ -48,14 +76,14 @@ export default class Support extends React.Component { return (
- { type === 'sponsors' ? ( + { rank === 'backer' ? (

- { rank } sponsors - are those who have pledged { minimum ? `$${minimum}` : 'up' } { maximum ? `to $${maximum}` : 'or more' } to webpack. + The following Backers are individuals who have contributed various amounts of money in order to help support webpack. Every little bit helps, and we appreciate even the smallest contributions.

) : (

- The following Backers are individuals who have contributed various amounts of money in order to help support webpack. Every little bit helps, and we appreciate even the smallest contributions. + { rank } sponsors + are those who have pledged { minimum ? `$${formatMoney(minimum)}` : 'up' } { maximum ? `to $${formatMoney(maximum)}` : 'or more' } to webpack.

)}
@@ -64,22 +92,22 @@ export default class Support extends React.Component { supporters.map((supporter, index) => ( { supporter.avatar ? { : supporter.name } - { type === 'backers' ?
: null } + { rank === 'backer' ?
: null } )) }
diff --git a/src/components/Support/Support.scss b/src/components/Support/Support.scss index ce649015ec8e..476abccdbac4 100755 --- a/src/components/Support/Support.scss +++ b/src/components/Support/Support.scss @@ -22,22 +22,25 @@ margin: 0 2px 2px 2px; } - &__sponsors-avatar { - &-bronze, &-normal { - height: 32px; - } - &-silver { - height: 64px; - } - &-gold { - height: 96px; - } - &-platinum { - height: 128px; - } + &__bronze-avatar { + height: 32px; + max-width: 96px; + } + + &__silver-avatar { + height: 64px; + max-width: 192px; + } + + &__gold-avatar { + height: 96px; + } + + &__platinum-avatar { + height: 128px; } - &__backers-avatar-normal { + &__backer-avatar { width: 31px; height: 31px; border-radius: 50%; diff --git a/src/components/Support/assets/segment-logo.png b/src/components/Support/assets/segment-logo.png new file mode 100644 index 000000000000..33552ece113a Binary files /dev/null and b/src/components/Support/assets/segment-logo.png differ diff --git a/src/components/Support/support-additional.js b/src/components/Support/support-additional.js new file mode 100644 index 000000000000..17ef3d34340e --- /dev/null +++ b/src/components/Support/support-additional.js @@ -0,0 +1,38 @@ +export default [ + { + name: "MoonMail", + avatar: "https://static.moonmail.io/moonmail-logo.svg", + website: "https://moonmail.io/?utm_source=webpack.js.org", + totalDonations: 11000, + reason: "Paypal" + }, + { + name: "Google Angular", + avatar: "https://res.cloudinary.com/opencollective/image/upload/v1485288529/angular_uxllte.png", + website: "https://angular.io/?utm_source=webpack&utm_medium=documentation&utm_campaign=sponsorship", + totalDonations: 250000, + reason: "Paypal" + }, + { + name: "Architects.io", + avatar: null, + website: "http://architects.io/?utm_source=webpack&utm_medium=documentation&utm_campaign=sponsorship", + totalDonations: 30000, + reason: "Paypal" + }, + { + username: "peerigon", + name: "Peerigon", + avatar: "https://opencollective-production.s3-us-west-1.amazonaws.com/e8a1de10-99c8-11e6-8650-f92e594d5de8.png", + website: "https://peerigon.com/?utm_source=webpack&utm_medium=documentation&utm_campaign=sponsorship", + totalDonations: 144139, + reason: "webpack meetup 2017-07" + }, + { + name: "Segment", + avatar: require("./assets/segment-logo.png"), + website: "https://segment.com/?utm_source=webpack&utm_medium=documentation&utm_campaign=sponsorship", + totalDonations: 2400000, + reason: "Sponsorship 2017-07 - 2017-09" + } +]; diff --git a/src/components/Support/support-additional.json b/src/components/Support/support-additional.json index b4f5ffcefcaf..e69de29bb2d1 100755 --- a/src/components/Support/support-additional.json +++ b/src/components/Support/support-additional.json @@ -1,23 +0,0 @@ -[ - { - "name": "MoonMail", - "tier": "sponsor", - "avatar": "https://static.moonmail.io/moonmail-logo.svg", - "website": "https://moonmail.io/?utm_source=webpack.js.org", - "totalDonations": 11000 - }, - { - "name": "Google Angular", - "tier": "sponsor", - "avatar": "https://res.cloudinary.com/opencollective/image/upload/v1485288529/angular_uxllte.png", - "website": "https://angular.io/", - "totalDonations": 250000 - }, - { - "name": "Architects.io", - "tier": "sponsor", - "avatar": null, - "website": "http://architects.io/", - "totalDonations": 30000 - } -] diff --git a/src/content/about.md b/src/content/about.md index 85cf1a4c49ee..199a91f9d484 100755 --- a/src/content/about.md +++ b/src/content/about.md @@ -3,6 +3,7 @@ title: 参与翻译的全体成员 contributors: - akira-cn - Aladdin-ADD + - AlenQi - beiciye - billie66 - biqing @@ -26,14 +27,17 @@ contributors: - lgh06 - lizhonghui - lmymoonsky + - lukastong - mc-zone - neal1991 - nick-nick - panlinying + - QC-L - rqzheng2015 - scq000 - ShiHaoLin - shisaq + - SimonLeeee - starkwang - superpig - tao1991123 diff --git a/src/content/api/cli.md b/src/content/api/cli.md index 8a27ad8f0c84..63279844eddd 100755 --- a/src/content/api/cli.md +++ b/src/content/api/cli.md @@ -130,14 +130,17 @@ webpack --env.platform=web # 设置 env.platform == "web" `--env` 参数具有多种语法 accepts various syntaxes: -Invocation | Resulting environment -------------------------------- | --------------------------- -`webpack --env prod` | `"prod"` -`webpack --env.prod` | `{ prod: true }` -`webpack --env.prod=1` | `{ prod: 1 }` -`webpack --env.prod=foo` | `{ prod: "foo" }` -`webpack --env.prod --env.min` | `{ prod: true, min: true }` -`webpack --env.prod --env min` | `[{ prod: true }, "min"]` +Invocation | Resulting environment +---------------------------------------- | --------------------------- +`webpack --env prod` | `"prod"` +`webpack --env.prod` | `{ prod: true }` +`webpack --env.prod=1` | `{ prod: 1 }` +`webpack --env.prod=foo` | `{ prod: "foo" }` +`webpack --env.prod --env.min` | `{ prod: true, min: true }` +`webpack --env.prod --env min` | `[{ prod: true }, "min"]` +`webpack --env.prod=foo --env.prod=bar` | `{prod: [ "foo", "bar" ]}` + +T> See the [environment variables](/guides/environment-variables) guide for more information on its usage. ### 输出配置 @@ -292,7 +295,7 @@ webpack.js index=./src/index.js index2=./src/index2.js --output-path='./dist' -- 简写 | 含义 ---------|---------------------------- --d | `--debug --devtool cheap-module-source-map --output-pathinfo` +-d | `--debug --devtool cheap-module-eval-source-map --output-pathinfo` -p | `--optimize-minimize --define process.env.NODE_ENV="production"`, see [building for production](/guides/production) diff --git a/src/content/api/node.md b/src/content/api/node.md index a6c8bfe54604..5bd7c7a3c369 100755 --- a/src/content/api/node.md +++ b/src/content/api/node.md @@ -70,6 +70,8 @@ T> webpack **不**会并行执行多个配置。每个配置只会在前一个 * `.run(callback)` * `.watch(watchOptions, handler)` +W> The API only supports a single concurrent compilation at a time. When using `run`, wait for it to finish before calling `run` or `watch` again. When using `watch`, call `close` and wait for it to finish before calling `run` or `watch` again. Concurrent compilations will corrupt the output files. + ## 执行(Run) diff --git a/src/content/api/plugins/compiler.md b/src/content/api/plugins/compiler.md index 4e9f3da47f11..f20b6d2808ec 100755 --- a/src/content/api/plugins/compiler.md +++ b/src/content/api/plugins/compiler.md @@ -27,7 +27,7 @@ compiler.options = {...}; class LogPlugin { apply (compiler) { compiler.plugin('should-emit', compilation => { - console.log('should i emit?'); + console.log('should I emit?'); return true; }) } diff --git a/src/content/configuration/configuration-languages.md b/src/content/configuration/configuration-languages.md index c6bd92faaa9d..8a0a9b714573 100755 --- a/src/content/configuration/configuration-languages.md +++ b/src/content/configuration/configuration-languages.md @@ -6,6 +6,7 @@ contributors: - skipjack - tarang9211 - simon04 + - peterblazejewicz --- webpack 接受以多种编程和数据语言编写的配置文件。支持的文件扩展名列表，可以在 [node-interpret](https://github.com/js-cli/js-interpret) 包中找到。使用 [node-interpret](https://github.com/js-cli/js-interpret)，webpack 可以处理许多不同类型的配置文件。 @@ -26,7 +27,6 @@ __webpack.config.ts__ ```typescript import * as webpack from 'webpack'; import * as path from 'path'; -declare var __dirname; const config: webpack.Configuration = { entry: './foo.js', diff --git a/src/content/configuration/module.md b/src/content/configuration/module.md index ffc64951d66a..9a73e2f418a4 100755 --- a/src/content/configuration/module.md +++ b/src/content/configuration/module.md @@ -92,7 +92,7 @@ W> 小心！resource 是文件的_解析_路径，这意味着符号链接的资 还有一个额外的种类"行内 loader"，loader 被应用在 import/require 行内。 -所有 loader 通过 `后置, 行内, 普通, 前置` 排序，并按此顺序使用。 +所有 loader 通过 `前置, 行内, 普通, 后置` 排序，并按此顺序使用。 所有普通 loader 可以通过在请求中加上 `!` 前缀来忽略（覆盖）。 diff --git a/src/content/configuration/output.md b/src/content/configuration/output.md index bdf7c6535789..4a9a99a8e790 100755 --- a/src/content/configuration/output.md +++ b/src/content/configuration/output.md @@ -18,7 +18,7 @@ contributors: `string` `object` -在和 [`output.library`](#output-library) 和 [`output.libraryTarget`](#output-librarytarget) 一起使用时，此选项允许用户向导出容器(export wrapper)中插入注释。要为 `libraryTarget` 每种类型都插入相同的注释，只需将 `auxiliaryComment` 设置为一个字符串： +在和 [`output.library`](#output-library) 和 [`output.libraryTarget`](#output-librarytarget) 一起使用时，此选项允许用户向导出容器(export wrapper)中插入注释。要为 `libraryTarget` 每种类型都插入相同的注释，将 `auxiliaryComment` 设置为一个字符串： ``` js output: { @@ -293,15 +293,15 @@ JSONP 函数用于异步加载(async load) chunk，或者拼接多个初始 chun `string` 或 `object`（从 webpack 3.1.0 开始；用于 `libraryTarget: "umd"`） -在编写一个导出值的 JavaScript library 时，可以使用下面的 `library` 和 `libraryTarget`，导出值可以作为其他代码的依赖。传入 library 名称的字符串： +`output.library` 的值的作用，取决于[`output.libraryTarget`](#output-librarytarget) 选项的值；完整的详细信息请查阅该章节。注意，`output.libraryTarget` 的默认选项是 `var`，所以如果使用以下配置选项： -``` js -library: "MyLibrary" +```javascript +output: { + library: "MyLibrary" +} ``` -library 名称取决于 [`output.libraryTarget`](#output-librarytarget) 选项的值。 - -注意，`output.libraryTarget` 的默认值是 var。这意味着，如果使用 `output.libraryTarget` 的默认值，`output.library` 会将值作为变量声明导出（当使用 script 标签时，其执行后在全局作用域可用）。 +如果生成的输出文件，是在 HTML 页面中作为一个 script 标签引入，则变量 `MyLibrary` 将与入口文件的返回值绑定。 有关 `output.library` 以及 `output.libraryTarget` 详细信息，请查看[创建 library 指南](/guides/author-libraries)。 @@ -325,117 +325,135 @@ The following configurations are supported: ```javascript // if your entry has a default export of `MyDefaultModule` var MyDefaultModule = _entry_return_.default; - -// your users will use your library like: -MyDefaultModule.doSomething(); ``` `libraryExport: "MyModule"` - The **specified module** will be assigned to the library target: ```javascript -// if your entry exports a module `MyModule` var MyModule = _entry_return_.MyModule; - -// your users will use your library like: -MyModule.doSomething(); ``` `libraryExport: ["MyModule", "MySubModule"]` - The array is interpreted as a **path to a module** to be assigned to the library target: ```javascript -// if your entry exports `MyModule` which in turn exports `MySubModule` var MySubModule = _entry_return_.MyModule.MySubModule; +``` +如同以上示例中所展示，入口起点的返回值，与这些具名变量绑定在一起，因此，生成的 library 的用法如下： + +```javascript +MyDefaultModule.doSomething(); +MyModule.doSomething(); MySubModule.doSomething(); ``` - ## `output.libraryTarget` `string` > 默认值： `"var"` -配置如何暴露 library。可以使用下面的选项中的任意一个。 +配置如何暴露 library。可以使用下面的选项中的任意一个。注意，此选项与分配给 [`output.library`](#output-library) 的值一同使用。对于下面的所有示例，都假定将 `output.library` 的值配置为 `MyLibrary`。 -支持以下选项： +T> 注意，下面的示例代码中的 `_entry_return_` 是入口起点返回的值。在 bundle 本身中，它是从入口起点、由 webpack 生成的函数的输出结果。 + +### 暴露为一个变量 + +这些选项将入口起点的返回值（例如，入口起点的任何导出值），在 bundle 包所引入的位置，赋值给 output.library 提供的变量名。 `libraryTarget: "var"` - （默认值）当 library 加载完成，**入口起点的返回值**将分配给一个变量： ```javascript var MyLibrary = _entry_return_; -// 使用者将会这样调用你的 library： +// 在一个单独的 script…… MyLibrary.doSomething(); ``` -W> （不指定 `output.library` 将取消这个 `"var"` 配置） +W> 当使用此选项时，将 `output.library` 设置为空，会因为没有变量导致无法赋值。 + + +`libraryTarget: "assign"` - 这将产生一个隐含的全局变量，可能会潜在地重新分配到全局中已存在的值（谨慎使用）。. + +``` javascript +MyLibrary = _entry_return_; +``` + +注意，如果 `MyLibrary` 在作用域中未在前面代码进行定义，则你的 library 将被设置在全局作用域内。 + +W> 当使用此选项时，将 `output.library` 设置为空，将产生一个破损的输出 bundle。 + + +### 通过在对象上赋值暴露 + +这些选项将入口起点的返回值（例如，入口起点的任何导出值）赋值给一个特定对象的属性（此名称由 `output.library` 定义）下。 + +如果 `output.library` 未赋值为一个非空字符串，则默认行为是，将入口起点返回的所有属性都赋值给一个对象（此对象由 `output.libraryTarget` 特定），通过如下代码片段： + +```javascript +(function(e, a) { for(var i in a) e[i] = a[i]; }(${output.libraryTarget}, _entry_return_) +``` +W> 注意，不设置 `output.library` 将导致由入口起点返回的所有属性，都会被赋值给给定的对象；这里并不会检查现有的属性名是否存在。 -`libraryTarget: "this"` - 当 library 加载完成，**入口起点的返回值**将分配给 this，`this` 的含义取决于你： +`libraryTarget: "this"` - **入口起点的返回值**将分配给 this 的一个属性（此名称由 `output.library` 定义）下，`this` 的含义取决于你： ```javascript this["MyLibrary"] = _entry_return_; -// 使用者将会这样调用你的 library： +// 在一个单独的 script…… this.MyLibrary.doSomething(); -MyLibrary.doSomething(); //如果 this 是 window +MyLibrary.doSomething(); // 如果 this 是 window ``` +`libraryTarget: "window"` - **入口起点的返回值**将使用 `output.library` 中定义的值，分配给 `window` 对象的这个属性下。 -`libraryTarget: "window"` - 当 library 加载完成，**入口起点的返回值**将分配给 `window` 对象。 - - ```javascript - window["MyLibrary"] = _entry_return_; +```javascript +window["MyLibrary"] = _entry_return_; -// 使用者将会这样调用你的 library： window.MyLibrary.doSomething(); - ``` +``` -`libraryTarget: "global"` - 当 library 加载完成，**入口起点的返回值**将分配给 `global` 对象。 +`libraryTarget: "global"` - **入口起点的返回值**将使用 `output.library` 中定义的值，分配给 `global` 对象的这个属性下。 - ```javascript - global["MyLibrary"] = _entry_return_; +```javascript +global["MyLibrary"] = _entry_return_; -// 使用者将会这样调用你的 library： global.MyLibrary.doSomething(); - ``` +``` -`libraryTarget: "commonjs"` - 当 library 加载完成，**入口起点的返回值**将分配给 exports 对象。这个名称也意味着模块用于 CommonJS 环境： +`libraryTarget: "commonjs"` - **入口起点的返回值**将使用 `output.library` 中定义的值，分配给 exports 对象。这个名称也意味着，模块用于 CommonJS 环境： ```javascript exports["MyLibrary"] = _entry_return_; -// 使用者将会这样调用你的 library： require("MyLibrary").doSomething(); ``` +### 模块定义系统 + +这些选项将导致 bundle 带有更完整的模块头部，以确保与各种模块系统的兼容性。根据 `output.libraryTarget` 选项不同，`output.library` 选项将具有不同的含义。 -`libraryTarget: "commonjs2"` - 当 library 加载完成，**入口起点的返回值**将分配给 exports 对象。这个名称也意味着模块用于 CommonJS 环境： + +`libraryTarget: "commonjs2"` - **入口起点的返回值**将分配给 `module.exports` 对象。这个名称也意味着模块用于 CommonJS 环境： ```javascript module.exports = _entry_return_; -// 使用者将会这样调用你的 library： require("MyLibrary").doSomething(); ``` -T> 想要弄清楚 CommonJS 和 CommonJS2 之间的区别？查看[这里](https://github.com/webpack/webpack/issues/1114)（它们之间非常相似）。 +注意，`output.library` 会被省略，因此对于此特定的 `output.libraryTarget`，无需再设置 `output.library` 。 -`libraryTarget: "amd"` - webpack 将你的 library 转为 AMD 模块。 +T> 想要弄清楚 CommonJS 和 CommonJS2 之间的区别？虽然它们很相似，但二者之间存在一些微妙的差异，这通常与 webpack 上下文没有关联。（更多详细信息，请[阅读此 issue](https://github.com/webpack/webpack/issues/1114)。） -注意，入口 chunk 必须使用 `define` 属性定义，如果不是，webpack 将创建无依赖的 AMD 模块。输出结果就像这样： -```javascript -define([], function() { - // 这个模块会返回你的入口 chunk 所返回的 -}); -``` +`libraryTarget: "amd"` - 将你的 library 暴露为 AMD 模块。 -如果你下载完这个 script，首先你可能收到一个错误：`define is not defined`，就是这样！如果你使用 AMD 来发布你的 library，那么使用者需要使用 RequireJS 来加载它。只要你已经加载过 RequireJS，你就能够加载 library。 +AMD 模块要求入口 chunk（例如使用 ` + + + + + +``` + +Now we can `fetch` some data within our entry script: + +__src/index.js__ -```html - + document.body.appendChild(component()); ++ ++ fetch('https://jsonplaceholder.typicode.com/users') ++ .then(response => response.json()) ++ .then(json => { ++ console.log('We retrieved some data! AND we\'re confident it will work on a variety of browser distributions.') ++ console.log(json) ++ }) ++ .catch(error => console.error('Something went wrong when fetching this data: ', error)) ``` -T> Any script added dynamically like in the example above will run as soon as it's parsed, but we need our polyfill to run before our bundle. This is why we are setting `async` to `false` for each script. +If we run our build, another `polyfills.bundle.js` file will be emitted and everything should still run smoothly in the browser. Note that this set up could likely be improved upon but it should give you a good idea of how you can provide polyfills only to the users that actually need them. -### Smaller babel polyfill +## Further Optimizations -`babel-preset-env` uses [browserslist](https://github.com/ai/browserslist) to transpile only what is not supported in your browsers matrix. This preset comes with the `useBuiltIns` option _(false by default)_ which converts your global `babel-polyfill` import to a more granular feature by feature import pattern like: +The `babel-preset-env` package uses [browserslist](https://github.com/ai/browserslist) to transpile only what is not supported in your browsers matrix. This preset comes with the `useBuiltIns` option, `false` by default, which converts your global `babel-polyfill` import to a more granular feature by feature `import` pattern: -```javascript -import "core-js/modules/es7.string.pad-start"; -import "core-js/modules/es7.string.pad-end"; -import "core-js/modules/web.timers"; -import "core-js/modules/web.immediate"; -import "core-js/modules/web.dom.iterable"; +``` js +import 'core-js/modules/es7.string.pad-start'; +import 'core-js/modules/es7.string.pad-end'; +import 'core-js/modules/web.timers'; +import 'core-js/modules/web.immediate'; +import 'core-js/modules/web.dom.iterable'; ``` +See [the repository](https://github.com/babel/babel-preset-env) for more information. + + +## Node Built-Ins + +Node built-ins, like `process`, can be polyfilled right directly from your configuration file without the use of any special loaders or plugins. See the [node configuration page](/configuration/node) for more information and examples. + + +## Other Utilities + +There are a few other tools that can help when dealing with legacy modules. + +The [`script-loader`](/loaders/script-loader/) evaluates code in the global context, similar to inclusion via a `script` tag. In this mode, every normal library should work. `require`, `module`, etc. are undefined. + +W> When using the `script-loader`, the module is added as a string to the bundle. It is not minimized by `webpack`, so use a minimized version. There is also no `devtool` support for libraries added by this loader. + +When there is no AMD/CommonJS version of the module and you want to include the `dist`, you can flag this module in [`noParse`](/configuration/module/#module-noparse). This will cause webpack to include the module without parsing it or resolving `require()` and `import` statements. This practice is also used to improve the build performance. + +W> Any feature requiring the AST, like the `ProvidePlugin`, will not work. + +Lastly, there are some modules that support different [module styles](/concepts/modules) like AMD, CommonJS and legacy. In most of these cases, they first check for `define` and then use some quirky code to export properties. In these cases, it could help to force the CommonJS path by setting `define=>false` via the [`imports-loader`](/loaders/imports-loader/). + *** > 原文：https://webpack.js.org/guides/shimming/ diff --git a/src/content/guides/tree-shaking.md b/src/content/guides/tree-shaking.md index 960c7ffb8e52..9af9a6cb762a 100755 --- a/src/content/guides/tree-shaking.md +++ b/src/content/guides/tree-shaking.md @@ -6,6 +6,7 @@ contributors: - zacanger - alexjoverm - avant1 + - MijaelWatts related: - title: Tree shaking with webpack 2, TypeScript and Babel url: https://alexjoverm.github.io/2017/03/06/Tree-shaking-with-Webpack-2-TypeScript-and-Babel/ @@ -146,7 +147,9 @@ T> 注意，也可以在命令行接口中使用 `--optimize-minimize` 标记， - 使用 ES2015 模块语法（即 `import` 和 `export`）。 - 引入一个能够删除未引用代码(dead code)的压缩工具(minifier)（例如 `UglifyJSPlugin`）。 -如果你对优化输出有很大兴趣的话，请进入到下一个指南，来了解[生产环境](/guides/production)中进行构建的详细细节。 +你可以将应用程序想象成一棵树。绿色表示实际用到的源码和 library，是树上活的树叶。灰色表示无用的代码，是秋天树上枯萎的树叶。为了除去死去的树叶，你必须摇动这棵树，使它们落下。 + +如果你对优化输出很感兴趣的话，请进入到下一个指南，来了解[生产环境](/guides/production)中进行构建的详细细节。 *** diff --git a/src/content/guides/typescript.md b/src/content/guides/typescript.md index 482835fb6aaf..197a8deeb308 100755 --- a/src/content/guides/typescript.md +++ b/src/content/guides/typescript.md @@ -67,7 +67,7 @@ __webpack.config.js__ const path = require('path'); module.exports = { - entry: './index.ts', + entry: './src/index.ts', module: { rules: [ { @@ -127,7 +127,7 @@ __webpack.config.js__ const path = require('path'); module.exports = { - entry: './index.ts', + entry: './src/index.ts', + devtool: 'inline-source-map', module: { rules: [ diff --git a/src/content/plugins/commons-chunk-plugin.md b/src/content/plugins/commons-chunk-plugin.md index 369cfcc2a4de..cf57358ad806 100755 --- a/src/content/plugins/commons-chunk-plugin.md +++ b/src/content/plugins/commons-chunk-plugin.md @@ -99,17 +99,18 @@ new webpack.optimize.CommonsChunkPlugin({ entry: { vendor: ["jquery", "other-lib"], app: "./entry" -} -new webpack.optimize.CommonsChunkPlugin({ - name: "vendor", - - // filename: "vendor.js" - // (给 chunk 一个不同的名字) +}, +plugins: [ + new webpack.optimize.CommonsChunkPlugin({ + name: "vendor", + // filename: "vendor.js" + // (给 chunk 一个不同的名字) - minChunks: Infinity, - // 随着 entrie chunk 越来越多， - // 这个配置保证没其它的模块会打包进 vendor chunk -}) + minChunks: Infinity, + // (随着 entry chunk 越来越多， + // 这个配置保证没其它的模块会打包进 vendor chunk) + }) +] ``` ```html diff --git a/src/content/plugins/module-concatenation-plugin.md b/src/content/plugins/module-concatenation-plugin.md index 1b5d005d87d1..100b0c6b2bf1 100755 --- a/src/content/plugins/module-concatenation-plugin.md +++ b/src/content/plugins/module-concatenation-plugin.md @@ -16,3 +16,81 @@ new webpack.optimize.ModuleConcatenationPlugin() ``` > 由于实现 ECMAScript 模块语法，作用域提升(Scope Hoisting)这个特定于此语法的功能才成为可能。`webpack` 可能会根据你正在使用的模块类型和[其他的情况](https://medium.com/webpack/webpack-freelancing-log-book-week-5-7-4764be3266f5)，回退到普通打包。 + + +## Optimization Bailouts + +As the article explains, webpack attempts to achieve partial scope hoisting. It will merge modules into a single scope but cannot do so in every case. If webpack cannot merge a module, the two alternatives are Prevent and Root. Prevent means the module must be in its own scope. Root means a new module group will be created. The following conditions determine the outcome: + +Condition | Outcome +--------------------------------------------- | -------- +Non ES6 Module | Prevent +Imported By Non Import | Root +Imported From Other Chunk | Root +Imported By Multiple Other Module Groups | Root +Imported With `import()` | Root +Affected By `ProvidePlugin` Or Using `module` | Prevent +HMR Accepted | Root +Using `eval()` | Prevent +In Multiple Chunks | Prevent +`export * from "cjs-module"` | Prevent + + +### Module Grouping Algorithm + +The following pseudo JavaScript explains the algorithm: + +```js +modules.forEach(module => { + const group = new ModuleGroup({ + root: module + }); + module.dependencies.forEach(dependency => { + tryToAdd(group, dependency); + }); + if (group.modules.length > 1) { + orderedModules = topologicalSort(group.modules); + concatenatedModule = new ConcatenatedModule(orderedModules); + chunk.add(concatenatedModule); + orderedModules.forEach(groupModule => { + chunk.remove(groupModule); + }); + } +}); + +function tryToAdd(group, module) { + if (group.has(module)) { + return true; + } + if (!hasPreconditions(module)) { + return false; + } + const nextGroup = group; + const result = module.dependents.reduce((check, dependent) => { + return check && tryToAdd(nextGroup, dependent); + }, true); + if (!result) { + return false; + } + module.dependencies.forEach(depenency => { + tryToAdd(group, depenency); + }); + group.merge(nextGroup); + return true; +} +``` + + +### Debugging Optimization Bailouts + +When using the webpack CLI, the `--display-optimization-bailout` flag will display bailout reasons. When using the webpack config, just add the following to the `stats` object: + +```js +{ + ...stats, + // Examine all modules + maxModules: Infinity, + // Display bailout reasons + optimizationBailout: true +} +``` diff --git a/src/content/plugins/source-map-dev-tool-plugin.md b/src/content/plugins/source-map-dev-tool-plugin.md index 75586eadb5e5..ca2f77439564 100755 --- a/src/content/plugins/source-map-dev-tool-plugin.md +++ b/src/content/plugins/source-map-dev-tool-plugin.md @@ -8,7 +8,7 @@ related: url: https://survivejs.com/webpack/building/source-maps/#-sourcemapdevtoolplugin-and-evalsourcemapdevtoolplugin- --- -该插件可以对[通过 `devtool` 选项添加的 source map] 进行更细粒度的控制(fine grained control)。 +This plugin enables more fine grained control of source map generation. It is an alternative to the [`devtool`](/configuration/devtool/) configuration option. ```javascript new webpack.SourceMapDevToolPlugin(options) @@ -19,13 +19,20 @@ new webpack.SourceMapDevToolPlugin(options) 支持以下选项： -* `options.test` / `options.include` / `options.exclude` (`string|RegExp|Array`)：用于决定应该处理哪个资源。其中每个都可以是一个`正则表达式`（匹配资源文件名），或一个`字符串`（资源文件名需要以此字符串开头），或一个`数组`（必须匹配数组中的每一项）。如果省略不设置，`test` 默认是 `.js` 和 `.css` 文件。 -* `options.filename` (`string`)：定义 SourceMap 的输出文件名。如果没有提供值，则 source map 是内联的。 -* `options.append` (`string`): 追加到原始资源。通常以 `#sourceMappingURL` 注释。`[url]` 替换为 source map 文件的 URL。`false` 禁止追加。 -* `options.moduleFilenameTemplate` / `options.fallbackModuleFilenameTemplate` (`string`)：查看 [`output.devtoolModuleFilenameTemplate`](/configuration/output/#output-devtoolmodulefilenametemplate)。 -* `options.module` (`boolean`): (defaults to `true`) 为 `false` 时， loader 不再生成 source map，并且转换过的代码被用作源码。 -* `options.columns` (`boolean`): (defaults to `true`) 为 `false` 时，source map 中的列映射(column mapping)被忽略，并且使用更快速的 source map 实现。 -* `options.lineToLine` (`{test: string|RegExp|Array, include: string|RegExp|Array, exclude: string|RegExp|Array}`) 匹配的模块使用简单（快速）的行到行(line to line) source map。 +- `test` (`string|regex|array`): Include source maps for modules based on their extension (defaults to `.js` and `.css`). +- `include` (`string|regex|array`): Include source maps for module paths that match the given value. +- `exclude` (`string|regex|array`): Exclude modules that match the given value from source map generation. +- `filename` (`string`): Defines the output filename of the SourceMap (will be inlined if no value is provided). +- `append` (`string`): Appends the given value to the original asset. Usually the `#sourceMappingURL` comment. `[url]` is replaced with a URL to the source map file. `false` disables the appending. +- `moduleFilenameTemplate` (`string`): See [`output.devtoolModuleFilenameTemplate`](/configuration/output/#output-devtoolmodulefilenametemplate). +- `fallbackModuleFilenameTemplate` (`string`): See link above. +- `module` (`boolean`): Indicates whether loaders should generate source maps (defaults to `true`). +- `columns` (`boolean`): Indicates whether column mappings should be used (defaults to `true`). +- `lineToLine` (`object`): Simplify and speed up source mapping by using line to line source mappings for matched modules.** + +The `lineToLine` object allows for the same `test`, `include`, and `exclude` options described above. + +T> Setting `module` and/or `columns` to `false` will yield less accurate source maps but will also improve compilation performance significantly. ## 用法：排除 Vendor 的 Map 文件 @@ -41,4 +48,4 @@ new webpack.SourceMapDevToolPlugin({ *** -> 原文：https://webpack.js.org/plugins/source-map-dev-tool-plugin/ \ No newline at end of file +> 原文：https://webpack.js.org/plugins/source-map-dev-tool-plugin/ diff --git a/src/scripts/fetch_supporters.js b/src/scripts/fetch_supporters.js index 46557b391c45..7b052cc40eb5 100755 --- a/src/scripts/fetch_supporters.js +++ b/src/scripts/fetch_supporters.js @@ -2,6 +2,30 @@ const fs = require('fs'); const request = require('request'); +request('https://opencollective.com/webpack/goldsponsors.json?requireActive=false', (err, response, body) => { + if (err) { + console.error('Failed to fetch goldsponsors: ', err); + + } fs.writeFile('./src/components/Support/support-goldsponsors.json', body, err => { + if (err) { + console.error('Failed to write goldsponsors file: ', err); + + } else console.log('Fetched 1 file: support-goldsponsors.json'); + }); +}); + +request('https://opencollective.com/webpack/silversponsors.json?requireActive=false', (err, response, body) => { + if (err) { + console.error('Failed to fetch silversponsors: ', err); + + } fs.writeFile('./src/components/Support/support-silversponsors.json', body, err => { + if (err) { + console.error('Failed to write silversponsors file: ', err); + + } else console.log('Fetched 1 file: support-silversponsors.json'); + }); +}); + request('https://opencollective.com/webpack/sponsors.json?requireActive=false', (err, response, body) => { if (err) { console.error('Failed to fetch sponsors: ', err);