Skip to content

Commit 69dfd40

Browse files
michael-ciniawskyjoshwiens
authored andcommitted
chore(*): project standardization updates for v2 (#349)
* docs(logo): add logo * docs(README): refactor for webpack v2 * ci(travis): add node v6 * chore(package): add engines, update dependencies * docs(LICENSE): add JSF license * chore(.github): add ISSUE && PULL_REQUEST_TEMPLATE
1 parent 74b86e0 commit 69dfd40

File tree

7 files changed

+162
-79
lines changed

7 files changed

+162
-79
lines changed

.github/ISSUE_TEMPLATE.md

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
1. Check the version of package you are using. If it's not the newest version, update and try again (see changelog while updating!).
2+
2. If the issue is still there, write a minimal project showing the problem and expected output.
3+
3. Link to the project and mention Node version and OS in your report.
4+
5+
**IMPORTANT! You should use [Stack Overflow](https://stackoverflow.com/) for support related questions.**

.github/PULL_REQUEST_TEMPLATE.md

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,4 @@
1+
1. [Read and sign the CLA](https://cla.js.foundation/webpack/webpack.js.org). This needs to be done only once. PRs that haven't signed it won't be accepted.
2+
2. Make sure your PR complies with [the writer's guide](https://webpack.js.org/writers-guide/).
3+
3. Read through the PR diff carefully as sometimes this can reveal issues. The work will be reviewed, but this can save some effort.
4+
4. Remove these instructions from your PR as they are for your eyes only.

.travis.yml

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,9 @@
11
sudo: false
22
language: node_js
33
node_js:
4-
- "4"
54
- node
5+
- 6
6+
- 4
67
script: npm run travis
78

89
after_success:

LICENSE

Lines changed: 20 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,20 @@
1+
Copyright JS Foundation and other contributors
2+
3+
Permission is hereby granted, free of charge, to any person obtaining
4+
a copy of this software and associated documentation files (the
5+
'Software'), to deal in the Software without restriction, including
6+
without limitation the rights to use, copy, modify, merge, publish,
7+
distribute, sublicense, and/or sell copies of the Software, and to
8+
permit persons to whom the Software is furnished to do so, subject to
9+
the following conditions:
10+
11+
The above copyright notice and this permission notice shall be
12+
included in all copies or substantial portions of the Software.
13+
14+
THE SOFTWARE IS PROVIDED 'AS IS', WITHOUT WARRANTY OF ANY KIND,
15+
EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF
16+
MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT.
17+
IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY
18+
CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT,
19+
TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE
20+
SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.

README.md

Lines changed: 118 additions & 70 deletions
Original file line numberDiff line numberDiff line change
@@ -1,98 +1,117 @@
1-
# extract text plugin for webpack 2
2-
3-
The API has changed since version 1. For the webpack 1 version, see [the README in the webpack-1 branch](https://github.com/webpack/extract-text-webpack-plugin/blob/webpack-1/README.md).
4-
5-
## Install
6-
7-
> You can either install it with [npm](https://nodejs.org/en/) or [yarn](https://yarnpkg.com/)
8-
9-
```sh
1+
[![npm][npm]][npm-url]
2+
[![node][node]][node-url]
3+
[![deps][deps]][deps-url]
4+
[![tests][tests]][tests-url]
5+
[![coverage][cover]][cover-url]
6+
[![chat][chat]][chat-url]
7+
8+
<div align="center">
9+
<img width="200" height="200"
10+
src="https://webpack.github.io/extract-text-webpack-plugin/logo.svg">
11+
<a href="https://github.com/webpack/webpack">
12+
<img width="200" height="200"
13+
src="https://webpack.js.org/assets/icon-square-big.svg">
14+
</a>
15+
<h1>Extract Text Plugin</h1>
16+
</div>
17+
18+
<h2 align="center">Install</h2>
19+
20+
```bash
1021
npm install --save-dev extract-text-webpack-plugin
1122
```
12-
or
13-
```sh
14-
yarn add --dev extract-text-webpack-plugin
15-
```
1623

17-
## Usage example with css
24+
<h2 align="center">Usage</h2>
25+
26+
> :warning: For webpack v1, see [the README in the webpack-1 branch](https://github.com/webpack/extract-text-webpack-plugin/blob/webpack-1/README.md).
27+
28+
```js
29+
const ExtractTextPlugin = require("extract-text-webpack-plugin");
1830

19-
``` javascript
20-
var ExtractTextPlugin = require("extract-text-webpack-plugin");
2131
module.exports = {
22-
module: {
23-
loaders: [
24-
{ test: /\.css$/, loader: ExtractTextPlugin.extract({
25-
fallbackLoader: "style-loader",
26-
loader: "css-loader"
27-
}) }
28-
]
29-
},
30-
plugins: [
31-
new ExtractTextPlugin("styles.css")
32-
]
32+
module: {
33+
rules: [
34+
{
35+
test: /\.css$/,
36+
loader: ExtractTextPlugin.extract({
37+
fallbackLoader: "style-loader",
38+
loader: "css-loader"
39+
})
40+
}
41+
]
42+
},
43+
plugins: [
44+
new ExtractTextPlugin("styles.css");
45+
]
3346
}
3447
```
3548

36-
It moves every `require("style.css")` in entry chunks into a separate css output file. So your styles are no longer inlined into the javascript, but separate in a css bundle file (`styles.css`). If your total stylesheet volume is big, it will be faster because the stylesheet bundle is loaded in parallel to the javascript bundle.
37-
38-
Advantages:
49+
It moves every `require("style.css")` in entry chunks into a separate CSS file. So your styles are no longer inlined into the JS bundle, but separate in a CSS bundle file (`styles.css`). If your total stylesheet volume is big, it will be faster because the CSS bundle is loaded in parallel to the JS bundle.
3950

40-
* Fewer style tags (older IE has a limit)
41-
* CSS SourceMap (with `devtool: "source-map"` and `css-loader?sourceMap`)
42-
* CSS requested in parallel
43-
* CSS cached separate
44-
* Faster runtime (less code and DOM operations)
51+
|Advantages|Caveats|
52+
|:---------|:------|
53+
| Fewer style tags (older IE has a limit) | Additional HTTP request |
54+
| CSS SourceMap (with `devtool: "source-map"` and `extract-text-webpack-plugin?sourceMap`) | Longer compilation time |
55+
| CSS requested in parallel | No runtime public path modification |
56+
| CSS cached separate | No Hot Module Replacement |
57+
| Faster runtime (less code and DOM operations) | ... |
4558

46-
Caveats:
59+
<h2 align="center">Options</h2>
4760

48-
* Additional HTTP request
49-
* Longer compilation time
50-
* More complex configuration
51-
* No runtime public path modification
52-
* No Hot Module Replacement
53-
54-
## API
55-
56-
``` javascript
61+
```js
5762
new ExtractTextPlugin(options: filename | object)
5863
```
5964

60-
* `options.filename: string` _(required)_ the filename of the result file. May contain `[name]`, `[id]` and `[contenthash]`
61-
* `[name]` the name of the chunk
62-
* `[id]` the number of the chunk
63-
* `[contenthash]` a hash of the content of the extracted file
64-
* `options.allChunks: boolean` extract from all additional chunks too (by default it extracts only from the initial chunk(s))
65-
* `options.disable: boolean` disables the plugin
66-
* `options.id: string` Unique ident for this plugin instance. (For advanced usage only, by default automatically generated)
65+
|Name|Type|Description|
66+
|:--:|:--:|:----------|
67+
|**`id`**|`{String}`|Unique ident for this plugin instance. (For advanced usage only, by default automatically generated)|
68+
|**`filename`**|`{String}`|Name of the result file. May contain `[name]`, `[id]` and `[contenthash]`|
69+
|**`options.allChunks`**|`{Boolean}`|Extract from all additional chunks too (by default it extracts only from the initial chunk(s))|
70+
|**`options.disable`**|`{Boolean}`|Disables the plugin|
71+
72+
* `[name]` name of the chunk
73+
* `[id]` number of the chunk
74+
* `[contenthash]` hash of the content of the extracted file
75+
76+
> :warning: `ExtractTextPlugin` generates a file **per entry**, so you must use `[name]`, `[id]` or `[contenthash]` when using multiple entries.
6777
68-
The `ExtractTextPlugin` generates an output file per entry, so you must use `[name]`, `[id]` or `[contenthash]` when using multiple entries.
78+
#### `#extract`
6979

70-
``` javascript
80+
```js
7181
ExtractTextPlugin.extract(options: loader | object)
7282
```
7383

7484
Creates an extracting loader from an existing loader. Supports loaders of type `{ loader: string; query: object }`.
7585

76-
* `options.loader: string | object | loader[]` _(required)_ the loader(s) that should be used for converting the resource to a css exporting module
77-
* `options.fallbackLoader: string | object | loader[]` the loader(s) that should be used when the css is not extracted (i.e. in an additional chunk when `allChunks: false`)
78-
* `options.publicPath: string` override the `publicPath` setting for this loader
86+
|Name|Type|Description|
87+
|:--:|:--:|:----------|
88+
|**`options.loader`**|`{String}`/`{Object}`|Loader(s) that should be used for converting the resource to a CSS exporting module _(required)_|
89+
|**`options.fallbackLoader`**|`{String}`/`{Object}`|loader(e.g `'style-loader'`) that should be used when the CSS is not extracted (i.e. in an additional chunk when `allChunks: false`)|
90+
|**`options.publicPath`**|`{String}`|Override the `publicPath` setting for this loader|
7991

80-
There is also an `extract` function on the instance. You should use this if you have more than one `ExtractTextPlugin`.
8192

82-
```javascript
83-
let ExtractTextPlugin = require('extract-text-webpack-plugin');
93+
#### Multiple Instances
8494

85-
// multiple extract instances
86-
let extractCSS = new ExtractTextPlugin('stylesheets/[name].css');
87-
let extractLESS = new ExtractTextPlugin('stylesheets/[name].less');
95+
There is also an `extract` function on the instance. You should use this if you have more than one instance of `ExtractTextPlugin`.
96+
97+
```js
98+
const ExtractTextPlugin = require('extract-text-webpack-plugin');
99+
100+
// Create multiple instances
101+
const extractCSS = new ExtractTextPlugin('stylesheets/[name].css');
102+
const extractLESS = new ExtractTextPlugin('stylesheets/[name].less');
88103

89104
module.exports = {
90-
...
91105
module: {
92-
loaders: [
93-
{ test: /\.scss$/i, loader: extractCSS.extract(['css-loader','sass-loader']) },
94-
{ test: /\.less$/i, loader: extractLESS.extract(['css-loader','less-loader']) },
95-
...
106+
use: [
107+
{
108+
test: /\.css$/,
109+
loader: extractCSS.extract([ 'css-loader', 'postcss-loader' ])
110+
},
111+
{
112+
test: /\.html$/i,
113+
loader: extractLESS.extract([ 'css-loader', 'less-loader' ])
114+
},
96115
]
97116
},
98117
plugins: [
@@ -102,6 +121,35 @@ module.exports = {
102121
};
103122
```
104123

105-
## License
124+
<h2 align="center">Maintainer</h2>
125+
126+
<table>
127+
<tbody>
128+
<tr>
129+
<td align="center">
130+
<img width="150 height="150" src="https://github.com/sokra.png?s=150">
131+
<br>
132+
<a href="https://github.com/sokra">Tobias Koppers</a>
133+
</td>
134+
<tr>
135+
<tbody>
136+
</table>
137+
138+
139+
[npm]: https://img.shields.io/npm/v/extract-text-webpack-plugin.svg
140+
[npm-url]: https://npmjs.com/package/extract-text-webpack-plugin
141+
142+
[node]: https://img.shields.io/node/v/extract-text-webpack-plugin.svg
143+
[node-url]: https://nodejs.org
144+
145+
[deps]: https://david-dm.org/webpack/extract-text-webpack-plugin.svg
146+
[deps-url]: https://david-dm.org/webpack/extract-text-webpack-plugin
147+
148+
[tests]: http://img.shields.io/travis/webpack/extract-text-webpack-plugin.svg
149+
[tests-url]: https://travis-ci.org/webpack/extract-text-webpack-plugin
150+
151+
[cover]: https://coveralls.io/repos/github/webpack/extract-text-webpack-plugin/badge.svg
152+
[cover-url]: https://coveralls.io/github/webpack/extract-text-webpack-plugin
106153

107-
MIT (http://www.opensource.org/licenses/mit-license.php)
154+
[chat]: https://badges.gitter.im/webpack/webpack.svg
155+
[chat-url]: https://gitter.im/webpack/webpack

logo.svg

Lines changed: 4 additions & 0 deletions
Loading

package.json

Lines changed: 9 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -3,8 +3,9 @@
33
"version": "2.0.0-beta.5",
44
"author": "Tobias Koppers @sokra",
55
"description": "Extract text from bundle into a file.",
6+
"engines": { "node": ">=4.3.0 < 5.0.0 || >= 5.10" },
67
"peerDependencies": {
7-
"webpack": "^2.1.0-beta.19 || ^2.2.0-rc.0"
8+
"webpack": "^2.2.0"
89
},
910
"dependencies": {
1011
"async": "^2.1.2",
@@ -14,15 +15,15 @@
1415
"devDependencies": {
1516
"codecov.io": "^0.1.2",
1617
"coveralls": "^2.11.2",
17-
"css-loader": "^0.21.0",
18-
"file-loader": "^0.8.4",
19-
"istanbul": "^0.3.13",
20-
"mocha": "^2.3.3",
21-
"mocha-lcov-reporter": "0.0.2",
18+
"css-loader": "^0.26.1",
19+
"file-loader": "^0.9.0",
20+
"istanbul": "^0.4.5",
21+
"mocha": "^3.2.0",
22+
"mocha-lcov-reporter": "1.2.0",
2223
"raw-loader": "^0.5.1",
23-
"should": "^7.1.1",
24+
"should": "^11.1.2",
2425
"style-loader": "^0.13.0",
25-
"webpack": "^2.1.0-beta"
26+
"webpack": "^2.2.0"
2627
},
2728
"homepage": "http://github.com/webpack/extract-text-webpack-plugin",
2829
"repository": {

0 commit comments

Comments
 (0)