parent
8fdfdf5d1a
commit
0ce88ece13
|
@ -357,12 +357,12 @@ code-example(language="sh" class="code-shell").
|
||||||
especially the [Typescript configuration](../guide/typescript-configuration.html) and
|
especially the [Typescript configuration](../guide/typescript-configuration.html) and
|
||||||
[npm packages](../guide/npm-packages.html) guides.
|
[npm packages](../guide/npm-packages.html) guides.
|
||||||
|
|
||||||
这些文件很多都很眼熟,他们在其他文档里已经出现过,特别是[_TypeScript配置_](../guide/typescript-configuration.html)和[_npm包_](../guide/npm-packages.html)这两个章节里。
|
这些文件很多都很眼熟,它们在其他文档里已经出现过,特别是[_TypeScript配置_](../guide/typescript-configuration.html)和[_npm包_](../guide/npm-packages.html)这两章里。
|
||||||
|
|
||||||
Webpack, the plugins, and the loaders are also installed as packages.
|
Webpack, the plugins, and the loaders are also installed as packages.
|
||||||
They are listed in the updated `packages.json`.
|
They are listed in the updated `packages.json`.
|
||||||
|
|
||||||
Webpack,包括它的插件以及加载器,也是以npm包的形式安装,`package.json`文件已经更新,这些npm包在这个文件里都有列出。
|
Webpack,包括它的插件以及加载器,也是以npm包的形式安装的,它们也列在了修改后的 package.json 中。
|
||||||
|
|
||||||
:marked
|
:marked
|
||||||
Open a terminal window and install the npm packages.
|
Open a terminal window and install the npm packages.
|
||||||
|
@ -400,7 +400,7 @@ a#polyfills
|
||||||
Because this bundle file will load first, `polyfills.ts` is also a good place to configure the browser environment
|
Because this bundle file will load first, `polyfills.ts` is also a good place to configure the browser environment
|
||||||
for production or development.
|
for production or development.
|
||||||
|
|
||||||
由于这个包最先被加载,所以`polyfills.ts`非常适合用来配置浏览器环境,如生产环境配置或是开发环境。
|
由于这个包最先加载,所以`polyfills.ts`非常适合用来配置浏览器环境,如生产环境配置或是开发环境。
|
||||||
|
|
||||||
a(id="common-configuration")
|
a(id="common-configuration")
|
||||||
.l-main-section
|
.l-main-section
|
||||||
|
@ -410,7 +410,7 @@ a(id="common-configuration")
|
||||||
Developers typically have separate configurations for development, production, and test environments.
|
Developers typically have separate configurations for development, production, and test environments.
|
||||||
All three have a lot of configuration in common.
|
All three have a lot of configuration in common.
|
||||||
|
|
||||||
开发、生产、测试不同的环境通常会分开配置,但实际上这些配置也有很多地方是通用的。
|
开发、生产、测试等不同的环境通常会分开配置,但实际上这些配置也有很多地方是通用的。
|
||||||
|
|
||||||
Gather the common configuration in a file called `webpack.common.js`.
|
Gather the common configuration in a file called `webpack.common.js`.
|
||||||
我们可以把这些通用的配置收归到一个文件,命名为`webpack.common.js`。
|
我们可以把这些通用的配置收归到一个文件,命名为`webpack.common.js`。
|
||||||
|
@ -421,28 +421,28 @@ a#inside-webpack-commonjs
|
||||||
### Inside _webpack.common.js_
|
### Inside _webpack.common.js_
|
||||||
### webpack.common.js解读 Webpack is a NodeJS-based tool that reads configuration from a JavaScript commonjs module file.
|
### webpack.common.js解读 Webpack is a NodeJS-based tool that reads configuration from a JavaScript commonjs module file.
|
||||||
|
|
||||||
Webpack是基于NodeJS的一个工具,他能够从一个_commonjs_规范的JavaScript模块文件里读取配置。
|
Webpack是基于NodeJS的一个工具,它能够从一个*commonjs*规范的JavaScript模块文件里读取配置。
|
||||||
|
|
||||||
The configuration imports dependencies with `require` statements
|
The configuration imports dependencies with `require` statements
|
||||||
and exports several objects as properties of a `module.exports` object.
|
and exports several objects as properties of a `module.exports` object.
|
||||||
|
|
||||||
这个配置文件是通过`require`语句导入依赖,然后可将多个对象作为“module.exports”对象的属性导出。
|
这个配置文件是通过`require`语句导入依赖,然后将多个对象作为`module.exports`对象的属性导出。
|
||||||
|
|
||||||
* [`entry`](#common-entries)—the entry-point files that define the bundles.
|
* [`entry`](#common-entries)—the entry-point files that define the bundles.
|
||||||
|
|
||||||
[`entries`](#common-entries) - 包体的入口文件;
|
[`entries`](#common-entries) - 包体的入口文件。
|
||||||
|
|
||||||
* [`resolve`](#common-resolve)—how to resolve file names when they lack extensions.
|
* [`resolve`](#common-resolve)—how to resolve file names when they lack extensions.
|
||||||
|
|
||||||
[`resolve`](#common-resolve) - 缺失扩展名时如何解释文件名;
|
[`resolve`](#common-resolve) - 省略扩展名时如何解释文件名。
|
||||||
|
|
||||||
* [`module.rules`](#common-rules)— `module` is an object with `rules` for deciding how files are loaded.
|
* [`module.rules`](#common-rules)— `module` is an object with `rules` for deciding how files are loaded.
|
||||||
|
|
||||||
[`module.rules`](#common-rules) - `module`是一个对象,里面的`rules`属性用来决定文件如何加载;
|
[`module.rules`](#common-rules) - `module`是一个对象,里面的`rules`属性用来决定文件如何加载。
|
||||||
|
|
||||||
* [`plugins`](#common-plugins)—creates instances of the plugins.
|
* [`plugins`](#common-plugins)—creates instances of the plugins.
|
||||||
|
|
||||||
[`plugins`](#common-plugins) - 创建扩展的实例。
|
[`plugins`](#common-plugins) - 创建插件的实例。
|
||||||
|
|
||||||
a#common-entries
|
a#common-entries
|
||||||
:marked
|
:marked
|
||||||
|
@ -459,11 +459,11 @@ a#common-entries
|
||||||
|
|
||||||
* `polyfills`—the polyfills needed to run Angular applications in most modern browsers.
|
* `polyfills`—the polyfills needed to run Angular applications in most modern browsers.
|
||||||
|
|
||||||
`polyfills` - 使得Angular应用能够运行在大多数的现代浏览器;
|
`polyfills` - 使得Angular应用能够运行在大多数的现代浏览器。
|
||||||
|
|
||||||
* `vendor`—the third-party dependencies such as Angular, lodash, and bootstrap.css.
|
* `vendor`—the third-party dependencies such as Angular, lodash, and bootstrap.css.
|
||||||
|
|
||||||
`vendor` - 第三方依赖,如Angular、lodash和bootstrap.css;
|
`vendor` - 第三方依赖,如Angular、lodash和bootstrap.css。
|
||||||
|
|
||||||
* `app`—the application code.
|
* `app`—the application code.
|
||||||
|
|
||||||
|
@ -477,7 +477,7 @@ a#common-resolve
|
||||||
The app will `import` dozens if not hundreds of JavaScript and TypeScript files.
|
The app will `import` dozens if not hundreds of JavaScript and TypeScript files.
|
||||||
You could write `import` statements with explicit extensions like this example:
|
You could write `import` statements with explicit extensions like this example:
|
||||||
|
|
||||||
如果你的应用程序只须`import`几十个JavaScript或TypeScript文件,而不是几百个这么多,你可以在`import`语句里完整写上扩展名,如:
|
如果你的应用程序只须`import`几十个JavaScript或TypeScript文件,而不是几百个,你可以在`import`语句里完整写上扩展名,如:
|
||||||
|
|
||||||
.code-example
|
.code-example
|
||||||
code-example(language="typescript").
|
code-example(language="typescript").
|
||||||
|
@ -487,7 +487,9 @@ a#common-resolve
|
||||||
But most `import` statements don't mention the extension at all.
|
But most `import` statements don't mention the extension at all.
|
||||||
Tell Webpack to resolve extension-less file requests by looking for matching files with
|
Tell Webpack to resolve extension-less file requests by looking for matching files with
|
||||||
`.ts` extension or `.js` extension (for regular JavaScript files and pre-compiled TypeScript files).
|
`.ts` extension or `.js` extension (for regular JavaScript files and pre-compiled TypeScript files).
|
||||||
实际上大部分`import`语句都不带扩展名,我们可以告诉Webpack,在查找这些没有扩展名的文件时,自动加上`.ts`或者`.js`扩展名来匹配。
|
|
||||||
|
但实际上大部分`import`语句都不带扩展名,我们可以告诉Webpack,在查找这些没有扩展名的文件时,自动加上`.ts`或者`.js`扩展名来匹配。
|
||||||
|
|
||||||
+makeExample('webpack/ts/config/webpack.common.js', 'resolve', 'config/webpack.common.js')(format=".")
|
+makeExample('webpack/ts/config/webpack.common.js', 'resolve', 'config/webpack.common.js')(format=".")
|
||||||
|
|
||||||
.l-sub-section
|
.l-sub-section
|
||||||
|
@ -495,7 +497,7 @@ a#common-resolve
|
||||||
If Webpack should resolve extension-less files for styles and HTML,
|
If Webpack should resolve extension-less files for styles and HTML,
|
||||||
add `.css` and `.html` to the list.
|
add `.css` and `.html` to the list.
|
||||||
|
|
||||||
如果我们希望Webapck也能解释不带扩展名的样式和HTML文件,在列表里追加`.css`和`.html`即可。
|
如果我们希望Webapck也能解析不带扩展名的样式和HTML文件,在列表里追加`.css`和`.html`即可。
|
||||||
|
|
||||||
a#common-rules
|
a#common-rules
|
||||||
:marked
|
:marked
|
||||||
|
@ -503,11 +505,9 @@ a#common-rules
|
||||||
#### _module.rules_
|
#### _module.rules_
|
||||||
|
|
||||||
Rules tell Webpack which loaders to use for each file, or module:
|
Rules tell Webpack which loaders to use for each file, or module:
|
||||||
|
|
||||||
Rules用来告诉Webpack加载不同文件或模块时该用哪个加载器。
|
Rules用来告诉Webpack加载不同文件或模块时该用哪个加载器。
|
||||||
|
|
||||||
Rules tell Webpack which loaders to use for each file, or module:
|
|
||||||
|
|
||||||
+makeExample('webpack/ts/config/webpack.common.js', 'loaders', 'config/webpack.common.js')(format=".")
|
+makeExample('webpack/ts/config/webpack.common.js', 'loaders', 'config/webpack.common.js')(format=".")
|
||||||
|
|
||||||
:marked
|
:marked
|
||||||
|
|
Loading…
Reference in New Issue