You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Copy file name to clipboardExpand all lines: content/guides/shimming.md
+20-19Lines changed: 20 additions & 19 deletions
Original file line number
Diff line number
Diff line change
@@ -7,11 +7,11 @@ contributors:
7
7
- simon04
8
8
---
9
9
10
-
`webpack`as a module bundler can understand modules written as ES2015 modules, CommonJS or AMD. But many times, while using third party libraries, we see that they expect dependencies which are global aka `$` for `jquery`. They might also be creating global variables which need to be exported. Here we will see different ways to help webpack understand these __broken modules__.
## Prefer unminified CommonJS/AMD files over bundled `dist`versions.
12
+
## 未压缩的 CommonJS/AMD 文件优先于 `dist`打包版本。
13
13
14
-
Most modules link the `dist` version in the `main`field of their `package.json`. While this is useful for most developers, for webpack it is better to alias the src version because this way webpack is able to optimize dependencies better. However in most cases `dist`works fine as well.
The [`provide-plugin`](/plugins/provide-plugin)makes a module available as a variable in every other module required by `webpack`. The module is required only if you use the variable.
31
-
Most legacy modules rely on the presence of specific globals, like jQuery plugins do on `$`or`jQuery`. In this scenario, you can configure webpack to prepend `var $ = require(“jquery”)` every time it encounters the global `$` identifier.
30
+
The [`provide-plugin`](/plugins/provide-plugin)可以将模块作为一个变量，被 `webpack` 在其他每个模块中引用。只有你需要使用此变量的时候，这个模块才会被 require 进来。
[`imports-loader`](/loaders/imports-loader/)inserts necessary globals into the required legacy module.
47
-
For example, Some legacy modules rely on `this`being the `window`object. This becomes a problem when the module is executed in a CommonJS context where `this`equals`module.exports`. In this case you can override `this` using the `imports-loader`.
There are modules that support different [module styles](/concepts/modules), like AMD, CommonJS and legacy. However, most of the time 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`:
Let's say a library creates a global variable that it expects it's consumers to use. In this case we can use [`exports-loader`](/loaders/exports-loader/), to export that global variable in CommonJS format. For instance, in order to export `file`as`file`and`helpers.parse`as`parse`:
The [script-loader](/loaders/script-loader/) evaluates code in the global context, just like you would add the code into a `script` tag. In this mode every normal library should work. require, module, etc. are undefined.
97
96
98
-
W> The file is added as string to the bundle. It is not minimized by `webpack`, so use a minimized version. There is also no dev tool 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 as [`noParse`](/configuration/module/#module-noparse). Then `webpack`will just include the module without parsing it, which can be used to improve the build time.
Copy file name to clipboardExpand all lines: content/guides/webpack-and-typescript.md
+38-55Lines changed: 38 additions & 55 deletions
Original file line number
Diff line number
Diff line change
@@ -1,29 +1,28 @@
1
1
---
2
-
title: Webpack & Typescript
2
+
title: Webpack 和 TypeScript
3
3
sort: 20
4
4
contributors:
5
5
- morsdyce
6
6
---
7
7
8
-
[TypeScript](https://www.typescriptlang.org)is a typed superset of JavaScript that compiles to plain JavaScript, in this guide we will learn how to integrate Typescript with webpack.
The tsconfig file can start as an empty configuration file, here you can see an example of a basic configuration for TypeScript to compile to es5 as well as providing support for JSX.
@@ -39,11 +38,12 @@ The tsconfig file can start as an empty configuration file, here you can see an
39
38
}
40
39
```
41
40
42
-
You can read more about tsconfig.json configuration options at the [TypeScript documentation website](https://www.typescriptlang.org/docs/handbook/tsconfig-json.html)
A basic webpack with TypeScript config should look along these lines:
45
+
使用 TypeScript 编写的 webpack 基本配置大概是这样：
46
+
47
47
```js
48
48
module.exports= {
49
49
entry:'./index.ts',
@@ -65,28 +65,24 @@ module.exports = {
65
65
},
66
66
};
67
67
```
68
-
69
-
Here we specify our entry point to be __index.ts__ in our current directory,
70
-
an output file called __bundle.js__
71
-
and our TypeScript loader that is in charge of compiling our TypeScript file to JavaScript. We also add `resolve.extensions` to instruct webpack what file extensions to use when resolving Typescript modules.
In this guide we will be using ts-loader as currently it is easier enabling additional webpack features such as importing non code assets into your project.
First we add a new loader called source-map-loader.
132
124
133
-
To install it run:
125
+
首先我们添加一个新 loader，名为 source-map-loader，运行下面的命令安装：
126
+
`npm install --save-dev source-map-loader`。
134
127
135
-
`npm install --save-dev source-map-loader`.
136
-
137
-
Once the loader is installed we need to tell webpack we want to run this loader before any other loaders by using the `enforce: 'pre'` configuration flag.
138
-
Finally we need to enable source maps in webpack by specifying the `devtool` property.
139
-
Currently we use the 'inline-source-map' setting, to read more about this setting and see other options check out the [devtool documentation](https://webpack.js.org/configuration/devtool/).
This applies not only to svg but any custom loader you may want to use which includes css, scss, json or any other file you may wish to load in your project.
0 commit comments