Skip to content

Commit 0318d6c

Browse files
hello-lizhihuahello-lizhihua
committed
update loaders & update plugins
1 parent 762dc2c commit 0318d6c

12 files changed

+1186
-972
lines changed

‎src/content/loaders/babel-loader.md‎

Lines changed: 5 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -20,12 +20,6 @@ This package allows transpiling JavaScript files using [Babel](https://github.co
2020
npm install -D babel-loader @babel/core @babel/preset-env webpack
2121
```
2222

23-
> webpack 4.x | babel-loader 7.x | babel 6.x
24-
25-
```bash
26-
npm install -D babel-loader@7 babel-core babel-preset-env webpack
27-
```
28-
2923
## Usage
3024

3125
webpack documentation: [Loaders](https://webpack.js.org/loaders/)
@@ -77,7 +71,7 @@ This loader also supports the following loader-specific option:
7771

7872
* `cacheDirectory`: Default `false`. When set, the given directory will be used to cache the results of the loader. Future webpack builds will attempt to read from the cache to avoid needing to run the potentially expensive Babel recompilation process on each run. If the value is blank (`loader: 'babel-loader?cacheDirectory'`) or `true` (`loader: 'babel-loader?cacheDirectory=true'`), the loader will use the default cache directory in `node_modules/.cache/babel-loader` or fallback to the default OS temporary file directory if no `node_modules` folder could be found in any root directory.
7973

80-
* `cacheIdentifier`: Default is a string composed by the `babel-core`'s version, the `babel-loader`'s version, the contents of `.babelrc` file if it exists, and the value of the environment variable `BABEL_ENV` with a fallback to the `NODE_ENV` environment variable. This can be set to a custom value to force cache busting if the identifier changes.
74+
* `cacheIdentifier`: Default is a string composed by the `@babel/core`'s version, the `babel-loader`'s version, the contents of `.babelrc` file if it exists, and the value of the environment variable `BABEL_ENV` with a fallback to the `NODE_ENV` environment variable. This can be set to a custom value to force cache busting if the identifier changes.
8175

8276
* `cacheCompression`: Default `true`. When set, each Babel transform output will be compressed with Gzip. If you want to opt-out of cache compression, set it to `false` -- your project may benefit from this if it transpiles thousands of files.
8377

@@ -99,11 +93,11 @@ Babel uses very small helpers for common functions such as `_extend`. By default
9993

10094
You can instead require the Babel runtime as a separate module to avoid the duplication.
10195

102-
The following configuration disables automatic per-file runtime injection in Babel, requiring `babel-plugin-transform-runtime` instead and making all helper references use it.
96+
The following configuration disables automatic per-file runtime injection in Babel, requiring `@babel/plugin-transform-runtime` instead and making all helper references use it.
10397

10498
See the [docs](https://babeljs.io/docs/plugins/transform-runtime/) for more information.
10599

106-
**NOTE**: You must run `npm install -D @babel/plugin-transform-runtime` to include this in your project and `babel-runtime` itself as a dependency with `npm install @babel/runtime`.
100+
**NOTE**: You must run `npm install -D @babel/plugin-transform-runtime` to include this in your project and `@babel/runtime` itself as a dependency with `npm install @babel/runtime`.
107101

108102
```javascript
109103
rules: [
@@ -125,7 +119,7 @@ rules: [
125119

126120
#### **NOTE**: transform-runtime & custom polyfills (e.g. Promise library)
127121

128-
Since [babel-plugin-transform-runtime](https://github.com/babel/babel/tree/master/packages/babel-plugin-transform-runtime) includes a polyfill that includes a custom [regenerator-runtime](https://github.com/facebook/regenerator/blob/master/packages/regenerator-runtime/runtime.js) and [core-js](https://github.com/zloirock/core-js), the following usual shimming method using `webpack.ProvidePlugin` will not work:
122+
Since [@babel/plugin-transform-runtime](https://github.com/babel/babel/tree/master/packages/babel-plugin-transform-runtime) includes a polyfill that includes a custom [regenerator-runtime](https://github.com/facebook/regenerator/blob/master/packages/regenerator-runtime/runtime.js) and [core-js](https://github.com/zloirock/core-js), the following usual shimming method using `webpack.ProvidePlugin` will not work:
129123

130124
```javascript
131125
// ...
@@ -181,7 +175,7 @@ If you receive this message, it means that you have the npm package `babel` inst
181175

182176
webpack then tries to load the `babel` package instead of the `babel-loader`.
183177

184-
To fix this, you should uninstall the npm package `babel`, as it is deprecated in Babel v6. (Instead, install `babel-cli` or `babel-core`.)
178+
To fix this, you should uninstall the npm package `babel`, as it is deprecated in Babel v6. (Instead, install `@babel/cli` or `@babel/core`.)
185179
In the case one of your dependencies is installing `babel` and you cannot uninstall it yourself, use the complete name of the loader in the webpack config:
186180
```javascript
187181
{

‎src/content/loaders/css-loader.md‎

Lines changed: 74 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -108,16 +108,19 @@ module.exports = {
108108

109109
## Options
110110

111-
| Name | Type | Default | Description |
112-
| :-----------------------------------------: | :-------------------: | :-------------: | :------------------------------------------ |
113-
| **[`url`](#url)** | `{Boolean\|Function}` | `true` | Enable/Disable `url()` handling |
114-
| **[`import`](#import)** | `{Boolean\/Function}` | `true` | Enable/Disable @import handling |
115-
| **[`modules`](#modules)** | `{Boolean\|String}` | `false` | Enable/Disable CSS Modules and setup mode |
116-
| **[`localIdentName`](#localidentname)** | `{String}` | `[hash:base64]` | Configure the generated ident |
117-
| **[`sourceMap`](#sourcemap)** | `{Boolean}` | `false` | Enable/Disable Sourcemaps |
118-
| **[`camelCase`](#camelcase)** | `{Boolean\|String}` | `false` | Export Classnames in CamelCase |
119-
| **[`importLoaders`](#importloaders)** | `{Number}` | `0` | Number of loaders applied before CSS loader |
120-
| **[`exportOnlyLocals`](#exportonlylocals)** | `{Boolean}` | `false` | Export only locals |
111+
| Name | Type | Default | Description |
112+
| :-----------------------------------------: | :-------------------: | :-------------: | :----------------------------------------------------------------------- |
113+
| **[`url`](#url)** | `{Boolean\|Function}` | `true` | Enable/Disable `url()` handling |
114+
| **[`import`](#import)** | `{Boolean\/Function}` | `true` | Enable/Disable @import handling |
115+
| **[`modules`](#modules)** | `{Boolean\|String}` | `false` | Enable/Disable CSS Modules and setup mode |
116+
| **[`localIdentName`](#localidentname)** | `{String}` | `[hash:base64]` | Configure the generated ident |
117+
| **[`context`](#context)** | `{String}` | `undefined` | Allow to redefine basic loader context for local ident name |
118+
| **[`hashPrefix`](#hashprefix)** | `{String}` | `undefined` | Allow to add custom hash to generate more unique classes |
119+
| **[`getLocalIdent`](#getlocalident)** | `{Function}` | `undefined` | Configure the function to generate classname based on a different schema |
120+
| **[`sourceMap`](#sourcemap)** | `{Boolean}` | `false` | Enable/Disable Sourcemaps |
121+
| **[`camelCase`](#camelcase)** | `{Boolean\|String}` | `false` | Export Classnames in CamelCase |
122+
| **[`importLoaders`](#importloaders)** | `{Number}` | `0` | Number of loaders applied before CSS loader |
123+
| **[`exportOnlyLocals`](#exportonlylocals)** | `{Boolean}` | `false` | Export only locals |
121124

122125
### `url`
123126

@@ -460,7 +463,66 @@ module.exports = {
460463
};
461464
```
462465

466+
### `context`
467+
468+
Type: `String`
469+
Default: `undefined`
470+
471+
Allow to redefine basic loader context for local ident name.
472+
By default we use `rootContext` of loader.
473+
474+
**webpack.config.js**
475+
476+
```js
477+
module.exports = {
478+
module: {
479+
rules: [
480+
{
481+
test: /\.css$/,
482+
loader: 'css-loader',
483+
options: {
484+
modules: true,
485+
context: path.resolve(__dirname, 'context'),
486+
},
487+
},
488+
],
489+
},
490+
};
491+
```
492+
493+
### `hashPrefix`
494+
495+
Type: `String`
496+
Default: `undefined`
497+
498+
Allow to add custom hash to generate more unique classes.
499+
500+
**webpack.config.js**
501+
502+
```js
503+
module.exports = {
504+
module: {
505+
rules: [
506+
{
507+
test: /\.css$/,
508+
loader: 'css-loader',
509+
options: {
510+
modules: true,
511+
hashPrefix: 'hash',
512+
},
513+
},
514+
],
515+
},
516+
};
517+
```
518+
519+
### `getLocalIdent`
520+
521+
Type: `Function`
522+
Default: `undefined`
523+
463524
You can also specify the absolute path to your custom `getLocalIdent` function to generate classname based on a different schema.
525+
By default we use built-in function to generate a classname.
464526

465527
**webpack.config.js**
466528

@@ -473,9 +535,6 @@ module.exports = {
473535
loader: 'css-loader',
474536
options: {
475537
modules: true,
476-
context: path.resolve(__dirname, 'context'), // Allow to redefine basic loader context for `local-ident-name`
477-
hashPrefix: 'hash', // Allow to add custom hash to generate more unique classes
478-
localIdentName: '[path][name]__[local]--[hash:base64:5]',
479538
getLocalIdent: (context, localIdentName, localName, options) => {
480539
return 'whatever_random_class_name';
481540
},
@@ -653,7 +712,8 @@ module.exports = {
653712
### Extract
654713

655714
For production builds it's recommended to extract the CSS from your bundle being able to use parallel loading of CSS/JS resources later on.
656-
- This can be achieved by using the [mini-css-extract-plugin](/plugins/mini-css-extract-plugin/) to extract the CSS when running in production mode.
715+
716+
- This can be achieved by using the [mini-css-extract-plugin](/plugins/mini-css-extract-plugin/) to extract the CSS when running in production mode.
657717

658718
- As an alternative, if seeking better development performance and css outputs that mimic production. [extract-css-chunks-webpack-plugin](https://github.com/faceyspacey/extract-css-chunks-webpack-plugin) offers a hot module reload friendly, extended version of mini-css-extract-plugin. HMR real CSS files in dev, works like mini-css in non-dev
659719

@@ -669,21 +729,15 @@ Please take a moment to read our contributing guidelines if you haven't yet done
669729

670730
[npm]: https://img.shields.io/npm/v/css-loader.svg
671731
[npm-url]: https://npmjs.com/package/css-loader
672-
673732
[node]: https://img.shields.io/node/v/css-loader.svg
674733
[node-url]: https://nodejs.org
675-
676734
[deps]: https://david-dm.org/webpack-contrib/css-loader.svg
677735
[deps-url]: https://david-dm.org/webpack-contrib/css-loader
678-
679736
[tests]: https://img.shields.io/circleci/project/github/webpack-contrib/css-loader.svg
680737
[tests-url]: https://circleci.com/gh/webpack-contrib/css-loader
681-
682738
[cover]: https://codecov.io/gh/webpack-contrib/css-loader/branch/master/graph/badge.svg
683739
[cover-url]: https://codecov.io/gh/webpack-contrib/css-loader
684-
685740
[chat]: https://badges.gitter.im/webpack/webpack.svg
686741
[chat-url]: https://gitter.im/webpack/webpack
687-
688742
[size]: https://packagephobia.now.sh/badge?p=css-loader
689743
[size-url]: https://packagephobia.now.sh/result?p=css-loader

‎src/content/loaders/json5-loader.md‎

Lines changed: 62 additions & 86 deletions
Original file line numberDiff line numberDiff line change
@@ -4,133 +4,109 @@ source: https://raw.githubusercontent.com/webpack-contrib/json5-loader/master/RE
44
edit: https://github.com/webpack-contrib/json5-loader/edit/master/README.md
55
repo: https://github.com/webpack-contrib/json5-loader
66
---
7-
A webpack loader for parsing <a href="https://json5.org/"><code>json5</code></a> files into JavaScript objects.
87

9-
## Install
8+
9+
[![npm][npm]][npm-url]
10+
[![node][node]][node-url]
11+
[![deps][deps]][deps-url]
12+
[![tests][tests]][tests-url]
13+
[![cover][cover]][cover-url]
14+
[![chat][chat]][chat-url]
15+
[![size][size]][size-url]
16+
17+
18+
19+
A webpack loader for parsing [json5](https://json5.org/) files into JavaScript objects.
20+
21+
## Getting Started
22+
23+
To begin, you'll need to install `json5-loader`:
1024

1125
```sh
12-
$ npm install --save-dev json5-loader
26+
$ npm install json5-loader --save-dev
1327
```
1428

15-
## Usage
29+
You can use the loader either:
1630

17-
You can use the loader either
18-
* by configuring the `json5-loader` in the `module.loaders` object of the webpack configuration, or
19-
* by directly using the `json5-loader!` prefix to the require statement.
31+
- by configuring the `json5-loader` in the `module.loaders` object of the webpack configuration, or
32+
- by directly using the `json5-loader!` prefix to the require statement.
2033

21-
Suppose we have the following `json5` file
22-
```js
23-
// appData.json5
34+
Suppose we have the following `json5` file:
35+
36+
**file.json5**
37+
38+
```json5
39+
// file.json5
2440
{
2541
env: 'production',
26-
passwordStrength: 'strong'
42+
passwordStrength: 'strong',
2743
}
2844
```
2945

30-
###
46+
### Usage with preconfigured loader
47+
48+
**webpack.config.js**
3149

3250
```js
3351
// webpack.config.js
3452
module.exports = {
3553
entry: './index.js',
36-
output: { /* ... */ },
54+
output: {
55+
/* ... */
56+
},
3757
module: {
3858
loaders: [
3959
{
4060
// make all files ending in .json5 use the `json5-loader`
4161
test: /\.json5$/,
42-
loader: 'json5-loader'
43-
}
44-
]
45-
}
46-
}
62+
loader: 'json5-loader',
63+
},
64+
],
65+
},
66+
};
4767
```
4868

4969
```js
5070
// index.js
51-
var appConfig = require('./appData.json5')
71+
var appConfig = require('./appData.json5');
5272
// or, in ES6
5373
// import appConfig from './appData.json5'
5474

55-
console.log(appConfig.env) // 'production'
75+
console.log(appConfig.env); // 'production'
5676
```
57-
#### Usage with require statement loader prefix
77+
78+
### Usage with require statement loader prefix
79+
5880
```js
59-
var appConfig = require("json5-loader!./appData.json5")
81+
var appConfig = require('json5-loader!./appData.json5');
6082
// returns the content as json parsed object
6183

62-
console.log(appConfig.env) // 'production'
84+
console.log(appConfig.env); // 'production'
6385
```
6486

6587
Don't forget to polyfill require if you want to use it in Node.js. See the webpack documentation.
6688

67-
## Maintainers
68-
69-
<table>
70-
<tbody>
71-
<tr>
72-
<td align="center">
73-
<img width="150" height="150"
74-
src="https://avatars.githubusercontent.com/sokra?v=3">
75-
<br />
76-
<a href="https://github.com/sokra">Tobias Koppers</a>
77-
</td>
78-
<td align="center">
79-
<img width="150" height="150"
80-
src="https://avatars.githubusercontent.com/gdi2290?v=3">
81-
<br />
82-
<a href="https://github.com/gdi2290">PatrickJS</a>
83-
</td>
84-
<td align="center">
85-
<img width="150" height="150" src="https://avatars.githubusercontent.com/Cellule?v=3">
86-
<br />
87-
<a href="https://github.com/Cellule">Michael Ferris</a>
88-
</td>
89-
<td align="center">
90-
<img width="150" height="150"
91-
src="https://avatars.githubusercontent.com/kmck?v=3">
92-
<br />
93-
<a href="https://github.com/kmck">Keith McKnight</a>
94-
</td>
95-
</tr>
96-
<tr>
97-
<td align="center">
98-
<img width="150" height="150"
99-
src="https://avatars.githubusercontent.com/radubrehar?v=3">
100-
<br />
101-
<a href="https://github.com/radubrehar">Radu Brehar</a>
102-
</td>
103-
<td align="center">
104-
<img width="150" height="150"
105-
src="https://avatars.githubusercontent.com/kentcdodds?v=3">
106-
<br />
107-
<a href="https://github.com/kentcdodds">Kent C. Dodds</a>
108-
</td>
109-
<td align="center">
110-
<img width="150" height="150"
111-
src="https://avatars.githubusercontent.com/stevelacy?v=3">
112-
<br />
113-
<a href="https://github.com/stevelacy">Steve Lacy</a>
114-
</td>
115-
</tr>
116-
</tbody>
117-
</table>
118-
119-
## LICENSE
120-
121-
MIT
89+
## Contributing
12290

123-
[npm]: https://img.shields.io/npm/v/json5-loader.svg
124-
[npm-url]: https://npmjs.com/package/json5-loader
91+
Please take a moment to read our contributing guidelines if you haven't yet done so.
12592

126-
[deps]: https://david-dm.org/webpack-contrib/json5-loader.svg
127-
[deps-url]: https://david-dm.org/webpack-contrib/json5-loader
93+
[CONTRIBUTING](https://raw.githubusercontent.com/webpack-contrib/json5-loader/master/.github/CONTRIBUTING.md)
12894

129-
[chat]: https://img.shields.io/badge/gitter-webpack%2Fwebpack-brightgreen.svg
130-
[chat-url]: https://gitter.im/webpack/webpack
95+
## License
13196

132-
[test]: http://img.shields.io/travis/webpack-contrib/json5-loader.svg
133-
[test-url]: https://travis-ci.org/webpack-contrib/json5-loader
97+
[MIT](https://raw.githubusercontent.com/webpack-contrib/json5-loader/master/LICENSE)
13498

99+
[npm]: https://img.shields.io/npm/v/json5-loader.svg
100+
[npm-url]: https://npmjs.com/package/json5-loader
101+
[node]: https://img.shields.io/node/v/json5-loader.svg
102+
[node-url]: https://nodejs.org
103+
[deps]: https://david-dm.org/webpack-contrib/json5-loader.svg
104+
[deps-url]: https://david-dm.org/webpack-contrib/json5-loader
105+
[tests]: http://img.shields.io/travis/webpack-contrib/json5-loader.svg
106+
[tests-url]: https://travis-ci.org/webpack-contrib/json5-loader
135107
[cover]: https://codecov.io/gh/webpack-contrib/json5-loader/branch/master/graph/badge.svg
136108
[cover-url]: https://codecov.io/gh/webpack-contrib/json5-loader
109+
[chat]: https://img.shields.io/badge/gitter-webpack%2Fwebpack-brightgreen.svg
110+
[chat-url]: https://gitter.im/webpack/webpack
111+
[size]: https://packagephobia.now.sh/badge?p=json5-loader
112+
[size-url]: https://packagephobia.now.sh/result?p=json5-loader

0 commit comments

Comments
 (0)