Skip to content
This repository was archived by the owner on May 29, 2019. It is now read-only.
Permalink

Comparing changes

Choose two branches to see what’s changed or to start a new pull request. If you need to, you can also or learn more about diff comparisons.

Open a pull request

Create a new pull request by comparing changes across two branches. If you need to, you can also . Learn more about diff comparisons here.
base repository: webpack-contrib/extract-text-webpack-plugin
Failed to load repositories. Confirm that selected base ref is valid, then try again.
Loading
base: 2845af9a63ea45710628479065a24f7deb910cd3
Choose a base ref
...
head repository: webpack-contrib/extract-text-webpack-plugin
Failed to load repositories. Confirm that selected head ref is valid, then try again.
Loading
compare: 5268d14cc83390d9fdadc98f67efb5f0d00a313f
Choose a head ref
Loading
Showing with 1,016 additions and 243 deletions.
  1. +5 −0 .github/ISSUE_TEMPLATE.md
  2. +4 −0 .github/PULL_REQUEST_TEMPLATE.md
  3. +5 −0 .gitignore
  4. +2 −1 .travis.yml
  5. +54 −0 CHANGELOG.md
  6. +7 −3 ExtractedModule.js
  7. +20 −0 LICENSE
  8. +186 −47 README.md
  9. +61 −0 RELEASE.md
  10. +1 −1 example/dep.js
  11. +1 −1 example/dep2.js
  12. +1 −1 example/entry.js
  13. +13 −9 example/webpack.config.js
  14. +101 −81 index.js
  15. +91 −80 loader.js
  16. +4 −0 logo.svg
  17. +19 −13 package.json
  18. +19 −0 schema/loader-schema.js
  19. +43 −0 schema/plugin-schema.json
  20. +13 −0 schema/validator.js
  21. +4 −1 test/TestCases.test.js
  22. +1 −0 test/cases/merging-chunk/c.txt
  23. +1 −0 test/cases/merging-chunk/expected/file.css
  24. +1 −0 test/cases/merging-chunk/index.js
  25. +2 −1 test/cases/merging-chunk/webpack.config.js
  26. +2 −1 test/cases/merging-multiple-entries-shared/webpack.config.js
  27. +2 −1 test/cases/merging-multiple-entries/webpack.config.js
  28. +5 −0 test/cases/optimize-tree/a.js
  29. +1 −0 test/cases/optimize-tree/a.txt
  30. +5 −0 test/cases/optimize-tree/b.js
  31. +1 −0 test/cases/optimize-tree/b.txt
  32. +3 −0 test/cases/optimize-tree/expected/main.txt
  33. +9 −0 test/cases/optimize-tree/index.js
  34. +1 −0 test/cases/optimize-tree/index.txt
  35. +19 −0 test/cases/optimize-tree/webpack.config.js
  36. +4 −0 test/cases/order-undefined-error/a.css
  37. +4 −0 test/cases/order-undefined-error/b.css
  38. +2 −0 test/cases/order-undefined-error/c1.css
  39. +2 −0 test/cases/order-undefined-error/c2.css
  40. +8 −0 test/cases/order-undefined-error/expected/file.css
  41. +2 −0 test/cases/order-undefined-error/index.js
  42. +26 −0 test/cases/order-undefined-error/webpack.config.js
  43. +3 −0 test/cases/simple-query-object/a.css
  44. +3 −0 test/cases/simple-query-object/b.css
  45. +8 −0 test/cases/simple-query-object/expected/file.css
  46. +2 −0 test/cases/simple-query-object/index.js
  47. +18 −0 test/cases/simple-query-object/webpack.config.js
  48. +3 −0 test/cases/simple-queryless-object/a.css
  49. +3 −0 test/cases/simple-queryless-object/b.css
  50. +8 −0 test/cases/simple-queryless-object/expected/file.css
  51. +2 −0 test/cases/simple-queryless-object/index.js
  52. +18 −0 test/cases/simple-queryless-object/webpack.config.js
  53. +2 −1 test/cases/splitted-chunk/webpack.config.js
  54. +2 −1 test/cases/splitted-multiple-entries/webpack.config.js
  55. +189 −0 test/extract.test.js
5 changes: 5 additions & 0 deletions .github/ISSUE_TEMPLATE.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
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. If the issue is still there, write a minimal project showing the problem and expected output.
3. Link to the project and mention Node version and OS in your report.

**IMPORTANT! You should use [Stack Overflow](https://stackoverflow.com/) for support related questions.**
4 changes: 4 additions & 0 deletions .github/PULL_REQUEST_TEMPLATE.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,4 @@
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. Check out the [development guide](https://webpack.js.org/development/) for the API and development guidelines.
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. Remove these instructions from your PR as they are for your eyes only.
5 changes: 5 additions & 0 deletions .gitignore
Original file line number Diff line number Diff line change
@@ -1,3 +1,8 @@
/node_modules

/example/assets

/test/js
/coverage

/.idea
3 changes: 2 additions & 1 deletion .travis.yml
Original file line number Diff line number Diff line change
@@ -1,8 +1,9 @@
sudo: false
language: node_js
node_js:
- "0.12"
- node
- 6
- 4
script: npm run travis

after_success:
54 changes: 54 additions & 0 deletions CHANGELOG.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,54 @@
# Change Log

All notable changes to this project will be documented in this file. See [standard-version](https://github.com/conventional-changelog/standard-version) for commit guidelines.

<a name="2.0.0"></a>
# [2.0.0](https://github.com/webpack/extract-text-webpack-plugin/compare/v2.0.0-rc.3...v2.0.0) (2017-02-24)



<a name="2.0.0-rc.2"></a>
# [2.0.0-rc.2](https://github.com/webpack/extract-text-webpack-plugin/compare/v2.0.0-rc.1...v2.0.0-rc.2) (2017-01-28)


### Bug Fixes

* **schema:** allow `extract` to accept omit/remove flags ([8ce93d5](https://github.com/webpack/extract-text-webpack-plugin/commit/8ce93d5)), closes [#371](https://github.com/webpack/extract-text-webpack-plugin/issues/371)
* **schema:** connect loader schema with the code properly ([03bb4aa](https://github.com/webpack/extract-text-webpack-plugin/commit/03bb4aa))
* **schema:** emit proper error messages ([70cbd4b](https://github.com/webpack/extract-text-webpack-plugin/commit/70cbd4b))


### Features

* **errors:** show nicer errors if there are extra fields ([76a171d](https://github.com/webpack/extract-text-webpack-plugin/commit/76a171d))



<a name="2.0.0-rc.1"></a>
# [2.0.0-rc.1](https://github.com/webpack/extract-text-webpack-plugin/compare/v2.0.0-rc.0...v2.0.0-rc.1) (2017-01-28)


### Bug Fixes

* **options:** pass proper loader options to children ([#266](https://github.com/webpack/extract-text-webpack-plugin/issues/266)) ([6abf42d](https://github.com/webpack/extract-text-webpack-plugin/commit/6abf42d))



<a name="2.0.0-rc.0"></a>
# [2.0.0-rc.0](https://github.com/webpack/extract-text-webpack-plugin/compare/v2.0.0-beta.5...v2.0.0-rc.0) (2017-01-26)


### Bug Fixes

* **readme:** Incorrect loader configuration ([e477cc7](https://github.com/webpack/extract-text-webpack-plugin/commit/e477cc7))


### Features

* **extract:** return an array of loader objects ([#343](https://github.com/webpack/extract-text-webpack-plugin/issues/343)) ([74b86e0](https://github.com/webpack/extract-text-webpack-plugin/commit/74b86e0))



# Change Log

All notable changes to this project will be documented in this file. See [standard-version](https://github.com/conventional-changelog/standard-version) for commit guidelines.
10 changes: 7 additions & 3 deletions ExtractedModule.js
Original file line number Diff line number Diff line change
@@ -27,10 +27,14 @@ ExtractedModule.prototype.addChunk = function(chunk) {
this.chunks.push(chunk);
};

ExtractedModule.prototype._removeAndDo = require("webpack/lib/removeAndDo");

ExtractedModule.prototype.removeChunk = function(chunk) {
return this._removeAndDo("chunks", chunk, "removeModule");
var idx = this.chunks.indexOf(chunk);
if(idx >= 0) {
this.chunks.splice(idx, 1);
chunk.removeModule(this);
return true;
}
return false;
};

ExtractedModule.prototype.rewriteChunkInReasons = function(oldChunk, newChunks) { };
20 changes: 20 additions & 0 deletions LICENSE
Original file line number Diff line number Diff line change
@@ -0,0 +1,20 @@
Copyright JS Foundation and other contributors

Permission is hereby granted, free of charge, to any person obtaining
a copy of this software and associated documentation files (the
'Software'), to deal in the Software without restriction, including
without limitation the rights to use, copy, modify, merge, publish,
distribute, sublicense, and/or sell copies of the Software, and to
permit persons to whom the Software is furnished to do so, subject to
the following conditions:

The above copyright notice and this permission notice shall be
included in all copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED 'AS IS', WITHOUT WARRANTY OF ANY KIND,
EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF
MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT.
IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY
CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT,
TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE
SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
233 changes: 186 additions & 47 deletions README.md
Original file line number Diff line number Diff line change
@@ -1,69 +1,208 @@
# extract text plugin for webpack
[![npm][npm]][npm-url]
[![node][node]][node-url]
[![deps][deps]][deps-url]
[![tests][tests]][tests-url]
[![coverage][cover]][cover-url]
[![chat][chat]][chat-url]

<div align="center">
<img width="200" height="200"
src="https://cdn.rawgit.com/webpack-contrib/extract-text-webpack-plugin/574e3200/logo.svg">
<a href="https://github.com/webpack/webpack">
<img width="200" height="200"
src="https://webpack.js.org/assets/icon-square-big.svg">
</a>
<h1>Extract Text Plugin</h1>
</div>

<h2 align="center">Install</h2>

```bash
# for webpack 1
npm install --save-dev extract-text-webpack-plugin
# for webpack 2
npm install --save-dev extract-text-webpack-plugin@beta
```

<h2 align="center">Usage</h2>

## Usage example with css
> :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).
```js
const ExtractTextPlugin = require("extract-text-webpack-plugin");

``` javascript
var ExtractTextPlugin = require("extract-text-webpack-plugin");
module.exports = {
module: {
loaders: [
{ test: /\.css$/, loader: ExtractTextPlugin.extract("style-loader", "css-loader") }
]
},
plugins: [
new ExtractTextPlugin("styles.css")
]
module: {
rules: [
{
test: /\.css$/,
use: ExtractTextPlugin.extract({
fallback: "style-loader",
use: "css-loader"
})
}
]
},
plugins: [
new ExtractTextPlugin("styles.css"),
]
}
```

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.
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.

|Advantages|Caveats|
|:---------|:------|
| Fewer style tags (older IE has a limit) | Additional HTTP request |
| CSS SourceMap (with `devtool: "source-map"` and `extract-text-webpack-plugin?sourceMap`) | Longer compilation time |
| CSS requested in parallel | No runtime public path modification |
| CSS cached separate | No Hot Module Replacement |
| Faster runtime (less code and DOM operations) | ... |

Advantages:
<h2 align="center">Options</h2>

* Fewer style tags (older IE has a limit)
* CSS SourceMap (with `devtool: "source-map"` and `css-loader?sourceMap`)
* CSS requested in parallel
* CSS cached separate
* Faster runtime (less code and DOM operations)
```js
new ExtractTextPlugin(options: filename | object)
```

|Name|Type|Description|
|:--:|:--:|:----------|
|**`id`**|`{String}`|Unique ident for this plugin instance. (For advanced usage only, by default automatically generated)|
|**`filename`**|`{String}`|Name of the result file. May contain `[name]`, `[id]` and `[contenthash]`|
|**`allChunks`**|`{Boolean}`|Extract from all additional chunks too (by default it extracts only from the initial chunk(s))|
|**`disable`**|`{Boolean}`|Disables the plugin|
|**`ignoreOrder`**|`{Boolean}`|Disables order check (useful for CSS Modules!), `false` by default|

Caveats:
* `[name]` name of the chunk
* `[id]` number of the chunk
* `[contenthash]` hash of the content of the extracted file

* Additional HTTP request
* Longer compilation time
* More complex configuration
* No runtime public path modification
* No Hot Module Replacement
> :warning: `ExtractTextPlugin` generates a file **per entry**, so you must use `[name]`, `[id]` or `[contenthash]` when using multiple entries.
## API
#### `#extract`

``` javascript
new ExtractTextPlugin([id: string], filename: string, [options])
```js
ExtractTextPlugin.extract(options: loader | object)
```

* `id` Unique ident for this plugin instance. (For advanded usage only, by default automatic generated)
* `filename` the filename of the result file. May contain `[name]`, `[id]` and `[contenthash]`.
* `[name]` the name of the chunk
* `[id]` the number of the chunk
* `[contenthash]` a hash of the content of the extracted file
* `options`
* `allChunks` extract from all additional chunks too (by default it extracts only from the initial chunk(s))
* `disable` disables the plugin
Creates an extracting loader from an existing loader. Supports loaders of type `{ loader: [name]-loader -> {String}, options: {} -> {Object} }`.

|Name|Type|Description|
|:--:|:--:|:----------|
|**`options.use`**|`{String}`/`{Array}`/`{Object}`|Loader(s) that should be used for converting the resource to a CSS exporting module _(required)_|
|**`options.fallback`**|`{String}`/`{Array}`/`{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`)|
|**`options.publicPath`**|`{String}`|Override the `publicPath` setting for this loader|


The `ExtractTextPlugin` generates an output file per entry, so you must use `[name]`, `[id]` or `[contenthash]` when using multiple entries.
#### Multiple Instances

``` javascript
ExtractTextPlugin.extract([notExtractLoader], loader, [options])
There is also an `extract` function on the instance. You should use this if you have more than one instance of `ExtractTextPlugin`.

```js
const ExtractTextPlugin = require('extract-text-webpack-plugin');

// Create multiple instances
const extractCSS = new ExtractTextPlugin('stylesheets/[name].css');
const extractLESS = new ExtractTextPlugin('stylesheets/[name].less');

module.exports = {
module: {
rules: [
{
test: /\.css$/,
use: extractCSS.extract([ 'css-loader', 'postcss-loader' ])
},
{
test: /\.less$/i,
use: extractLESS.extract([ 'css-loader', 'less-loader' ])
},
]
},
plugins: [
extractCSS,
extractLESS
]
};
```

Creates an extracting loader from an existing loader.
### Extracting Sass or LESS

* `notExtractLoader` (optional) the loader(s) that should be used when the css is not extracted (i.e. in an additional chunk when `allChunks: false`)
* `loader` the loader(s) that should be used for converting the resource to a css exporting module.
* `options`
* `publicPath` override the `publicPath` setting for this loader.
The configuration is the same, switch out `sass-loader` for `less-loader` when necessary.

There is also an `extract` function on the instance. You should use this if you have more than one ExtractTextPlugin.
```js
const ExtractTextPlugin = require('extract-text-webpack-plugin');

## License
module.exports = {
module: {
use: [
{
test: /\.scss$/,
use: ExtractTextPlugin.extract({
fallback: 'style-loader',
//resolve-url-loader may be chained before sass-loader if necessary
use: ['css-loader', 'sass-loader']
})
}
]
},
plugins: [
new ExtractTextPlugin('style.css')
//if you want to pass in options, you can do so:
//new ExtractTextPlugin({
// filename: 'style.css'
//})
]
}
```

MIT (http://www.opensource.org/licenses/mit-license.php)
<h2 align="center">Maintainers</h2>

<table>
<tbody>
<tr>
<td align="center">
<img width="150" height="150"
src="https://avatars3.githubusercontent.com/u/166921?v=3&s=150">
</br>
<a href="https://github.com/bebraw">Juho Vepsäläinen</a>
</td>
<td align="center">
<img width="150" height="150"
src="https://avatars2.githubusercontent.com/u/8420490?v=3&s=150">
</br>
<a href="https://github.com/d3viant0ne">Joshua Wiens</a>
</td>
<td align="center">
<img width="150" height="150"
src="https://avatars3.githubusercontent.com/u/533616?v=3&s=150">
</br>
<a href="https://github.com/SpaceK33z">Kees Kluskens</a>
</td>
<td align="center">
<img width="150" height="150"
src="https://avatars3.githubusercontent.com/u/3408176?v=3&s=150">
</br>
<a href="https://github.com/TheLarkInn">Sean Larkin</a>
</td>
</tr>
<tbody>
</table>


[npm]: https://img.shields.io/npm/v/extract-text-webpack-plugin.svg
[npm-url]: https://npmjs.com/package/extract-text-webpack-plugin

[node]: https://img.shields.io/node/v/extract-text-webpack-plugin.svg
[node-url]: https://nodejs.org

[deps]: https://david-dm.org/webpack-contrib/extract-text-webpack-plugin.svg
[deps-url]: https://david-dm.org/webpack-contrib/extract-text-webpack-plugin

[tests]: http://img.shields.io/travis/webpack-contrib/extract-text-webpack-plugin.svg
[tests-url]: https://travis-ci.org/webpack-contrib/extract-text-webpack-plugin

[cover]: https://coveralls.io/repos/github/webpack-contrib/extract-text-webpack-plugin/badge.svg
[cover-url]: https://coveralls.io/github/webpack-contrib/extract-text-webpack-plugin

[chat]: https://badges.gitter.im/webpack/webpack.svg
[chat-url]: https://gitter.im/webpack/webpack
Loading