This commit is contained in:
2022-07-21 03:28:35 +00:00
parent d7c883d6df
commit 51b34b0e1d
30103 changed files with 4152204 additions and 23 deletions
+151
View File
@@ -0,0 +1,151 @@
# Changelog
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.
## [4.9.0](https://github.com/faceyspacey/extract-css-chunks-webpack-plugin/compare/v4.8.0...v4.9.0) (2020-12-07)
### Features
* adding federated stats ([#303](https://github.com/faceyspacey/extract-css-chunks-webpack-plugin/issues/303)) ([c17d755](https://github.com/faceyspacey/extract-css-chunks-webpack-plugin/commit/c17d75547a5efb5971d03555163ea4d685080706))
* adding federated stats ([#304](https://github.com/faceyspacey/extract-css-chunks-webpack-plugin/issues/304)) ([1eab2d0](https://github.com/faceyspacey/extract-css-chunks-webpack-plugin/commit/1eab2d0b8868837de8f89f68c1ad14be741f3e78))
### Bug Fixes
* Check if bestMatch exists before pop() ([#294](https://github.com/faceyspacey/extract-css-chunks-webpack-plugin/issues/294)) ([ef82da9](https://github.com/faceyspacey/extract-css-chunks-webpack-plugin/commit/ef82da9068bd699344774d39f61b7ead8cf682cb))
### [0.9.0](https://github.com/webpack-contrib/extract-css-chunks-webpack-plugin/compare/v0.8.2...v0.9.0) (2019-12-20)
### Features
* new `esModule` option ([#475](https://github.com/webpack-contrib/extract-css-chunks-webpack-plugin/issues/475)) ([596e47a](https://github.com/webpack-contrib/extract-css-chunks-webpack-plugin/commit/596e47a8aead53f9cc0e2b1e09a2c20e455e45c1))
### [0.8.2](https://github.com/webpack-contrib/extract-css-chunks-webpack-plugin/compare/v0.8.1...v0.8.2) (2019-12-17)
### Bug Fixes
* context for dependencies ([#474](https://github.com/webpack-contrib/extract-css-chunks-webpack-plugin/issues/474)) ([0269860](https://github.com/webpack-contrib/extract-css-chunks-webpack-plugin/commit/0269860adb0eaad477901188eea66693fedf7769))
### [0.8.1](https://github.com/webpack-contrib/extract-css-chunks-webpack-plugin/compare/v0.8.0...v0.8.1) (2019-12-17)
### Bug Fixes
* use filename mutated after instantiation ([#430](https://github.com/webpack-contrib/extract-css-chunks-webpack-plugin/issues/430)) ([0bacfac](https://github.com/webpack-contrib/extract-css-chunks-webpack-plugin/commit/0bacfac7ef4a06b4810fbc140875f7a038caa5bc))
* improve warning of conflict order ([#465](https://github.com/webpack-contrib/extract-css-chunks-webpack-plugin/issues/465)) ([357d073](https://github.com/webpack-contrib/extract-css-chunks-webpack-plugin/commit/357d073bf0259f2c44e613ad4dfcbcc8354e4be3))
* support ES module syntax ([#472](https://github.com/webpack-contrib/extract-css-chunks-webpack-plugin/issues/472)) ([2f72e1a](https://github.com/webpack-contrib/extract-css-chunks-webpack-plugin/commit/2f72e1aa267de23f121441714e88406f579e77b2))
## [0.8.0](https://github.com/webpack-contrib/extract-css-chunks-webpack-plugin/compare/v0.7.0...v0.8.0) (2019-07-16)
### Features
* Add ignoreOrder option ([#422](https://github.com/webpack-contrib/extract-css-chunks-webpack-plugin/issues/422)) ([4ad3373](https://github.com/webpack-contrib/extract-css-chunks-webpack-plugin/commit/4ad3373))
## [0.7.0](https://github.com/webpack-contrib/extract-css-chunks-webpack-plugin/compare/v0.6.0...v0.7.0) (2019-05-27)
### Bug Fixes
* do not attempt to reload unrequestable urls ([#378](https://github.com/webpack-contrib/extract-css-chunks-webpack-plugin/issues/378)) ([44d00ea](https://github.com/webpack-contrib/extract-css-chunks-webpack-plugin/commit/44d00ea))
* fix `publicPath` regression ([#384](https://github.com/webpack-contrib/extract-css-chunks-webpack-plugin/issues/384)) ([582ebfe](https://github.com/webpack-contrib/extract-css-chunks-webpack-plugin/commit/582ebfe))
* enable using plugin without defining options ([#393](https://github.com/webpack-contrib/extract-css-chunks-webpack-plugin/issues/393)) ([a7dee8c](https://github.com/webpack-contrib/extract-css-chunks-webpack-plugin/commit/a7dee8c))
* downgrading normalize-url ([#399](https://github.com/webpack-contrib/extract-css-chunks-webpack-plugin/issues/399)) ([0dafaf6](https://github.com/webpack-contrib/extract-css-chunks-webpack-plugin/commit/0dafaf6))
* hmr do not crash on link without href ([#400](https://github.com/webpack-contrib/extract-css-chunks-webpack-plugin/issues/400)) ([aa9b541](https://github.com/webpack-contrib/extract-css-chunks-webpack-plugin/commit/aa9b541))
* hmr reload with invalid link url ([#402](https://github.com/webpack-contrib/extract-css-chunks-webpack-plugin/issues/402)) ([30a19b0](https://github.com/webpack-contrib/extract-css-chunks-webpack-plugin/commit/30a19b0))
### Features
* add `moduleFilename` option ([#381](https://github.com/webpack-contrib/extract-css-chunks-webpack-plugin/issues/381)) ([13e9cbf](https://github.com/webpack-contrib/extract-css-chunks-webpack-plugin/commit/13e9cbf))
<a name="0.6.0"></a>
# [0.6.0](https://github.com/webpack-contrib/extract-css-chunks-webpack-plugin/compare/v0.5.0...v0.6.0) (2019-04-10)
### Features
* added error code to chunk load Error ([#347](https://github.com/webpack-contrib/extract-css-chunks-webpack-plugin/issues/347)) ([b653641](https://github.com/webpack-contrib/extract-css-chunks-webpack-plugin/commit/b653641))
* adding hot module reloading ([#334](https://github.com/webpack-contrib/extract-css-chunks-webpack-plugin/issues/334)) ([4ed9c5a](https://github.com/webpack-contrib/extract-css-chunks-webpack-plugin/commit/4ed9c5a))
* publicPath can be a function ([#373](https://github.com/webpack-contrib/extract-css-chunks-webpack-plugin/issues/373)) ([7b1425a](https://github.com/webpack-contrib/extract-css-chunks-webpack-plugin/commit/7b1425a))
<a name="0.5.0"></a>
# [0.5.0](https://github.com/webpack-contrib/extract-css-chunks-webpack-plugin/compare/v0.4.5...v0.5.0) (2018-12-07)
### Features
* add crossOriginLoading option support ([#313](https://github.com/webpack-contrib/extract-css-chunks-webpack-plugin/issues/313)) ([ffb0d87](https://github.com/webpack-contrib/extract-css-chunks-webpack-plugin/commit/ffb0d87))
<a name="0.4.5"></a>
## [0.4.5](https://github.com/webpack-contrib/extract-css-chunks-webpack-plugin/compare/v0.4.4...v0.4.5) (2018-11-21)
### Bug Fixes
* **index:** allow requesting failed async css files ([#292](https://github.com/webpack-contrib/extract-css-chunks-webpack-plugin/issues/292)) ([2eb0af5](https://github.com/webpack-contrib/extract-css-chunks-webpack-plugin/commit/2eb0af5))
<a name="0.4.4"></a>
## [0.4.4](https://github.com/webpack-contrib/extract-css-chunks-webpack-plugin/compare/v0.4.3...v0.4.4) (2018-10-10)
### Bug Fixes
* **index:** assign empty `module.id` to prevent `contenthash` from changing unnecessarily ([#284](https://github.com/webpack-contrib/extract-css-chunks-webpack-plugin/issues/284)) ([d7946d0](https://github.com/webpack-contrib/extract-css-chunks-webpack-plugin/commit/d7946d0))
<a name="0.4.3"></a>
## [0.4.3](https://github.com/webpack-contrib/extract-css-chunks-webpack-plugin/compare/v0.4.2...v0.4.3) (2018-09-18)
### Bug Fixes
* **loader:** pass `emitFile` to the child compilation (`loaderContext.emitFile`) ([#177](https://github.com/webpack-contrib/extract-css-chunks-webpack-plugin/issues/177)) ([18c066e](https://github.com/webpack-contrib/extract-css-chunks-webpack-plugin/commit/18c066e))
<a name="0.4.2"></a>
## [0.4.2](https://github.com/webpack-contrib/extract-css-chunks-webpack-plugin/compare/v0.4.0...v0.4.2) (2018-08-21)
### Bug Fixes
* use correct order when multiple chunk groups are merged ([#246](https://github.com/webpack-contrib/extract-css-chunks-webpack-plugin/issues/246)) ([c3b363d](https://github.com/webpack-contrib/extract-css-chunks-webpack-plugin/commit/c3b363d))
<a name="0.4.1"></a>
## [0.4.1](https://github.com/webpack-contrib/extract-css-chunks-webpack-plugin/compare/v0.4.0...v0.4.1) (2018-06-29)
### Bug Fixes
* CSS ordering with multiple entry points ([#130](https://github.com/webpack-contrib/extract-css-chunks-webpack-plugin/issues/130)) ([79373eb](https://github.com/webpack-contrib/extract-css-chunks-webpack-plugin/commit/79373eb))
# 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.
x.x.x / <year>-<month>-<day>
==================
* Bug fix -
* Feature -
* Chore -
* Docs -
+21
View File
@@ -0,0 +1,21 @@
Copyright JS Foundation and other contributors
Copyright Zack Jackson
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.
+619
View File
@@ -0,0 +1,619 @@
If you like our work, check out our Redux-based router <a href="https://github.com/faceyspacey/redux-first-router" target="_blank">redux-first-router</a> or its sucessor which, <a href="https://github.com/respond-framework/rudy" target="_blank">Rudy<a>
# extract-css-chunks-webpack-plugin
<p align="center">
<a href="https://www.npmjs.com/package/extract-css-chunks-webpack-plugin">
<img src="https://img.shields.io/npm/v/extract-css-chunks-webpack-plugin.svg" alt="Version" />
</a>
<img src="https://ssl.google-analytics.com/collect?v=1&t=event&ec=email&ea=open&t=event&tid=UA-120967034-1&z=1589684734&cid=9befe819-70e1-278b-50fc-859e6d1970cb&dt=ExtractCssChunks&dp=/email/ExtractCssChunks">
<a href="https://travis-ci.org/faceyspacey/extract-css-chunks-webpack-plugin">
<img src="https://travis-ci.org/faceyspacey/extract-css-chunks-webpack-plugin.svg?branch=master" alt="Build Status" />
</a>
<a href="https://www.npmjs.com/package/extract-css-chunks-webpack-plugin">
<img src="https://img.shields.io/npm/dt/extract-css-chunks-webpack-plugin.svg" alt="Downloads" />
</a>
<a href="https://www.npmjs.com/package/extract-css-chunks-webpack-plugin">
<img src="https://img.shields.io/npm/dm/extract-css-chunks-webpack-plugin.svg" alt="License" />
</a>
<a href="https://www.npmjs.com/package/extract-css-chunks-webpack-plugin">
<img src="https://img.shields.io/npm/l/extract-css-chunks-webpack-plugin.svg" alt="License" />
</a>
</p>
<h2 align="center">🍾🍾🍾It's our absolute pleasure to announce Webpack 4 Support 🚀🚀🚀</h2>
> **HEADLINES (May 2018): Now Independently supports Webpack 4:**
> Yep that's right. The universal family is now fully Webpack 4. Thank you to all our users for your loyalty and patience! If you love Universal, then you are gonna fall head over heels when we bring out the main course!
So... why did we rebuild `extract-css-chunks-webpack-plugin`? What does it offer?
It's got all the goodness of `mini-css-extract-plugin` but with 2 gleaming, sought after benefits.
Compared to the existing loaders, we are offering a single solution as opposed to needing to depend on multiple loaders to cater for different features:
## Perks
- **HMR:** It also has first-class support for **Hot Module Replacement** across ALL those css files/chunks!!!
- cacheable stylesheets
- smallest total bytes sent compared to "render-path" css-in-js solutions that include your CSS definitions in JS
- Faster than the V2!
- Async loading
- No duplicate compilation (performance)
- Easier to use
- Specific to CSS
- SSR Friendly development build, focused on frontend DX
- Works seamlessly with the Universal family
- Works fantastically as a standalone style loader (You can use it for any webpack project! with no extra dependencies!)
- Async styles do not render block webkit browsers, if you use the `insert` option
Additionally, if you are already a user of the universal family -- we will be waving goodbye to the mandatory `window.__CSS_CHUNKS__`.
The functionality is still available to you via chunk flushing, and it can come in super handy when needing to easily resolve style assets as urls that might need to be passed to a third party.
**webpack.config.js**
```js
const ExtractCssChunks = require('extract-css-chunks-webpack-plugin');
module.exports = {
plugins: [new ExtractCssChunks()],
module: {
rules: [
{
test: /\.css$/i,
use: [ExtractCssChunks.loader, 'css-loader'],
},
],
},
};
```
## Options
### `publicPath`
Type: `String|Function`
Default: the `publicPath` in `webpackOptions.output`
Specifies a custom public path for the target file(s).
#### `String`
**webpack.config.js**
```js
const ExtractCssChunks = require('extract-css-chunks-webpack-plugin');
module.exports = {
plugins: [
new ExtractCssChunks({
// Options similar to the same options in webpackOptions.output
// both options are optional
filename: '[name].css',
chunkFilename: '[id].css',
}),
],
module: {
rules: [
{
test: /\.css$/,
use: [
{
loader: ExtractCssChunks.loader,
options: {
publicPath: '/public/path/to/',
},
},
'css-loader',
],
},
],
},
};
```
#### `Function`
**webpack.config.js**
```js
const ExtractCssChunks = require('extract-css-chunks-webpack-plugin');
module.exports = {
plugins: [
new ExtractCssChunks({
// Options similar to the same options in webpackOptions.output
// both options are optional
filename: '[name].css',
chunkFilename: '[id].css',
}),
],
module: {
rules: [
{
test: /\.css$/,
use: [
{
loader: ExtractCssChunks.loader,
options: {
publicPath: (resourcePath, context) => {
return path.relative(path.dirname(resourcePath), context) + '/';
},
},
},
'css-loader',
],
},
],
},
};
```
### `esModule`
Type: `Boolean`
Default: `false`
By default, `extract-css-chunks-webpack-plugin` generates JS modules that use the CommonJS modules syntax.
There are some cases in which using ES modules is beneficial, like in the case of [module concatenation](https://webpack.js.org/plugins/module-concatenation-plugin/) and [tree shaking](https://webpack.js.org/guides/tree-shaking/).
You can enable a ES module syntax using:
**webpack.config.js**
```js
const ExtractCssChunks = require('extract-css-chunks-webpack-plugin');
module.exports = {
plugins: [new ExtractCssChunks()],
module: {
rules: [
{
test: /\.css$/i,
use: [
{
loader: ExtractCssChunks.loader,
options: {
esModule: true,
},
},
'css-loader',
],
},
],
},
};
```
## Examples
### Minimal example
**webpack.config.js**
```js
const ExtractCssChunks = require('extract-css-chunks-webpack-plugin');
module.exports = {
plugins: [
new ExtractCssChunks({
// Options similar to the same options in webpackOptions.output
// all options are optional
filename: '[name].css',
chunkFilename: '[id].css',
ignoreOrder: false, // Enable to remove warnings about conflicting order
}),
],
module: {
rules: [
{
test: /\.css$/,
use: [
{
loader: ExtractCssChunks.loader,
options: {
// you can specify a publicPath here
// by default it uses publicPath in webpackOptions.output
publicPath: '../',
hmr: process.env.NODE_ENV === 'development',
},
},
'css-loader',
],
},
],
},
};
```
### The `publicPath` option as function
**webpack.config.js**
```js
const ExtractCssChunks = require('extract-css-chunks-webpack-plugin');
module.exports = {
plugins: [
new ExtractCssChunks({
// Options similar to the same options in webpackOptions.output
// both options are optional
filename: '[name].css',
chunkFilename: '[id].css',
}),
],
module: {
rules: [
{
test: /\.css$/,
use: [
{
loader: ExtractCssChunks.loader,
options: {
publicPath: (resourcePath, context) => {
// publicPath is the relative path of the resource to the context
// e.g. for ./css/admin/main.css the publicPath will be ../../
// while for ./css/main.css the publicPath will be ../
return path.relative(path.dirname(resourcePath), context) + '/';
},
},
},
'css-loader',
],
},
],
},
};
```
### Advanced configuration example
This plugin should be used only on `production` builds without `style-loader` in the loaders chain, especially if you want to have HMR in `development`.
Here is an example to have both HMR in `development` and your styles extracted in a file for `production` builds.
(Loaders options left out for clarity, adapt accordingly to your needs.)
**webpack.config.js**
```js
const ExtractCssChunks = require('extract-css-chunks-webpack-plugin');
const devMode = process.env.NODE_ENV !== 'production';
module.exports = {
plugins: [
new ExtractCssChunks({
// Options similar to the same options in webpackOptions.output
// both options are optional
filename: devMode ? '[name].css' : '[name].[hash].css',
chunkFilename: devMode ? '[id].css' : '[id].[hash].css',
}),
],
module: {
rules: [
{
test: /\.(sa|sc|c)ss$/,
use: [
{
loader: ExtractCssChunks.loader,
options: {
hmr: process.env.NODE_ENV === 'development',
},
},
'css-loader',
'postcss-loader',
'sass-loader',
],
},
],
},
};
```
### Hot Module Reloading (HMR)
The `extract-css-chunks-webpack-plugin` supports hot reloading of actual css files in development.
Some options are provided to enable HMR of both standard stylesheets and locally scoped CSS or CSS modules.
Below is an example configuration of `extract-css-chunks` for HMR use with CSS modules.
While we attempt to hmr css-modules. It is not easy to perform when code-splitting with custom chunk names.
`reloadAll` is an option that should only be enabled if HMR isn't working correctly.
The core challenge with css-modules is that when code-split, the chunk ids can and do end up different compared to the filename.
**webpack.config.js**
```js
const ExtractCssChunks = require('extract-css-chunks-webpack-plugin');
module.exports = {
plugins: [
new ExtractCssChunks({
// Options similar to the same options in webpackOptions.output
// both options are optional
filename: '[name].css',
chunkFilename: '[id].css',
}),
],
module: {
rules: [
{
test: /\.css$/,
use: [
{
loader: ExtractCssChunks.loader,
options: {
// only enable hot in development
hmr: process.env.NODE_ENV === 'development',
// if hmr does not work, this is a forceful method.
reloadAll: true,
},
},
'css-loader',
],
},
],
},
};
```
### Minimizing For Production
To minify the output, use a plugin like [optimize-css-assets-webpack-plugin](https://github.com/NMFR/optimize-css-assets-webpack-plugin).
Setting `optimization.minimizer` overrides the defaults provided by webpack, so make sure to also specify a JS minimizer:
**webpack.config.js**
```js
const TerserJSPlugin = require('terser-webpack-plugin');
const ExtractCssChunks = require('extract-css-chunks-webpack-plugin');
const OptimizeCSSAssetsPlugin = require('optimize-css-assets-webpack-plugin');
module.exports = {
optimization: {
minimizer: [new TerserJSPlugin({}), new OptimizeCSSAssetsPlugin({})],
},
plugins: [
new ExtractCssChunks({
filename: '[name].css',
chunkFilename: '[id].css',
}),
],
module: {
rules: [
{
test: /\.css$/,
use: [ExtractCssChunks.loader, 'css-loader'],
},
],
},
};
```
### Using preloaded or inlined CSS
The runtime code detects already added CSS via `<link>` or `<style>` tag.
This can be useful when injecting CSS on server-side for Server-Side-Rendering.
The `href` of the `<link>` tag has to match the URL that will be used for loading the CSS chunk.
The `data-href` attribute can be used for `<link>` and `<style>` too.
When inlining CSS `data-href` must be used.
### Extracting all CSS in a single file
Similar to what [extract-text-webpack-plugin](https://github.com/webpack-contrib/extract-text-webpack-plugin) does, the CSS can be extracted in one CSS file using `optimization.splitChunks.cacheGroups`.
**webpack.config.js**
```js
const ExtractCssChunks = require('extract-css-chunks-webpack-plugin');
module.exports = {
optimization: {
splitChunks: {
cacheGroups: {
styles: {
name: 'styles',
test: /\.css$/,
chunks: 'all',
enforce: true,
},
},
},
},
plugins: [
new ExtractCssChunks({
filename: '[name].css',
}),
],
module: {
rules: [
{
test: /\.css$/,
use: [ExtractCssChunks.loader, 'css-loader'],
},
],
},
};
```
### Extracting CSS based on entry
You may also extract the CSS based on the webpack entry name.
This is especially useful if you import routes dynamically but want to keep your CSS bundled according to entry.
This also prevents the CSS duplication issue one had with the ExtractTextPlugin.
```js
const path = require('path');
const ExtractCssChunks = require('extract-css-chunks-webpack-plugin');
function recursiveIssuer(m) {
if (m.issuer) {
return recursiveIssuer(m.issuer);
} else if (m.name) {
return m.name;
} else {
return false;
}
}
module.exports = {
entry: {
foo: path.resolve(__dirname, 'src/foo'),
bar: path.resolve(__dirname, 'src/bar'),
},
optimization: {
splitChunks: {
cacheGroups: {
fooStyles: {
name: 'foo',
test: (m, c, entry = 'foo') =>
m.constructor.name === 'CssModule' && recursiveIssuer(m) === entry,
chunks: 'all',
enforce: true,
},
barStyles: {
name: 'bar',
test: (m, c, entry = 'bar') =>
m.constructor.name === 'CssModule' && recursiveIssuer(m) === entry,
chunks: 'all',
enforce: true,
},
},
},
},
plugins: [
new ExtractCssChunks({
filename: '[name].css',
}),
],
module: {
rules: [
{
test: /\.css$/,
use: [ExtractCssChunks.loader, 'css-loader'],
},
],
},
};
```
### Module Filename Option
With the `moduleFilename` option you can use chunk data to customize the filename. This is particularly useful when dealing with multiple entry points and wanting to get more control out of the filename for a given entry point/chunk. In the example below, we'll use `moduleFilename` to output the generated css into a different directory.
**webpack.config.js**
```js
const ExtractCssChunks = require('extract-css-chunks-webpack-plugin');
module.exports = {
plugins: [
new ExtractCssChunks({
moduleFilename: ({ name }) => `${name.replace('/js/', '/css/')}.css`,
}),
],
module: {
rules: [
{
test: /\.css$/,
use: [ExtractCssChunks.loader, 'css-loader'],
},
],
},
};
```
### Long Term Caching
For long term caching use `filename: "[contenthash].css"`. Optionally add `[name]`.
**webpack.config.js**
```js
const ExtractCssChunks = require('extract-css-chunks-webpack-plugin');
module.exports = {
plugins: [
new ExtractCssChunks({
filename: '[name].[contenthash].css',
chunkFilename: '[id].[contenthash].css',
}),
],
module: {
rules: [
{
test: /\.css$/,
use: [ExtractCssChunks.loader, 'css-loader'],
},
],
},
};
```
### Remove Order Warnings
For projects where css ordering has been mitigated through consistent use of scoping or naming conventions, the css order warnings can be disabled by setting the ignoreOrder flag to true for the plugin.
**webpack.config.js**
```js
const ExtractCssChunks = require('extract-css-chunks-webpack-plugin');
module.exports = {
plugins: [
new ExtractCssChunks({
ignoreOrder: true,
}),
],
module: {
rules: [
{
test: /\.css$/i,
use: [ExtractCssChunks.loader, 'css-loader'],
},
],
},
};
```
### insert
Type: `Function`
Default: `head`
By default, the `extract-css-chunks-plugin` appends styles (`<link>` elements) to `document.head` of the current `window`.
However in some circumstances it might be necessary to have finer control over the append target or even delay `link` elements instertion. For example this is the case when you asynchronously load styles for an application that runs inside of an iframe. In such cases `insert` can be configured to be a function or a custom selector.
If you target an [iframe](https://developer.mozilla.org/en-US/docs/Web/API/HTMLIFrameElement) make sure that the parent document has sufficient access rights to reach into the frame document and append elements to it.
#### `insert` as a function
Allows to override default behavior and insert styles at any position.
> ⚠ Do not forget that this code will run in the browser alongside your application. Since not all browsers support latest ECMA features like `let`, `const`, `arrow function expression` and etc we recommend you to use only ECMA 5 features and syntax.
> ⚠ The `insert` function is serialized to string and passed to the plugin. This means that it won't have access to the scope of the webpack configuration module.
```js
new ExtractCssChunksPlugin({
insert: function insert(linkTag) {
const reference = document.querySelector('#some-element');
if (reference) {
reference.parentNode.insertBefore(linkTag, reference);
}
},
});
```
A new `<link>` element will be inserted before the element with id `some-element`.
### Media Query Plugin
If you'd like to extract the media queries from the extracted CSS (so mobile users don't need to load desktop or tablet specific CSS anymore) you should use one of the following plugins:
- [Media Query Plugin](https://github.com/SassNinja/media-query-plugin)
- [Media Query Splitting Plugin](https://github.com/mike-diamond/media-query-splitting-plugin)
+34
View File
@@ -0,0 +1,34 @@
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.default = void 0;
var _webpack = _interopRequireDefault(require("webpack"));
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
class CssDependency extends _webpack.default.Dependency {
constructor({
identifier,
content,
media,
sourceMap
}, context, identifierIndex) {
super();
this.identifier = identifier;
this.identifierIndex = identifierIndex;
this.content = content;
this.media = media;
this.sourceMap = sourceMap;
this.context = context;
}
getResourceIdentifier() {
return `css-module-${this.identifier}-${this.identifierIndex}`;
}
}
exports.default = CssDependency;
+3
View File
@@ -0,0 +1,3 @@
"use strict";
module.exports = require('./index').default;
@@ -0,0 +1,211 @@
"use strict";
/* eslint-env browser */
/*
eslint-disable
no-console,
func-names
*/
var normalizeUrl = require('normalize-url');
var srcByModuleId = Object.create(null);
var noDocument = typeof document === 'undefined';
var forEach = Array.prototype.forEach;
function debounce(fn, time) {
var timeout = 0;
return function () {
var self = this; // eslint-disable-next-line prefer-rest-params
var args = arguments;
var functionCall = function functionCall() {
return fn.apply(self, args);
};
clearTimeout(timeout);
timeout = setTimeout(functionCall, time);
};
}
function noop() {}
function getCurrentScriptUrl(moduleId) {
var src = srcByModuleId[moduleId];
if (!src) {
if (document.currentScript) {
src = document.currentScript.src;
} else {
var scripts = document.getElementsByTagName('script');
var lastScriptTag = scripts[scripts.length - 1];
if (lastScriptTag) {
src = lastScriptTag.src;
}
}
srcByModuleId[moduleId] = src;
}
return function (fileMap) {
if (!src) {
return null;
}
var splitResult = src.split(/([^\\/]+)\.js$/);
var filename = splitResult && splitResult[1];
if (!filename) {
return [src.replace('.js', '.css')];
}
if (!fileMap) {
return [src.replace('.js', '.css')];
}
return fileMap.split(',').map(function (mapRule) {
var reg = new RegExp("".concat(filename, "\\.js$"), 'g');
return normalizeUrl(src.replace(reg, "".concat(mapRule.replace(/{fileName}/g, filename), ".css")), {
stripWWW: false
});
});
};
}
function updateCss(el, url) {
if (!url) {
if (!el.href) {
return;
} // eslint-disable-next-line
url = el.href.split('?')[0];
}
if (!isUrlRequest(url)) {
return;
}
if (el.isLoaded === false) {
// We seem to be about to replace a css link that hasn't loaded yet.
// We're probably changing the same file more than once.
return;
}
if (!url || !(url.indexOf('.css') > -1)) {
return;
} // eslint-disable-next-line no-param-reassign
el.visited = true;
var newEl = el.cloneNode();
newEl.isLoaded = false;
newEl.addEventListener('load', function () {
newEl.isLoaded = true;
el.parentNode.removeChild(el);
});
newEl.addEventListener('error', function () {
newEl.isLoaded = true;
el.parentNode.removeChild(el);
});
newEl.href = "".concat(url, "?").concat(Date.now());
if (el.nextSibling) {
el.parentNode.insertBefore(newEl, el.nextSibling);
} else {
el.parentNode.appendChild(newEl);
}
}
function getReloadUrl(href, src) {
var ret; // eslint-disable-next-line no-param-reassign
href = normalizeUrl(href, {
stripWWW: false
}); // eslint-disable-next-line array-callback-return
src.some(function (url) {
if (href.indexOf(src) > -1) {
ret = url;
}
});
return ret;
}
function reloadStyle(src) {
var elements = document.querySelectorAll('link');
var loaded = false;
forEach.call(elements, function (el) {
if (!el.href) {
return;
}
var url = getReloadUrl(el.href, src);
if (!isUrlRequest(url)) {
return;
}
if (el.visited === true) {
return;
}
if (url) {
updateCss(el, url);
loaded = true;
}
});
return loaded;
}
function reloadAll() {
var elements = document.querySelectorAll('link');
forEach.call(elements, function (el) {
if (el.visited === true) {
return;
}
updateCss(el);
});
}
function isUrlRequest(url) {
// An URL is not an request if
// It is not http or https
if (!/^https?:/i.test(url)) {
return false;
}
return true;
}
module.exports = function (moduleId, options) {
if (noDocument) {
console.log('no window.document found, will not HMR CSS');
return noop;
}
var getScriptSrc = getCurrentScriptUrl(moduleId);
function update() {
var src = getScriptSrc(options.filename);
var reloaded = reloadStyle(src);
if (options.locals) {
console.log('[HMR] Detected local css modules. Reload all css');
reloadAll();
return;
}
if (reloaded && !options.reloadAll) {
console.log('[HMR] css reload %s', src.join(' '));
} else {
console.log('[HMR] Reload all css');
reloadAll();
}
}
return debounce(update, 50);
};
+457
View File
@@ -0,0 +1,457 @@
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.default = void 0;
var _webpack = _interopRequireDefault(require("webpack"));
var _webpackSources = _interopRequireDefault(require("webpack-sources"));
var _schemaUtils = _interopRequireDefault(require("schema-utils"));
var _CssDependency = _interopRequireDefault(require("./CssDependency"));
var _pluginOptions = _interopRequireDefault(require("./plugin-options.json"));
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
/* eslint-disable class-methods-use-this */
const {
ConcatSource,
SourceMapSource,
OriginalSource
} = _webpackSources.default;
const {
Template,
util: {
createHash
}
} = _webpack.default;
const MODULE_TYPE = 'css/extract-css-chunks';
const pluginName = 'extract-css-chunks-webpack-plugin';
const REGEXP_CHUNKHASH = /\[chunkhash(?::(\d+))?\]/i;
const REGEXP_CONTENTHASH = /\[contenthash(?::(\d+))?\]/i;
const REGEXP_NAME = /\[name\]/i;
const REGEXP_PLACEHOLDERS = /\[(name|id|chunkhash)\]/g;
const DEFAULT_FILENAME = '[name].css';
class CssDependencyTemplate {
apply() {}
}
class CssModule extends _webpack.default.Module {
constructor(dependency) {
super(MODULE_TYPE, dependency.context);
this.id = '';
this._identifier = dependency.identifier;
this._identifierIndex = dependency.identifierIndex;
this.content = dependency.content;
this.media = dependency.media;
this.sourceMap = dependency.sourceMap;
} // no source() so webpack doesn't do add stuff to the bundle
size() {
return this.content.length;
}
identifier() {
return `css ${this._identifier} ${this._identifierIndex}`;
}
readableIdentifier(requestShortener) {
return `css ${requestShortener.shorten(this._identifier)}${this._identifierIndex ? ` (${this._identifierIndex})` : ''}`;
}
nameForCondition() {
const resource = this._identifier.split('!').pop();
const idx = resource.indexOf('?');
if (idx >= 0) {
return resource.substring(0, idx);
}
return resource;
}
updateCacheModule(module) {
this.content = module.content;
this.media = module.media;
this.sourceMap = module.sourceMap;
}
needRebuild() {
return true;
}
build(options, compilation, resolver, fileSystem, callback) {
this.buildInfo = {};
this.buildMeta = {};
callback();
}
updateHash(hash) {
super.updateHash(hash);
hash.update(this.content);
hash.update(this.media || '');
hash.update(this.sourceMap ? JSON.stringify(this.sourceMap) : '');
}
}
class CssModuleFactory {
create({
dependencies: [dependency]
}, callback) {
callback(null, new CssModule(dependency));
}
}
class ExtractCssChunksPlugin {
constructor(options = {}) {
(0, _schemaUtils.default)(_pluginOptions.default, options, 'Mini CSS Extract Plugin');
const insert = options.insert ? options.insert.toString() : null;
this.options = Object.assign({
filename: DEFAULT_FILENAME,
moduleFilename: () => this.options.filename || DEFAULT_FILENAME,
ignoreOrder: false
}, options, {
insert
});
if (!this.options.chunkFilename) {
const {
filename
} = this.options; // Anything changing depending on chunk is fine
if (filename.match(REGEXP_PLACEHOLDERS)) {
this.options.chunkFilename = filename;
} else {
// Elsewise prefix '[id].' in front of the basename to make it changing
this.options.chunkFilename = filename.replace(/(^|\/)([^/]*(?:\?|$))/, '$1[id].$2');
}
}
}
apply(compiler) {
compiler.hooks.thisCompilation.tap(pluginName, compilation => {
compilation.dependencyFactories.set(_CssDependency.default, new CssModuleFactory());
compilation.dependencyTemplates.set(_CssDependency.default, new CssDependencyTemplate());
compilation.mainTemplate.hooks.renderManifest.tap(pluginName, (result, {
chunk
}) => {
const renderedModules = Array.from(chunk.modulesIterable).filter(module => module.type === MODULE_TYPE);
if (renderedModules.length > 0) {
result.push({
render: () => this.renderContentAsset(compilation, chunk, renderedModules, compilation.runtimeTemplate.requestShortener),
filenameTemplate: ({
chunk: chunkData
}) => this.options.moduleFilename(chunkData),
pathOptions: {
chunk,
contentHashType: MODULE_TYPE
},
identifier: `${pluginName}.${chunk.id}`,
hash: chunk.contentHash[MODULE_TYPE]
});
}
});
compilation.chunkTemplate.hooks.renderManifest.tap(pluginName, (result, {
chunk
}) => {
const renderedModules = Array.from(chunk.modulesIterable).filter(module => module.type === MODULE_TYPE);
if (renderedModules.length > 0) {
result.push({
render: () => this.renderContentAsset(compilation, chunk, renderedModules, compilation.runtimeTemplate.requestShortener),
filenameTemplate: this.options.chunkFilename,
pathOptions: {
chunk,
contentHashType: MODULE_TYPE
},
identifier: `${pluginName}.${chunk.id}`,
hash: chunk.contentHash[MODULE_TYPE]
});
}
});
compilation.mainTemplate.hooks.hashForChunk.tap(pluginName, (hash, chunk) => {
const {
chunkFilename
} = this.options;
if (REGEXP_CHUNKHASH.test(chunkFilename)) {
hash.update(JSON.stringify(chunk.getChunkMaps(true).hash));
}
if (REGEXP_CONTENTHASH.test(chunkFilename)) {
hash.update(JSON.stringify(chunk.getChunkMaps(true).contentHash[MODULE_TYPE] || {}));
}
if (REGEXP_NAME.test(chunkFilename)) {
hash.update(JSON.stringify(chunk.getChunkMaps(true).name));
}
});
compilation.hooks.contentHash.tap(pluginName, chunk => {
const {
outputOptions
} = compilation;
const {
hashFunction,
hashDigest,
hashDigestLength
} = outputOptions;
const hash = createHash(hashFunction);
for (const m of chunk.modulesIterable) {
if (m.type === MODULE_TYPE) {
m.updateHash(hash);
}
}
const {
contentHash
} = chunk;
contentHash[MODULE_TYPE] = hash.digest(hashDigest).substring(0, hashDigestLength);
});
const {
mainTemplate
} = compilation;
mainTemplate.hooks.localVars.tap(pluginName, (source, chunk) => {
const chunkMap = this.getCssChunkObject(chunk);
if (Object.keys(chunkMap).length > 0) {
return Template.asString([source, '', '// object to store loaded CSS chunks', 'var installedCssChunks = {', Template.indent(chunk.ids.map(id => `${JSON.stringify(id)}: 0`).join(',\n')), '}']);
}
return source;
});
mainTemplate.hooks.requireEnsure.tap(pluginName, (source, chunk, hash) => {
const chunkMap = this.getCssChunkObject(chunk);
if (Object.keys(chunkMap).length > 0) {
const chunkMaps = chunk.getChunkMaps();
const {
crossOriginLoading
} = mainTemplate.outputOptions;
const linkHrefPath = mainTemplate.getAssetPath(JSON.stringify(this.options.chunkFilename), {
hash: `" + ${mainTemplate.renderCurrentHashCode(hash)} + "`,
hashWithLength: length => `" + ${mainTemplate.renderCurrentHashCode(hash, length)} + "`,
chunk: {
id: '" + chunkId + "',
hash: `" + ${JSON.stringify(chunkMaps.hash)}[chunkId] + "`,
hashWithLength(length) {
const shortChunkHashMap = Object.create(null);
for (const chunkId of Object.keys(chunkMaps.hash)) {
if (typeof chunkMaps.hash[chunkId] === 'string') {
shortChunkHashMap[chunkId] = chunkMaps.hash[chunkId].substring(0, length);
}
}
return `" + ${JSON.stringify(shortChunkHashMap)}[chunkId] + "`;
},
contentHash: {
[MODULE_TYPE]: `" + ${JSON.stringify(chunkMaps.contentHash[MODULE_TYPE])}[chunkId] + "`
},
contentHashWithLength: {
[MODULE_TYPE]: length => {
const shortContentHashMap = {};
const contentHash = chunkMaps.contentHash[MODULE_TYPE];
for (const chunkId of Object.keys(contentHash)) {
if (typeof contentHash[chunkId] === 'string') {
shortContentHashMap[chunkId] = contentHash[chunkId].substring(0, length);
}
}
return `" + ${JSON.stringify(shortContentHashMap)}[chunkId] + "`;
}
},
name: `" + (${JSON.stringify(chunkMaps.name)}[chunkId]||chunkId) + "`
},
contentHashType: MODULE_TYPE
});
const {
insert
} = this.options;
const supportsPreload = '(function() { try { return document.createElement("link").relList.supports("preload"); } catch(e) { return false; }}());';
return Template.asString([source, '', `// ${pluginName} CSS loading`, `var supportsPreload = ${supportsPreload}`, `var cssChunks = ${JSON.stringify(chunkMap)};`, 'if(installedCssChunks[chunkId]) promises.push(installedCssChunks[chunkId]);', 'else if(installedCssChunks[chunkId] !== 0 && cssChunks[chunkId]) {', Template.indent(['promises.push(installedCssChunks[chunkId] = new Promise(function(resolve, reject) {', Template.indent([`var href = ${linkHrefPath};`, `var fullhref = ${mainTemplate.requireFn}.p + href;`, 'var existingLinkTags = document.getElementsByTagName("link");', 'for(var i = 0; i < existingLinkTags.length; i++) {', Template.indent(['var tag = existingLinkTags[i];', 'var dataHref = tag.getAttribute("data-href") || tag.getAttribute("href");', 'if((tag.rel === "stylesheet" || tag.rel === "preload") && (dataHref === href || dataHref === fullhref)) return resolve();']), '}', 'var existingStyleTags = document.getElementsByTagName("style");', 'for(var i = 0; i < existingStyleTags.length; i++) {', Template.indent(['var tag = existingStyleTags[i];', 'var dataHref = tag.getAttribute("data-href");', 'if(dataHref === href || dataHref === fullhref) return resolve();']), '}', 'var linkTag = document.createElement("link");', 'linkTag.rel = supportsPreload ? "preload": "stylesheet";', 'supportsPreload ? linkTag.as = "style" : linkTag.type = "text/css";', 'linkTag.onload = resolve;', 'linkTag.onerror = function(event) {', Template.indent(['var request = event && event.target && event.target.src || fullhref;', 'var err = new Error("Loading CSS chunk " + chunkId + " failed.\\n(" + request + ")");', 'err.code = "CSS_CHUNK_LOAD_FAILED";', 'err.request = request;', 'delete installedCssChunks[chunkId]', 'linkTag.parentNode.removeChild(linkTag)', 'reject(err);']), '};', 'linkTag.href = fullhref;', crossOriginLoading ? Template.asString([`if (linkTag.href.indexOf(window.location.origin + '/') !== 0) {`, Template.indent(`linkTag.crossOrigin = ${JSON.stringify(crossOriginLoading)};`), '}']) : '', insert ? `var insert = ${insert};\ninsert(linkTag);` : 'var head = document.getElementsByTagName("head")[0]; head.appendChild(linkTag)']), '}).then(function() {', Template.indent(['installedCssChunks[chunkId] = 0;', 'if(supportsPreload) {', Template.indent(['var execLinkTag = document.createElement("link");', `execLinkTag.href = ${mainTemplate.requireFn}.p + ${linkHrefPath};`, 'execLinkTag.rel = "stylesheet";', 'execLinkTag.type = "text/css";', 'document.body.appendChild(execLinkTag);']), '}']), '}));']), '}']);
}
return source;
});
});
}
getCssChunkObject(mainChunk) {
const obj = {};
for (const chunk of mainChunk.getAllAsyncChunks()) {
for (const module of chunk.modulesIterable) {
if (module.type === MODULE_TYPE) {
obj[chunk.id] = 1;
break;
}
}
}
return obj;
}
renderContentAsset(compilation, chunk, modules, requestShortener) {
let usedModules;
const [chunkGroup] = chunk.groupsIterable;
if (typeof chunkGroup.getModuleIndex2 === 'function') {
// Store dependencies for modules
const moduleDependencies = new Map(modules.map(m => [m, new Set()]));
const moduleDependenciesReasons = new Map(modules.map(m => [m, new Map()])); // Get ordered list of modules per chunk group
// This loop also gathers dependencies from the ordered lists
// Lists are in reverse order to allow to use Array.pop()
const modulesByChunkGroup = Array.from(chunk.groupsIterable, cg => {
const sortedModules = modules.map(m => {
return {
module: m,
index: cg.getModuleIndex2(m)
};
}) // eslint-disable-next-line no-undefined
.filter(item => item.index !== undefined).sort((a, b) => b.index - a.index).map(item => item.module);
for (let i = 0; i < sortedModules.length; i++) {
const set = moduleDependencies.get(sortedModules[i]);
const reasons = moduleDependenciesReasons.get(sortedModules[i]);
for (let j = i + 1; j < sortedModules.length; j++) {
const module = sortedModules[j];
set.add(module);
const reason = reasons.get(module) || new Set();
reason.add(cg);
reasons.set(module, reason);
}
}
return sortedModules;
}); // set with already included modules in correct order
usedModules = new Set();
const unusedModulesFilter = m => !usedModules.has(m);
while (usedModules.size < modules.length) {
let success = false;
let bestMatch;
let bestMatchDeps; // get first module where dependencies are fulfilled
for (const list of modulesByChunkGroup) {
// skip and remove already added modules
while (list.length > 0 && usedModules.has(list[list.length - 1])) {
list.pop();
} // skip empty lists
if (list.length !== 0) {
const module = list[list.length - 1];
const deps = moduleDependencies.get(module); // determine dependencies that are not yet included
const failedDeps = Array.from(deps).filter(unusedModulesFilter); // store best match for fallback behavior
if (!bestMatchDeps || bestMatchDeps.length > failedDeps.length) {
bestMatch = list;
bestMatchDeps = failedDeps;
}
if (failedDeps.length === 0) {
// use this module and remove it from list
usedModules.add(list.pop());
success = true;
break;
}
}
}
if (!success) {
// no module found => there is a conflict
// use list with fewest failed deps
// and emit a warning
if (!bestMatch) break;
const fallbackModule = bestMatch.pop();
if (!this.options.ignoreOrder) {
const reasons = moduleDependenciesReasons.get(fallbackModule);
compilation.warnings.push(new Error([`chunk ${chunk.name || chunk.id} [${pluginName}]`, 'Conflicting order. Following module has been added:', ` * ${fallbackModule.readableIdentifier(requestShortener)}`, 'despite it was not able to fulfill desired ordering with these modules:', ...bestMatchDeps.map(m => {
const goodReasonsMap = moduleDependenciesReasons.get(m);
const goodReasons = goodReasonsMap && goodReasonsMap.get(fallbackModule);
const failedChunkGroups = Array.from(reasons.get(m), cg => cg.name).join(', ');
const goodChunkGroups = goodReasons && Array.from(goodReasons, cg => cg.name).join(', ');
return [` * ${m.readableIdentifier(requestShortener)}`, ` - couldn't fulfill desired order of chunk group(s) ${failedChunkGroups}`, goodChunkGroups && ` - while fulfilling desired order of chunk group(s) ${goodChunkGroups}`].filter(Boolean).join('\n');
})].join('\n')));
}
usedModules.add(fallbackModule);
}
}
} else {
// fallback for older webpack versions
// (to avoid a breaking change)
// TODO remove this in next major version
// and increase minimum webpack version to 4.12.0
modules.sort((a, b) => a.index2 - b.index2);
usedModules = modules;
}
const source = new ConcatSource();
const externalsSource = new ConcatSource();
for (const m of usedModules) {
if (/^@import url/.test(m.content)) {
// HACK for IE
// http://stackoverflow.com/a/14676665/1458162
let {
content
} = m;
if (m.media) {
// insert media into the @import
// this is rar
// TODO improve this and parse the CSS to support multiple medias
content = content.replace(/;|\s*$/, m.media);
}
externalsSource.add(content);
externalsSource.add('\n');
} else {
if (m.media) {
source.add(`@media ${m.media} {\n`);
}
if (m.sourceMap) {
source.add(new SourceMapSource(m.content, m.readableIdentifier(requestShortener), m.sourceMap));
} else {
source.add(new OriginalSource(m.content, m.readableIdentifier(requestShortener)));
}
source.add('\n');
if (m.media) {
source.add('}\n');
}
}
}
return new ConcatSource(externalsSource, source);
}
}
ExtractCssChunksPlugin.loader = require.resolve('./loader');
var _default = ExtractCssChunksPlugin;
exports.default = _default;
@@ -0,0 +1,25 @@
{
"type": "object",
"additionalProperties": true,
"properties": {
"publicPath": {
"anyOf": [
{
"type": "string"
},
{
"instanceof": "Function"
}
]
},
"esModule": {
"type": "boolean"
},
"hmr": {
"type": "boolean"
},
"reloadAll": {
"type": "boolean"
}
}
}
+203
View File
@@ -0,0 +1,203 @@
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.pitch = pitch;
exports.default = _default;
var _module = _interopRequireDefault(require("module"));
var _path = _interopRequireDefault(require("path"));
var _loaderUtils = _interopRequireDefault(require("loader-utils"));
var _NodeTemplatePlugin = _interopRequireDefault(require("webpack/lib/node/NodeTemplatePlugin"));
var _NodeTargetPlugin = _interopRequireDefault(require("webpack/lib/node/NodeTargetPlugin"));
var _LibraryTemplatePlugin = _interopRequireDefault(require("webpack/lib/LibraryTemplatePlugin"));
var _SingleEntryPlugin = _interopRequireDefault(require("webpack/lib/SingleEntryPlugin"));
var _LimitChunkCountPlugin = _interopRequireDefault(require("webpack/lib/optimize/LimitChunkCountPlugin"));
var _schemaUtils = _interopRequireDefault(require("schema-utils"));
var _CssDependency = _interopRequireDefault(require("./CssDependency"));
var _loaderOptions = _interopRequireDefault(require("./loader-options.json"));
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); keys.push.apply(keys, symbols); } return keys; }
function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
const pluginName = 'extract-css-chunks-webpack-plugin';
function hotLoader(content, context) {
const accept = context.locals ? '' : 'module.hot.accept(undefined, cssReload);';
return `${content}
if(module.hot) {
// ${Date.now()}
var cssReload = require(${_loaderUtils.default.stringifyRequest(context.context, _path.default.join(__dirname, 'hmr/hotModuleReplacement.js'))})(module.id, ${JSON.stringify(_objectSpread(_objectSpread({}, context.options), {}, {
locals: !!context.locals
}))});
module.hot.dispose(cssReload);
${accept}
}
`;
}
function evalModuleCode(loaderContext, code, filename) {
const module = new _module.default(filename, loaderContext);
module.paths = _module.default._nodeModulePaths(loaderContext.context); // eslint-disable-line no-underscore-dangle
module.filename = filename;
module._compile(code, filename); // eslint-disable-line no-underscore-dangle
return module.exports;
}
function findModuleById(modules, id) {
for (const module of modules) {
if (module.id === id) {
return module;
}
}
return null;
}
function pitch(request) {
const options = _loaderUtils.default.getOptions(this) || {};
(0, _schemaUtils.default)(_loaderOptions.default, options, 'Mini CSS Extract Plugin Loader');
const loaders = this.loaders.slice(this.loaderIndex + 1);
this.addDependency(this.resourcePath);
const childFilename = '*';
const publicPath = typeof options.publicPath === 'string' ? options.publicPath === '' || options.publicPath.endsWith('/') ? options.publicPath : `${options.publicPath}/` : typeof options.publicPath === 'function' ? options.publicPath(this.resourcePath, this.rootContext) : this._compilation.outputOptions.publicPath;
const outputOptions = {
filename: childFilename,
publicPath
};
const childCompiler = this._compilation.createChildCompiler(`${pluginName} ${request}`, outputOptions);
new _NodeTemplatePlugin.default(outputOptions).apply(childCompiler);
new _LibraryTemplatePlugin.default(null, 'commonjs2').apply(childCompiler);
new _NodeTargetPlugin.default().apply(childCompiler);
new _SingleEntryPlugin.default(this.context, `!!${request}`, pluginName).apply(childCompiler);
new _LimitChunkCountPlugin.default({
maxChunks: 1
}).apply(childCompiler);
childCompiler.hooks.thisCompilation.tap(`${pluginName} loader`, compilation => {
compilation.hooks.normalModuleLoader.tap(`${pluginName} loader`, (loaderContext, module) => {
// eslint-disable-next-line no-param-reassign
loaderContext.emitFile = this.emitFile;
if (module.request === request) {
// eslint-disable-next-line no-param-reassign
module.loaders = loaders.map(loader => {
return {
loader: loader.path,
options: loader.options,
ident: loader.ident
};
});
}
});
});
let source;
childCompiler.hooks.afterCompile.tap(pluginName, compilation => {
source = compilation.assets[childFilename] && compilation.assets[childFilename].source(); // Remove all chunk assets
compilation.chunks.forEach(chunk => {
chunk.files.forEach(file => {
delete compilation.assets[file]; // eslint-disable-line no-param-reassign
});
});
});
const callback = this.async();
childCompiler.runAsChild((err, entries, compilation) => {
const addDependencies = dependencies => {
if (!Array.isArray(dependencies) && dependencies != null) {
throw new Error(`Exported value was not extracted as an array: ${JSON.stringify(dependencies)}`);
}
const identifierCountMap = new Map();
for (const dependency of dependencies) {
const count = identifierCountMap.get(dependency.identifier) || 0;
this._module.addDependency(new _CssDependency.default(dependency, dependency.context, count));
identifierCountMap.set(dependency.identifier, count + 1);
}
};
if (err) {
return callback(err);
}
if (compilation.errors.length > 0) {
return callback(compilation.errors[0]);
}
compilation.fileDependencies.forEach(dep => {
this.addDependency(dep);
}, this);
compilation.contextDependencies.forEach(dep => {
this.addContextDependency(dep);
}, this);
if (!source) {
return callback(new Error("Didn't get a result from child compiler"));
}
let locals;
try {
let dependencies;
let exports = evalModuleCode(this, source, request); // eslint-disable-next-line no-underscore-dangle
exports = exports.__esModule ? exports.default : exports;
locals = exports && exports.locals;
if (!Array.isArray(exports)) {
dependencies = [[null, exports]];
} else {
dependencies = exports.map(([id, content, media, sourceMap]) => {
const module = findModuleById(compilation.modules, id);
return {
identifier: module.identifier(),
context: module.context,
content,
media,
sourceMap
};
});
}
addDependencies(dependencies);
} catch (e) {
return callback(e);
}
const esModule = typeof options.esModule !== 'undefined' ? options.esModule : false;
const result = locals ? `\n${esModule ? 'export default' : 'module.exports ='} ${JSON.stringify(locals)};` : '';
let resultSource = `// extracted by ${pluginName}`;
resultSource += options.hmr ? hotLoader(result, {
context: this.context,
options,
locals
}) : result;
return callback(null, resultSource);
});
}
function _default() {}
@@ -0,0 +1,29 @@
{
"type": "object",
"additionalProperties": true,
"properties": {
"filename": {
"type": "string"
},
"chunkFilename": {
"type": "string"
},
"moduleFilename": {
"instanceof": "Function"
},
"ignoreOrder": {
"type": "boolean"
},
"insert": {
"description": "Inserts `<link>` at the given position (https://github.com/faceyspacey/extract-css-chunks-webpack-pluginn#insert).",
"anyOf": [
{
"type": "string"
},
{
"instanceof": "Function"
}
]
}
}
}
+36
View File
@@ -0,0 +1,36 @@
declare module 'extract-css-chunks-webpack-plugin' {
import { ChunkData, Plugin } from 'webpack';
class ExtractCssChunksPlugin extends Plugin {
static loader: string;
constructor(options?: ExtractCssChunksPlugin.PluginOptions);
}
namespace ExtractCssChunksPlugin {
interface PluginOptions {
/**
* The filename of the entry chunk.
*/
filename?: string;
/**
* The filename of non-entry chunks.
*/
chunkFilename?: string;
/**
* Generates a file name (or template) based on chunk data.
*/
moduleFilename?: (chunk: ChunkData) => string;
/**
* Remove warnings about conflicting order.
*/
ignoreOrder?: boolean;
/**
* Inserts `<link>` at the given position (https://github.com/faceyspacey/extract-css-chunks-webpack-pluginn#insert).
*/
insert?: string | Function;
}
}
export = ExtractCssChunksPlugin;
}
@@ -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.
@@ -0,0 +1,275 @@
# loader-utils
## Methods
### `getOptions`
Recommended way to retrieve the options of a loader invocation:
```javascript
// inside your loader
const options = loaderUtils.getOptions(this);
```
1. If `this.query` is a string:
- Tries to parse the query string and returns a new object
- Throws if it's not a valid query string
2. If `this.query` is object-like, it just returns `this.query`
3. In any other case, it just returns `null`
**Please note:** The returned `options` object is *read-only*. It may be re-used across multiple invocations.
If you pass it on to another library, make sure to make a *deep copy* of it:
```javascript
const options = Object.assign(
{},
defaultOptions,
loaderUtils.getOptions(this) // it is safe to pass null to Object.assign()
);
// don't forget nested objects or arrays
options.obj = Object.assign({}, options.obj);
options.arr = options.arr.slice();
someLibrary(options);
```
[clone](https://www.npmjs.com/package/clone) is a good library to make a deep copy of the options.
#### Options as query strings
If the loader options have been passed as loader query string (`loader?some&params`), the string is parsed by using [`parseQuery`](#parsequery).
### `parseQuery`
Parses a passed string (e.g. `loaderContext.resourceQuery`) as a query string, and returns an object.
``` javascript
const params = loaderUtils.parseQuery(this.resourceQuery); // resource: `file?param1=foo`
if (params.param1 === "foo") {
// do something
}
```
The string is parsed like this:
``` text
-> Error
? -> {}
?flag -> { flag: true }
?+flag -> { flag: true }
?-flag -> { flag: false }
?xyz=test -> { xyz: "test" }
?xyz=1 -> { xyz: "1" } // numbers are NOT parsed
?xyz[]=a -> { xyz: ["a"] }
?flag1&flag2 -> { flag1: true, flag2: true }
?+flag1,-flag2 -> { flag1: true, flag2: false }
?xyz[]=a,xyz[]=b -> { xyz: ["a", "b"] }
?a%2C%26b=c%2C%26d -> { "a,&b": "c,&d" }
?{data:{a:1},isJSON5:true} -> { data: { a: 1 }, isJSON5: true }
```
### `stringifyRequest`
Turns a request into a string that can be used inside `require()` or `import` while avoiding absolute paths.
Use it instead of `JSON.stringify(...)` if you're generating code inside a loader.
**Why is this necessary?** Since webpack calculates the hash before module paths are translated into module ids, we must avoid absolute paths to ensure
consistent hashes across different compilations.
This function:
- resolves absolute requests into relative requests if the request and the module are on the same hard drive
- replaces `\` with `/` if the request and the module are on the same hard drive
- won't change the path at all if the request and the module are on different hard drives
- applies `JSON.stringify` to the result
```javascript
loaderUtils.stringifyRequest(this, "./test.js");
// "\"./test.js\""
loaderUtils.stringifyRequest(this, ".\\test.js");
// "\"./test.js\""
loaderUtils.stringifyRequest(this, "test");
// "\"test\""
loaderUtils.stringifyRequest(this, "test/lib/index.js");
// "\"test/lib/index.js\""
loaderUtils.stringifyRequest(this, "otherLoader?andConfig!test?someConfig");
// "\"otherLoader?andConfig!test?someConfig\""
loaderUtils.stringifyRequest(this, require.resolve("test"));
// "\"../node_modules/some-loader/lib/test.js\""
loaderUtils.stringifyRequest(this, "C:\\module\\test.js");
// "\"../../test.js\"" (on Windows, in case the module and the request are on the same drive)
loaderUtils.stringifyRequest(this, "C:\\module\\test.js");
// "\"C:\\module\\test.js\"" (on Windows, in case the module and the request are on different drives)
loaderUtils.stringifyRequest(this, "\\\\network-drive\\test.js");
// "\"\\\\network-drive\\\\test.js\"" (on Windows, in case the module and the request are on different drives)
```
### `urlToRequest`
Converts some resource URL to a webpack module request.
> i Before call `urlToRequest` you need call `isUrlRequest` to ensure it is requestable url
```javascript
const url = "path/to/module.js";
if (loaderUtils.isUrlRequest(url)) {
// Logic for requestable url
const request = loaderUtils.urlToRequest(url);
} else {
// Logic for not requestable url
}
```
Simple example:
```javascript
const url = "path/to/module.js";
const request = loaderUtils.urlToRequest(url); // "./path/to/module.js"
```
#### Module URLs
Any URL containing a `~` will be interpreted as a module request. Anything after the `~` will be considered the request path.
```javascript
const url = "~path/to/module.js";
const request = loaderUtils.urlToRequest(url); // "path/to/module.js"
```
#### Root-relative URLs
URLs that are root-relative (start with `/`) can be resolved relative to some arbitrary path by using the `root` parameter:
```javascript
const url = "/path/to/module.js";
const root = "./root";
const request = loaderUtils.urlToRequest(url, root); // "./root/path/to/module.js"
```
To convert a root-relative URL into a module URL, specify a `root` value that starts with `~`:
```javascript
const url = "/path/to/module.js";
const root = "~";
const request = loaderUtils.urlToRequest(url, root); // "path/to/module.js"
```
### `interpolateName`
Interpolates a filename template using multiple placeholders and/or a regular expression.
The template and regular expression are set as query params called `name` and `regExp` on the current loader's context.
```javascript
const interpolatedName = loaderUtils.interpolateName(loaderContext, name, options);
```
The following tokens are replaced in the `name` parameter:
* `[ext]` the extension of the resource
* `[name]` the basename of the resource
* `[path]` the path of the resource relative to the `context` query parameter or option.
* `[folder]` the folder the resource is in
* `[query]` the queryof the resource, i.e. `?foo=bar`
* `[emoji]` a random emoji representation of `options.content`
* `[emoji:<length>]` same as above, but with a customizable number of emojis
* `[contenthash]` the hash of `options.content` (Buffer) (by default it's the hex digest of the md4 hash)
* `[<hashType>:contenthash:<digestType>:<length>]` optionally one can configure
* other `hashType`s, i. e. `sha1`, `md4`, `md5`, `sha256`, `sha512`
* other `digestType`s, i. e. `hex`, `base26`, `base32`, `base36`, `base49`, `base52`, `base58`, `base62`, `base64`
* and `length` the length in chars
* `[hash]` the hash of `options.content` (Buffer) (by default it's the hex digest of the md4 hash)
* `[<hashType>:hash:<digestType>:<length>]` optionally one can configure
* other `hashType`s, i. e. `sha1`, `md4`, `md5`, `sha256`, `sha512`
* other `digestType`s, i. e. `hex`, `base26`, `base32`, `base36`, `base49`, `base52`, `base58`, `base62`, `base64`
* and `length` the length in chars
* `[N]` the N-th match obtained from matching the current file name against `options.regExp`
In loader context `[hash]` and `[contenthash]` are the same, but we recommend using `[contenthash]` for avoid misleading.
Examples
``` javascript
// loaderContext.resourcePath = "/absolute/path/to/app/js/javascript.js"
loaderUtils.interpolateName(loaderContext, "js/[hash].script.[ext]", { content: ... });
// => js/9473fdd0d880a43c21b7778d34872157.script.js
// loaderContext.resourcePath = "/absolute/path/to/app/js/javascript.js"
// loaderContext.resourceQuery = "?foo=bar"
loaderUtils.interpolateName(loaderContext, "js/[hash].script.[ext][query]", { content: ... });
// => js/9473fdd0d880a43c21b7778d34872157.script.js?foo=bar
// loaderContext.resourcePath = "/absolute/path/to/app/js/javascript.js"
loaderUtils.interpolateName(loaderContext, "js/[contenthash].script.[ext]", { content: ... });
// => js/9473fdd0d880a43c21b7778d34872157.script.js
// loaderContext.resourcePath = "/absolute/path/to/app/page.html"
loaderUtils.interpolateName(loaderContext, "html-[hash:6].html", { content: ... });
// => html-9473fd.html
// loaderContext.resourcePath = "/absolute/path/to/app/flash.txt"
loaderUtils.interpolateName(loaderContext, "[hash]", { content: ... });
// => c31e9820c001c9c4a86bce33ce43b679
// loaderContext.resourcePath = "/absolute/path/to/app/img/image.gif"
loaderUtils.interpolateName(loaderContext, "[emoji]", { content: ... });
// => 👍
// loaderContext.resourcePath = "/absolute/path/to/app/img/image.gif"
loaderUtils.interpolateName(loaderContext, "[emoji:4]", { content: ... });
// => 🙍🏢📤🐝
// loaderContext.resourcePath = "/absolute/path/to/app/img/image.png"
loaderUtils.interpolateName(loaderContext, "[sha512:hash:base64:7].[ext]", { content: ... });
// => 2BKDTjl.png
// use sha512 hash instead of md4 and with only 7 chars of base64
// loaderContext.resourcePath = "/absolute/path/to/app/img/myself.png"
// loaderContext.query.name =
loaderUtils.interpolateName(loaderContext, "picture.png");
// => picture.png
// loaderContext.resourcePath = "/absolute/path/to/app/dir/file.png"
loaderUtils.interpolateName(loaderContext, "[path][name].[ext]?[hash]", { content: ... });
// => /app/dir/file.png?9473fdd0d880a43c21b7778d34872157
// loaderContext.resourcePath = "/absolute/path/to/app/js/page-home.js"
loaderUtils.interpolateName(loaderContext, "script-[1].[ext]", { regExp: "page-(.*)\\.js", content: ... });
// => script-home.js
// loaderContext.resourcePath = "/absolute/path/to/app/js/javascript.js"
// loaderContext.resourceQuery = "?foo=bar"
loaderUtils.interpolateName(
loaderContext,
(resourcePath, resourceQuery) => {
// resourcePath - `/app/js/javascript.js`
// resourceQuery - `?foo=bar`
return "js/[hash].script.[ext]";
},
{ content: ... }
);
// => js/9473fdd0d880a43c21b7778d34872157.script.js
```
### `getHashDigest`
``` javascript
const digestString = loaderUtils.getHashDigest(buffer, hashType, digestType, maxLength);
```
* `buffer` the content that should be hashed
* `hashType` one of `sha1`, `md4`, `md5`, `sha256`, `sha512` or any other node.js supported hash type
* `digestType` one of `hex`, `base26`, `base32`, `base36`, `base49`, `base52`, `base58`, `base62`, `base64`
* `maxLength` the maximum length in chars
## License
MIT (http://www.opensource.org/licenses/mit-license.php)
@@ -0,0 +1,16 @@
'use strict';
function getCurrentRequest(loaderContext) {
if (loaderContext.currentRequest) {
return loaderContext.currentRequest;
}
const request = loaderContext.loaders
.slice(loaderContext.loaderIndex)
.map((obj) => obj.request)
.concat([loaderContext.resource]);
return request.join('!');
}
module.exports = getCurrentRequest;
@@ -0,0 +1,91 @@
'use strict';
const baseEncodeTables = {
26: 'abcdefghijklmnopqrstuvwxyz',
32: '123456789abcdefghjkmnpqrstuvwxyz', // no 0lio
36: '0123456789abcdefghijklmnopqrstuvwxyz',
49: 'abcdefghijkmnopqrstuvwxyzABCDEFGHJKLMNPQRSTUVWXYZ', // no lIO
52: 'abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ',
58: '123456789abcdefghijkmnopqrstuvwxyzABCDEFGHJKLMNPQRSTUVWXYZ', // no 0lIO
62: '0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ',
64: '0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ-_',
};
function encodeBufferToBase(buffer, base) {
const encodeTable = baseEncodeTables[base];
if (!encodeTable) {
throw new Error('Unknown encoding base' + base);
}
const readLength = buffer.length;
const Big = require('big.js');
Big.RM = Big.DP = 0;
let b = new Big(0);
for (let i = readLength - 1; i >= 0; i--) {
b = b.times(256).plus(buffer[i]);
}
let output = '';
while (b.gt(0)) {
output = encodeTable[b.mod(base)] + output;
b = b.div(base);
}
Big.DP = 20;
Big.RM = 1;
return output;
}
let createMd4 = undefined;
let BatchedHash = undefined;
function getHashDigest(buffer, hashType, digestType, maxLength) {
hashType = hashType || 'md4';
maxLength = maxLength || 9999;
let hash;
try {
hash = require('crypto').createHash(hashType);
} catch (error) {
if (error.code === 'ERR_OSSL_EVP_UNSUPPORTED' && hashType === 'md4') {
if (createMd4 === undefined) {
createMd4 = require('./hash/md4');
if (BatchedHash === undefined) {
BatchedHash = require('./hash/BatchedHash');
}
}
hash = new BatchedHash(createMd4());
}
if (!hash) {
throw error;
}
}
hash.update(buffer);
if (
digestType === 'base26' ||
digestType === 'base32' ||
digestType === 'base36' ||
digestType === 'base49' ||
digestType === 'base52' ||
digestType === 'base58' ||
digestType === 'base62'
) {
return encodeBufferToBase(hash.digest(), digestType.substr(4)).substr(
0,
maxLength
);
} else {
return hash.digest(digestType || 'hex').substr(0, maxLength);
}
}
module.exports = getHashDigest;
@@ -0,0 +1,20 @@
'use strict';
const parseQuery = require('./parseQuery');
function getOptions(loaderContext) {
const query = loaderContext.query;
if (typeof query === 'string' && query !== '') {
return parseQuery(loaderContext.query);
}
if (!query || typeof query !== 'object') {
// Not object-like queries are not supported.
return {};
}
return query;
}
module.exports = getOptions;
@@ -0,0 +1,16 @@
'use strict';
function getRemainingRequest(loaderContext) {
if (loaderContext.remainingRequest) {
return loaderContext.remainingRequest;
}
const request = loaderContext.loaders
.slice(loaderContext.loaderIndex + 1)
.map((obj) => obj.request)
.concat([loaderContext.resource]);
return request.join('!');
}
module.exports = getRemainingRequest;
@@ -0,0 +1,64 @@
const MAX_SHORT_STRING = require('./wasm-hash').MAX_SHORT_STRING;
class BatchedHash {
constructor(hash) {
this.string = undefined;
this.encoding = undefined;
this.hash = hash;
}
/**
* Update hash {@link https://nodejs.org/api/crypto.html#crypto_hash_update_data_inputencoding}
* @param {string|Buffer} data data
* @param {string=} inputEncoding data encoding
* @returns {this} updated hash
*/
update(data, inputEncoding) {
if (this.string !== undefined) {
if (
typeof data === 'string' &&
inputEncoding === this.encoding &&
this.string.length + data.length < MAX_SHORT_STRING
) {
this.string += data;
return this;
}
this.hash.update(this.string, this.encoding);
this.string = undefined;
}
if (typeof data === 'string') {
if (
data.length < MAX_SHORT_STRING &&
// base64 encoding is not valid since it may contain padding chars
(!inputEncoding || !inputEncoding.startsWith('ba'))
) {
this.string = data;
this.encoding = inputEncoding;
} else {
this.hash.update(data, inputEncoding);
}
} else {
this.hash.update(data);
}
return this;
}
/**
* Calculates the digest {@link https://nodejs.org/api/crypto.html#crypto_hash_digest_encoding}
* @param {string=} encoding encoding of the return value
* @returns {string|Buffer} digest
*/
digest(encoding) {
if (this.string !== undefined) {
this.hash.update(this.string, this.encoding);
}
return this.hash.digest(encoding);
}
}
module.exports = BatchedHash;
@@ -0,0 +1,20 @@
/*
MIT License http://www.opensource.org/licenses/mit-license.php
Author Tobias Koppers @sokra
*/
'use strict';
const create = require('./wasm-hash');
//#region wasm code: md4 (../../../assembly/hash/md4.asm.ts) --initialMemory 1
const md4 = new WebAssembly.Module(
Buffer.from(
// 2150 bytes
'AGFzbQEAAAABCAJgAX8AYAAAAwUEAQAAAAUDAQABBhoFfwFBAAt/AUEAC38BQQALfwFBAAt/AUEACwciBARpbml0AAAGdXBkYXRlAAIFZmluYWwAAwZtZW1vcnkCAAqFEAQmAEGBxpS6BiQBQYnXtv5+JAJB/rnrxXkkA0H2qMmBASQEQQAkAAvMCgEYfyMBIQojAiEGIwMhByMEIQgDQCAAIAVLBEAgBSgCCCINIAcgBiAFKAIEIgsgCCAHIAUoAgAiDCAKIAggBiAHIAhzcXNqakEDdyIDIAYgB3Nxc2pqQQd3IgEgAyAGc3FzampBC3chAiAFKAIUIg8gASACIAUoAhAiCSADIAEgBSgCDCIOIAYgAyACIAEgA3Nxc2pqQRN3IgQgASACc3FzampBA3ciAyACIARzcXNqakEHdyEBIAUoAiAiEiADIAEgBSgCHCIRIAQgAyAFKAIYIhAgAiAEIAEgAyAEc3FzampBC3ciAiABIANzcXNqakETdyIEIAEgAnNxc2pqQQN3IQMgBSgCLCIVIAQgAyAFKAIoIhQgAiAEIAUoAiQiEyABIAIgAyACIARzcXNqakEHdyIBIAMgBHNxc2pqQQt3IgIgASADc3FzampBE3chBCAPIBAgCSAVIBQgEyAFKAI4IhYgAiAEIAUoAjQiFyABIAIgBSgCMCIYIAMgASAEIAEgAnNxc2pqQQN3IgEgAiAEc3FzampBB3ciAiABIARzcXNqakELdyIDIAkgAiAMIAEgBSgCPCIJIAQgASADIAEgAnNxc2pqQRN3IgEgAiADcnEgAiADcXJqakGZ84nUBWpBA3ciAiABIANycSABIANxcmpqQZnzidQFakEFdyIEIAEgAnJxIAEgAnFyaiASakGZ84nUBWpBCXciAyAPIAQgCyACIBggASADIAIgBHJxIAIgBHFyampBmfOJ1AVqQQ13IgEgAyAEcnEgAyAEcXJqakGZ84nUBWpBA3ciAiABIANycSABIANxcmpqQZnzidQFakEFdyIEIAEgAnJxIAEgAnFyampBmfOJ1AVqQQl3IgMgECAEIAIgFyABIAMgAiAEcnEgAiAEcXJqakGZ84nUBWpBDXciASADIARycSADIARxcmogDWpBmfOJ1AVqQQN3IgIgASADcnEgASADcXJqakGZ84nUBWpBBXciBCABIAJycSABIAJxcmpqQZnzidQFakEJdyIDIBEgBCAOIAIgFiABIAMgAiAEcnEgAiAEcXJqakGZ84nUBWpBDXciASADIARycSADIARxcmpqQZnzidQFakEDdyICIAEgA3JxIAEgA3FyampBmfOJ1AVqQQV3IgQgASACcnEgASACcXJqakGZ84nUBWpBCXciAyAMIAIgAyAJIAEgAyACIARycSACIARxcmpqQZnzidQFakENdyIBcyAEc2pqQaHX5/YGakEDdyICIAQgASACcyADc2ogEmpBodfn9gZqQQl3IgRzIAFzampBodfn9gZqQQt3IgMgAiADIBggASADIARzIAJzampBodfn9gZqQQ93IgFzIARzaiANakGh1+f2BmpBA3ciAiAUIAQgASACcyADc2pqQaHX5/YGakEJdyIEcyABc2pqQaHX5/YGakELdyIDIAsgAiADIBYgASADIARzIAJzampBodfn9gZqQQ93IgFzIARzampBodfn9gZqQQN3IgIgEyAEIAEgAnMgA3NqakGh1+f2BmpBCXciBHMgAXNqakGh1+f2BmpBC3chAyAKIA4gAiADIBcgASADIARzIAJzampBodfn9gZqQQ93IgFzIARzampBodfn9gZqQQN3IgJqIQogBiAJIAEgESADIAIgFSAEIAEgAnMgA3NqakGh1+f2BmpBCXciBHMgAXNqakGh1+f2BmpBC3ciAyAEcyACc2pqQaHX5/YGakEPd2ohBiADIAdqIQcgBCAIaiEIIAVBQGshBQwBCwsgCiQBIAYkAiAHJAMgCCQECw0AIAAQASMAIABqJAAL/wQCA38BfiMAIABqrUIDhiEEIABByABqQUBxIgJBCGshAyAAIgFBAWohACABQYABOgAAA0AgACACSUEAIABBB3EbBEAgAEEAOgAAIABBAWohAAwBCwsDQCAAIAJJBEAgAEIANwMAIABBCGohAAwBCwsgAyAENwMAIAIQAUEAIwGtIgRC//8DgyAEQoCA/P8Pg0IQhoQiBEL/gYCA8B+DIARCgP6DgIDgP4NCCIaEIgRCj4C8gPCBwAeDQgiGIARC8IHAh4CegPgAg0IEiIQiBEKGjJiw4MCBgwZ8QgSIQoGChIiQoMCAAYNCJ34gBEKw4MCBg4aMmDCEfDcDAEEIIwKtIgRC//8DgyAEQoCA/P8Pg0IQhoQiBEL/gYCA8B+DIARCgP6DgIDgP4NCCIaEIgRCj4C8gPCBwAeDQgiGIARC8IHAh4CegPgAg0IEiIQiBEKGjJiw4MCBgwZ8QgSIQoGChIiQoMCAAYNCJ34gBEKw4MCBg4aMmDCEfDcDAEEQIwOtIgRC//8DgyAEQoCA/P8Pg0IQhoQiBEL/gYCA8B+DIARCgP6DgIDgP4NCCIaEIgRCj4C8gPCBwAeDQgiGIARC8IHAh4CegPgAg0IEiIQiBEKGjJiw4MCBgwZ8QgSIQoGChIiQoMCAAYNCJ34gBEKw4MCBg4aMmDCEfDcDAEEYIwStIgRC//8DgyAEQoCA/P8Pg0IQhoQiBEL/gYCA8B+DIARCgP6DgIDgP4NCCIaEIgRCj4C8gPCBwAeDQgiGIARC8IHAh4CegPgAg0IEiIQiBEKGjJiw4MCBgwZ8QgSIQoGChIiQoMCAAYNCJ34gBEKw4MCBg4aMmDCEfDcDAAs=',
'base64'
)
);
//#endregion
module.exports = create.bind(null, md4, [], 64, 32);
@@ -0,0 +1,208 @@
/*
MIT License http://www.opensource.org/licenses/mit-license.php
Author Tobias Koppers @sokra
*/
'use strict';
// 65536 is the size of a wasm memory page
// 64 is the maximum chunk size for every possible wasm hash implementation
// 4 is the maximum number of bytes per char for string encoding (max is utf-8)
// ~3 makes sure that it's always a block of 4 chars, so avoid partially encoded bytes for base64
const MAX_SHORT_STRING = Math.floor((65536 - 64) / 4) & ~3;
class WasmHash {
/**
* @param {WebAssembly.Instance} instance wasm instance
* @param {WebAssembly.Instance[]} instancesPool pool of instances
* @param {number} chunkSize size of data chunks passed to wasm
* @param {number} digestSize size of digest returned by wasm
*/
constructor(instance, instancesPool, chunkSize, digestSize) {
const exports = /** @type {any} */ (instance.exports);
exports.init();
this.exports = exports;
this.mem = Buffer.from(exports.memory.buffer, 0, 65536);
this.buffered = 0;
this.instancesPool = instancesPool;
this.chunkSize = chunkSize;
this.digestSize = digestSize;
}
reset() {
this.buffered = 0;
this.exports.init();
}
/**
* @param {Buffer | string} data data
* @param {BufferEncoding=} encoding encoding
* @returns {this} itself
*/
update(data, encoding) {
if (typeof data === 'string') {
while (data.length > MAX_SHORT_STRING) {
this._updateWithShortString(data.slice(0, MAX_SHORT_STRING), encoding);
data = data.slice(MAX_SHORT_STRING);
}
this._updateWithShortString(data, encoding);
return this;
}
this._updateWithBuffer(data);
return this;
}
/**
* @param {string} data data
* @param {BufferEncoding=} encoding encoding
* @returns {void}
*/
_updateWithShortString(data, encoding) {
const { exports, buffered, mem, chunkSize } = this;
let endPos;
if (data.length < 70) {
if (!encoding || encoding === 'utf-8' || encoding === 'utf8') {
endPos = buffered;
for (let i = 0; i < data.length; i++) {
const cc = data.charCodeAt(i);
if (cc < 0x80) {
mem[endPos++] = cc;
} else if (cc < 0x800) {
mem[endPos] = (cc >> 6) | 0xc0;
mem[endPos + 1] = (cc & 0x3f) | 0x80;
endPos += 2;
} else {
// bail-out for weird chars
endPos += mem.write(data.slice(i), endPos, encoding);
break;
}
}
} else if (encoding === 'latin1') {
endPos = buffered;
for (let i = 0; i < data.length; i++) {
const cc = data.charCodeAt(i);
mem[endPos++] = cc;
}
} else {
endPos = buffered + mem.write(data, buffered, encoding);
}
} else {
endPos = buffered + mem.write(data, buffered, encoding);
}
if (endPos < chunkSize) {
this.buffered = endPos;
} else {
const l = endPos & ~(this.chunkSize - 1);
exports.update(l);
const newBuffered = endPos - l;
this.buffered = newBuffered;
if (newBuffered > 0) {
mem.copyWithin(0, l, endPos);
}
}
}
/**
* @param {Buffer} data data
* @returns {void}
*/
_updateWithBuffer(data) {
const { exports, buffered, mem } = this;
const length = data.length;
if (buffered + length < this.chunkSize) {
data.copy(mem, buffered, 0, length);
this.buffered += length;
} else {
const l = (buffered + length) & ~(this.chunkSize - 1);
if (l > 65536) {
let i = 65536 - buffered;
data.copy(mem, buffered, 0, i);
exports.update(65536);
const stop = l - buffered - 65536;
while (i < stop) {
data.copy(mem, 0, i, i + 65536);
exports.update(65536);
i += 65536;
}
data.copy(mem, 0, i, l - buffered);
exports.update(l - buffered - i);
} else {
data.copy(mem, buffered, 0, l - buffered);
exports.update(l);
}
const newBuffered = length + buffered - l;
this.buffered = newBuffered;
if (newBuffered > 0) {
data.copy(mem, 0, length - newBuffered, length);
}
}
}
digest(type) {
const { exports, buffered, mem, digestSize } = this;
exports.final(buffered);
this.instancesPool.push(this);
const hex = mem.toString('latin1', 0, digestSize);
if (type === 'hex') {
return hex;
}
if (type === 'binary' || !type) {
return Buffer.from(hex, 'hex');
}
return Buffer.from(hex, 'hex').toString(type);
}
}
const create = (wasmModule, instancesPool, chunkSize, digestSize) => {
if (instancesPool.length > 0) {
const old = instancesPool.pop();
old.reset();
return old;
} else {
return new WasmHash(
new WebAssembly.Instance(wasmModule),
instancesPool,
chunkSize,
digestSize
);
}
};
module.exports = create;
module.exports.MAX_SHORT_STRING = MAX_SHORT_STRING;
@@ -0,0 +1,23 @@
'use strict';
const getOptions = require('./getOptions');
const parseQuery = require('./parseQuery');
const stringifyRequest = require('./stringifyRequest');
const getRemainingRequest = require('./getRemainingRequest');
const getCurrentRequest = require('./getCurrentRequest');
const isUrlRequest = require('./isUrlRequest');
const urlToRequest = require('./urlToRequest');
const parseString = require('./parseString');
const getHashDigest = require('./getHashDigest');
const interpolateName = require('./interpolateName');
exports.getOptions = getOptions;
exports.parseQuery = parseQuery;
exports.stringifyRequest = stringifyRequest;
exports.getRemainingRequest = getRemainingRequest;
exports.getCurrentRequest = getCurrentRequest;
exports.isUrlRequest = isUrlRequest;
exports.urlToRequest = urlToRequest;
exports.parseString = parseString;
exports.getHashDigest = getHashDigest;
exports.interpolateName = interpolateName;
@@ -0,0 +1,151 @@
'use strict';
const path = require('path');
const emojisList = require('emojis-list');
const getHashDigest = require('./getHashDigest');
const emojiRegex = /[\uD800-\uDFFF]./;
const emojiList = emojisList.filter((emoji) => emojiRegex.test(emoji));
const emojiCache = {};
function encodeStringToEmoji(content, length) {
if (emojiCache[content]) {
return emojiCache[content];
}
length = length || 1;
const emojis = [];
do {
if (!emojiList.length) {
throw new Error('Ran out of emoji');
}
const index = Math.floor(Math.random() * emojiList.length);
emojis.push(emojiList[index]);
emojiList.splice(index, 1);
} while (--length > 0);
const emojiEncoding = emojis.join('');
emojiCache[content] = emojiEncoding;
return emojiEncoding;
}
function interpolateName(loaderContext, name, options) {
let filename;
const hasQuery =
loaderContext.resourceQuery && loaderContext.resourceQuery.length > 1;
if (typeof name === 'function') {
filename = name(
loaderContext.resourcePath,
hasQuery ? loaderContext.resourceQuery : undefined
);
} else {
filename = name || '[hash].[ext]';
}
const context = options.context;
const content = options.content;
const regExp = options.regExp;
let ext = 'bin';
let basename = 'file';
let directory = '';
let folder = '';
let query = '';
if (loaderContext.resourcePath) {
const parsed = path.parse(loaderContext.resourcePath);
let resourcePath = loaderContext.resourcePath;
if (parsed.ext) {
ext = parsed.ext.substr(1);
}
if (parsed.dir) {
basename = parsed.name;
resourcePath = parsed.dir + path.sep;
}
if (typeof context !== 'undefined') {
directory = path
.relative(context, resourcePath + '_')
.replace(/\\/g, '/')
.replace(/\.\.(\/)?/g, '_$1');
directory = directory.substr(0, directory.length - 1);
} else {
directory = resourcePath.replace(/\\/g, '/').replace(/\.\.(\/)?/g, '_$1');
}
if (directory.length === 1) {
directory = '';
} else if (directory.length > 1) {
folder = path.basename(directory);
}
}
if (loaderContext.resourceQuery && loaderContext.resourceQuery.length > 1) {
query = loaderContext.resourceQuery;
const hashIdx = query.indexOf('#');
if (hashIdx >= 0) {
query = query.substr(0, hashIdx);
}
}
let url = filename;
if (content) {
// Match hash template
url = url
// `hash` and `contenthash` are same in `loader-utils` context
// let's keep `hash` for backward compatibility
.replace(
/\[(?:([^:\]]+):)?(?:hash|contenthash)(?::([a-z]+\d*))?(?::(\d+))?\]/gi,
(all, hashType, digestType, maxLength) =>
getHashDigest(content, hashType, digestType, parseInt(maxLength, 10))
)
.replace(/\[emoji(?::(\d+))?\]/gi, (all, length) =>
encodeStringToEmoji(content, parseInt(length, 10))
);
}
url = url
.replace(/\[ext\]/gi, () => ext)
.replace(/\[name\]/gi, () => basename)
.replace(/\[path\]/gi, () => directory)
.replace(/\[folder\]/gi, () => folder)
.replace(/\[query\]/gi, () => query);
if (regExp && loaderContext.resourcePath) {
const match = loaderContext.resourcePath.match(new RegExp(regExp));
match &&
match.forEach((matched, i) => {
url = url.replace(new RegExp('\\[' + i + '\\]', 'ig'), matched);
});
}
if (
typeof loaderContext.options === 'object' &&
typeof loaderContext.options.customInterpolateName === 'function'
) {
url = loaderContext.options.customInterpolateName.call(
loaderContext,
url,
name,
options
);
}
return url;
}
module.exports = interpolateName;
@@ -0,0 +1,31 @@
'use strict';
const path = require('path');
function isUrlRequest(url, root) {
// An URL is not an request if
// 1. It's an absolute url and it is not `windows` path like `C:\dir\file`
if (/^[a-z][a-z0-9+.-]*:/i.test(url) && !path.win32.isAbsolute(url)) {
return false;
}
// 2. It's a protocol-relative
if (/^\/\//.test(url)) {
return false;
}
// 3. It's some kind of url for a template
if (/^[{}[\]#*;,'§$%&(=?`´^°<>]/.test(url)) {
return false;
}
// 4. It's also not an request if root isn't set and it's a root-relative url
if ((root === undefined || root === false) && /^\//.test(url)) {
return false;
}
return true;
}
module.exports = isUrlRequest;
@@ -0,0 +1,69 @@
'use strict';
const JSON5 = require('json5');
const specialValues = {
null: null,
true: true,
false: false,
};
function parseQuery(query) {
if (query.substr(0, 1) !== '?') {
throw new Error(
"A valid query string passed to parseQuery should begin with '?'"
);
}
query = query.substr(1);
if (!query) {
return {};
}
if (query.substr(0, 1) === '{' && query.substr(-1) === '}') {
return JSON5.parse(query);
}
const queryArgs = query.split(/[,&]/g);
const result = {};
queryArgs.forEach((arg) => {
const idx = arg.indexOf('=');
if (idx >= 0) {
let name = arg.substr(0, idx);
let value = decodeURIComponent(arg.substr(idx + 1));
// eslint-disable-next-line no-prototype-builtins
if (specialValues.hasOwnProperty(value)) {
value = specialValues[value];
}
if (name.substr(-2) === '[]') {
name = decodeURIComponent(name.substr(0, name.length - 2));
if (!Array.isArray(result[name])) {
result[name] = [];
}
result[name].push(value);
} else {
name = decodeURIComponent(name);
result[name] = value;
}
} else {
if (arg.substr(0, 1) === '-') {
result[decodeURIComponent(arg.substr(1))] = false;
} else if (arg.substr(0, 1) === '+') {
result[decodeURIComponent(arg.substr(1))] = true;
} else {
result[decodeURIComponent(arg)] = true;
}
}
});
return result;
}
module.exports = parseQuery;
@@ -0,0 +1,23 @@
'use strict';
function parseString(str) {
try {
if (str[0] === '"') {
return JSON.parse(str);
}
if (str[0] === "'" && str.substr(str.length - 1) === "'") {
return parseString(
str
.replace(/\\.|"/g, (x) => (x === '"' ? '\\"' : x))
.replace(/^'|'$/g, '"')
);
}
return JSON.parse('"' + str + '"');
} catch (e) {
return str;
}
}
module.exports = parseString;
@@ -0,0 +1,51 @@
'use strict';
const path = require('path');
const matchRelativePath = /^\.\.?[/\\]/;
function isAbsolutePath(str) {
return path.posix.isAbsolute(str) || path.win32.isAbsolute(str);
}
function isRelativePath(str) {
return matchRelativePath.test(str);
}
function stringifyRequest(loaderContext, request) {
const splitted = request.split('!');
const context =
loaderContext.context ||
(loaderContext.options && loaderContext.options.context);
return JSON.stringify(
splitted
.map((part) => {
// First, separate singlePath from query, because the query might contain paths again
const splittedPart = part.match(/^(.*?)(\?.*)/);
const query = splittedPart ? splittedPart[2] : '';
let singlePath = splittedPart ? splittedPart[1] : part;
if (isAbsolutePath(singlePath) && context) {
singlePath = path.relative(context, singlePath);
if (isAbsolutePath(singlePath)) {
// If singlePath still matches an absolute path, singlePath was on a different drive than context.
// In this case, we leave the path platform-specific without replacing any separators.
// @see https://github.com/webpack/loader-utils/pull/14
return singlePath + query;
}
if (isRelativePath(singlePath) === false) {
// Ensure that the relative path starts at least with ./ otherwise it would be a request into the modules directory (like node_modules).
singlePath = './' + singlePath;
}
}
return singlePath.replace(/\\/g, '/') + query;
})
.join('!')
);
}
module.exports = stringifyRequest;
@@ -0,0 +1,60 @@
'use strict';
// we can't use path.win32.isAbsolute because it also matches paths starting with a forward slash
const matchNativeWin32Path = /^[A-Z]:[/\\]|^\\\\/i;
function urlToRequest(url, root) {
// Do not rewrite an empty url
if (url === '') {
return '';
}
const moduleRequestRegex = /^[^?]*~/;
let request;
if (matchNativeWin32Path.test(url)) {
// absolute windows path, keep it
request = url;
} else if (root !== undefined && root !== false && /^\//.test(url)) {
// if root is set and the url is root-relative
switch (typeof root) {
// 1. root is a string: root is prefixed to the url
case 'string':
// special case: `~` roots convert to module request
if (moduleRequestRegex.test(root)) {
request = root.replace(/([^~/])$/, '$1/') + url.slice(1);
} else {
request = root + url;
}
break;
// 2. root is `true`: absolute paths are allowed
// *nix only, windows-style absolute paths are always allowed as they doesn't start with a `/`
case 'boolean':
request = url;
break;
default:
throw new Error(
"Unexpected parameters to loader-utils 'urlToRequest': url = " +
url +
', root = ' +
root +
'.'
);
}
} else if (/^\.\.?\//.test(url)) {
// A relative url stays
request = url;
} else {
// every other url is threaded like a relative url
request = './' + url;
}
// A `~` makes the url an module
if (moduleRequestRegex.test(request)) {
request = request.replace(moduleRequestRegex, '');
}
return request;
}
module.exports = urlToRequest;
@@ -0,0 +1,73 @@
{
"_args": [
[
"loader-utils@2.0.2",
"/home/node/nuxt"
]
],
"_from": "loader-utils@2.0.2",
"_id": "loader-utils@2.0.2",
"_inBundle": false,
"_integrity": "sha512-TM57VeHptv569d/GKh6TAYdzKblwDNiumOdkFnejjD0XwTH87K90w3O7AiJRqdQoXygvi1VQTJTLGhJl7WqA7A==",
"_location": "/extract-css-chunks-webpack-plugin/loader-utils",
"_phantomChildren": {},
"_requested": {
"type": "version",
"registry": true,
"raw": "loader-utils@2.0.2",
"name": "loader-utils",
"escapedName": "loader-utils",
"rawSpec": "2.0.2",
"saveSpec": null,
"fetchSpec": "2.0.2"
},
"_requiredBy": [
"/extract-css-chunks-webpack-plugin"
],
"_resolved": "https://registry.npmjs.org/loader-utils/-/loader-utils-2.0.2.tgz",
"_spec": "2.0.2",
"_where": "/home/node/nuxt",
"author": {
"name": "Tobias Koppers @sokra"
},
"bugs": {
"url": "https://github.com/webpack/loader-utils/issues"
},
"dependencies": {
"big.js": "^5.2.2",
"emojis-list": "^3.0.0",
"json5": "^2.1.2"
},
"description": "utils for webpack loaders",
"devDependencies": {
"coveralls": "^3.0.9",
"eslint": "^6.8.0",
"eslint-plugin-node": "^11.0.0",
"eslint-plugin-prettier": "^3.1.2",
"jest": "^25.1.0",
"prettier": "^1.19.1",
"standard-version": "^7.1.0"
},
"engines": {
"node": ">=8.9.0"
},
"files": [
"lib"
],
"homepage": "https://github.com/webpack/loader-utils#readme",
"license": "MIT",
"main": "lib/index.js",
"name": "loader-utils",
"repository": {
"type": "git",
"url": "git+https://github.com/webpack/loader-utils.git"
},
"scripts": {
"lint": "eslint lib test",
"pretest": "yarn lint",
"release": "yarn test && standard-version",
"test": "jest",
"test:ci": "jest --coverage"
},
"version": "2.0.2"
}
@@ -0,0 +1,134 @@
# 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="1.0.0"></a>
# [1.0.0](https://github.com/webpack-contrib/schema-utils/compare/v0.4.7...v1.0.0) (2018-08-07)
### Features
* **src:** add support for custom error messages ([#33](https://github.com/webpack-contrib/schema-utils/issues/33)) ([1cbe4ef](https://github.com/webpack-contrib/schema-utils/commit/1cbe4ef))
<a name="0.4.7"></a>
## [0.4.7](https://github.com/webpack-contrib/schema-utils/compare/v0.4.6...v0.4.7) (2018-08-07)
### Bug Fixes
* **src:** `node >= v4.0.0` support ([#32](https://github.com/webpack-contrib/schema-utils/issues/32)) ([cb13dd4](https://github.com/webpack-contrib/schema-utils/commit/cb13dd4))
<a name="0.4.6"></a>
## [0.4.6](https://github.com/webpack-contrib/schema-utils/compare/v0.4.5...v0.4.6) (2018-08-06)
### Bug Fixes
* **package:** remove lockfile ([#28](https://github.com/webpack-contrib/schema-utils/issues/28)) ([69f1a81](https://github.com/webpack-contrib/schema-utils/commit/69f1a81))
* **package:** remove unnecessary `webpack` dependency ([#26](https://github.com/webpack-contrib/schema-utils/issues/26)) ([532eaa5](https://github.com/webpack-contrib/schema-utils/commit/532eaa5))
<a name="0.4.5"></a>
## [0.4.5](https://github.com/webpack-contrib/schema-utils/compare/v0.4.4...v0.4.5) (2018-02-13)
### Bug Fixes
* **CHANGELOG:** update broken links ([4483b9f](https://github.com/webpack-contrib/schema-utils/commit/4483b9f))
* **package:** update broken links ([f2494ba](https://github.com/webpack-contrib/schema-utils/commit/f2494ba))
<a name="0.4.4"></a>
## [0.4.4](https://github.com/webpack-contrib/schema-utils/compare/v0.4.3...v0.4.4) (2018-02-13)
### Bug Fixes
* **package:** update `dependencies` ([#22](https://github.com/webpack-contrib/schema-utils/issues/22)) ([3aecac6](https://github.com/webpack-contrib/schema-utils/commit/3aecac6))
<a name="0.4.3"></a>
## [0.4.3](https://github.com/webpack-contrib/schema-utils/compare/v0.4.2...v0.4.3) (2017-12-14)
### Bug Fixes
* **validateOptions:** throw `err` instead of `process.exit(1)` ([#17](https://github.com/webpack-contrib/schema-utils/issues/17)) ([c595eda](https://github.com/webpack-contrib/schema-utils/commit/c595eda))
* **ValidationError:** never return `this` in the ctor ([#16](https://github.com/webpack-contrib/schema-utils/issues/16)) ([c723791](https://github.com/webpack-contrib/schema-utils/commit/c723791))
<a name="0.4.2"></a>
## [0.4.2](https://github.com/webpack-contrib/schema-utils/compare/v0.4.1...v0.4.2) (2017-11-09)
### Bug Fixes
* **validateOptions:** catch `ValidationError` and handle it internally ([#15](https://github.com/webpack-contrib/schema-utils/issues/15)) ([9c5ef5e](https://github.com/webpack-contrib/schema-utils/commit/9c5ef5e))
<a name="0.4.1"></a>
## [0.4.1](https://github.com/webpack-contrib/schema-utils/compare/v0.4.0...v0.4.1) (2017-11-03)
### Bug Fixes
* **ValidationError:** use `Error.captureStackTrace` for `err.stack` handling ([#14](https://github.com/webpack-contrib/schema-utils/issues/14)) ([a6fb974](https://github.com/webpack-contrib/schema-utils/commit/a6fb974))
<a name="0.4.0"></a>
# [0.4.0](https://github.com/webpack-contrib/schema-utils/compare/v0.3.0...v0.4.0) (2017-10-28)
### Features
* add support for `typeof`, `instanceof` (`{Function\|RegExp}`) ([#10](https://github.com/webpack-contrib/schema-utils/issues/10)) ([9f01816](https://github.com/webpack-contrib/schema-utils/commit/9f01816))
<a name="0.3.0"></a>
# [0.3.0](https://github.com/webpack-contrib/schema-utils/compare/v0.2.1...v0.3.0) (2017-04-29)
### Features
* add ValidationError ([#8](https://github.com/webpack-contrib/schema-utils/issues/8)) ([d48f0fb](https://github.com/webpack-contrib/schema-utils/commit/d48f0fb))
<a name="0.2.1"></a>
## [0.2.1](https://github.com/webpack-contrib/schema-utils/compare/v0.2.0...v0.2.1) (2017-03-13)
### Bug Fixes
* Include .babelrc to `files` ([28f0363](https://github.com/webpack-contrib/schema-utils/commit/28f0363))
* Include source to `files` ([43b0f2f](https://github.com/webpack-contrib/schema-utils/commit/43b0f2f))
<a name="0.2.0"></a>
# [0.2.0](https://github.com/webpack-contrib/schema-utils/compare/v0.1.0...v0.2.0) (2017-03-12)
<a name="0.1.0"></a>
# 0.1.0 (2017-03-07)
### Features
* **validations:** add validateOptions module ([ae9b47b](https://github.com/webpack-contrib/schema-utils/commit/ae9b47b))
# 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.
@@ -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.
@@ -0,0 +1,149 @@
[![npm][npm]][npm-url]
[![node][node]][node-url]
[![deps][deps]][deps-url]
[![test][test]][test-url]
[![coverage][cover]][cover-url]
[![chat][chat]][chat-url]
<div align="center">
<a href="http://json-schema.org">
<img width="160" height="160"
src="https://raw.githubusercontent.com/webpack-contrib/schema-utils/master/docs/logo.png">
</a>
<a href="https://github.com/webpack/webpack">
<img width="200" height="200"
src="https://webpack.js.org/assets/icon-square-big.svg">
</a>
<h1>Schema Utils</h1>
</div>
<h2 align="center">Install</h2>
```bash
npm i schema-utils
```
<h2 align="center">Usage</h2>
### `validateOptions`
**`schema.json`**
```js
{
"type": "object",
"properties": {
// Options...
},
"additionalProperties": false
}
```
#### Error Messages (Custom)
**`schema.json`**
```js
{
"type": "object",
"properties": {
"option": {
"type": [ "boolean" ]
}
},
// Overrides the default err.message for option
"errorMessage": {
"option": "should be {Boolean} (https:/github.com/org/repo#anchor)"
}
"additionalProperties": false
}
```
```js
import schema from 'path/to/schema.json'
import validateOptions from 'schema-utils'
validateOptions(schema, options, 'Loader/Plugin Name')
```
<h2 align="center">Examples</h2>
**schema.json**
```json
{
"type": "object",
"properties": {
"name": {
"type": "string"
},
"test": {
"anyOf": [
{ "type": "array" },
{ "type": "string" },
{ "instanceof": "RegExp" }
]
},
"transform": {
"instanceof": "Function"
},
"sourceMap": {
"type": "boolean"
}
},
"additionalProperties": false
}
```
### `Loader`
```js
import { getOptions } from 'loader-utils'
import validateOptions from 'schema-utils'
import schema from 'path/to/schema.json'
function loader (src, map) {
const options = getOptions(this) || {}
validateOptions(schema, options, 'Loader Name')
// Code...
}
```
### `Plugin`
```js
import validateOptions from 'schema-utils'
import schema from 'path/to/schema.json'
class Plugin {
constructor (options) {
validateOptions(schema, options, 'Plugin Name')
this.options = options
}
apply (compiler) {
// Code...
}
}
```
[npm]: https://img.shields.io/npm/v/schema-utils.svg
[npm-url]: https://npmjs.com/package/schema-utils
[node]: https://img.shields.io/node/v/schema-utils.svg
[node-url]: https://nodejs.org
[deps]: https://david-dm.org/webpack-contrib/schema-utils.svg
[deps-url]: https://david-dm.org/webpack-contrib/schema-utils
[test]: http://img.shields.io/travis/webpack-contrib/schema-utils.svg
[test-url]: https://travis-ci.org/webpack-contrib/schema-utils
[cover]: https://codecov.io/gh/webpack-contrib/schema-utils/branch/master/graph/badge.svg
[cover-url]: https://codecov.io/gh/webpack-contrib/schema-utils
[chat]: https://img.shields.io/badge/gitter-webpack%2Fwebpack-brightgreen.svg
[chat-url]: https://gitter.im/webpack/webpack
@@ -0,0 +1,77 @@
{
"_args": [
[
"schema-utils@1.0.0",
"/home/node/nuxt"
]
],
"_from": "schema-utils@1.0.0",
"_id": "schema-utils@1.0.0",
"_inBundle": false,
"_integrity": "sha512-i27Mic4KovM/lnGsy8whRCHhc7VicJajAjTrYg11K9zfZXnYIt4k5F+kZkwjnrhKzLic/HLU4j11mjsz2G/75g==",
"_location": "/extract-css-chunks-webpack-plugin/schema-utils",
"_phantomChildren": {},
"_requested": {
"type": "version",
"registry": true,
"raw": "schema-utils@1.0.0",
"name": "schema-utils",
"escapedName": "schema-utils",
"rawSpec": "1.0.0",
"saveSpec": null,
"fetchSpec": "1.0.0"
},
"_requiredBy": [
"/extract-css-chunks-webpack-plugin"
],
"_resolved": "https://registry.npmjs.org/schema-utils/-/schema-utils-1.0.0.tgz",
"_spec": "1.0.0",
"_where": "/home/node/nuxt",
"author": {
"name": "webpack Contrib",
"url": "https://github.com/webpack-contrib"
},
"bugs": {
"url": "https://github.com/webpack-contrib/schema-utils/issues"
},
"dependencies": {
"ajv": "^6.1.0",
"ajv-errors": "^1.0.0",
"ajv-keywords": "^3.1.0"
},
"description": "webpack Validation Utils",
"devDependencies": {
"@commitlint/cli": "^7.0.0",
"@commitlint/config-conventional": "^7.0.0",
"@webpack-contrib/eslint-config-webpack": "^2.0.0",
"del-cli": "^1.0.0",
"eslint": "^5.0.0",
"eslint-plugin-import": "^2.0.0",
"eslint-plugin-prettier": "^2.0.0",
"jest": "^21.0.0",
"prettier": "^1.0.0",
"standard-version": "^4.0.0"
},
"engines": {
"node": ">= 4"
},
"files": [
"src"
],
"homepage": "https://github.com/webpack-contrib/schema-utils",
"license": "MIT",
"main": "src/index.js",
"name": "schema-utils",
"repository": {
"type": "git",
"url": "git+https://github.com/webpack-contrib/schema-utils.git"
},
"scripts": {
"clean": "del-cli coverage",
"commits": "commitlint --from $(git rev-list --tags --max-count=1)",
"lint": "eslint --cache src test",
"release": "npm run commits && standard-version",
"test": "jest --env node --verbose --coverage"
},
"version": "1.0.0"
}
@@ -0,0 +1,30 @@
/* eslint-disable
strict,
no-param-reassign
*/
'use strict';
class ValidationError extends Error {
constructor(errors, name) {
super();
this.name = 'ValidationError';
this.message = `${name || ''} Invalid Options\n\n`;
this.errors = errors.map((err) => {
err.dataPath = err.dataPath.replace(/\//g, '.');
return err;
});
this.errors.forEach((err) => {
this.message += `options${err.dataPath} ${err.message}\n`;
});
Error.captureStackTrace(this, this.constructor);
}
}
module.exports = ValidationError;
@@ -0,0 +1,9 @@
/* eslint-disable
strict
*/
'use strict';
const validateOptions = require('./validateOptions');
module.exports = validateOptions;
@@ -0,0 +1,38 @@
/* eslint-disable
strict,
no-param-reassign
*/
'use strict';
const fs = require('fs');
const path = require('path');
const Ajv = require('ajv');
const errors = require('ajv-errors');
const keywords = require('ajv-keywords');
const ValidationError = require('./ValidationError');
const ajv = new Ajv({
allErrors: true,
jsonPointers: true,
});
errors(ajv);
keywords(ajv, ['instanceof', 'typeof']);
const validateOptions = (schema, options, name) => {
if (typeof schema === 'string') {
schema = fs.readFileSync(path.resolve(schema), 'utf8');
schema = JSON.parse(schema);
}
if (!ajv.validate(schema, options)) {
throw new ValidationError(ajv.errors, name);
}
return true;
};
module.exports = validateOptions;
+160
View File
@@ -0,0 +1,160 @@
{
"_args": [
[
"extract-css-chunks-webpack-plugin@4.9.0",
"/home/node/nuxt"
]
],
"_from": "extract-css-chunks-webpack-plugin@4.9.0",
"_id": "extract-css-chunks-webpack-plugin@4.9.0",
"_inBundle": false,
"_integrity": "sha512-HNuNPCXRMqJDQ1OHAUehoY+0JVCnw9Y/H22FQzYVwo8Ulgew98AGDu0grnY5c7xwiXHjQa6yJ/1dxLCI/xqTyQ==",
"_location": "/extract-css-chunks-webpack-plugin",
"_phantomChildren": {
"ajv": "6.12.6",
"ajv-errors": "1.0.1",
"ajv-keywords": "3.5.2",
"big.js": "5.2.2",
"emojis-list": "3.0.0",
"json5": "2.2.1"
},
"_requested": {
"type": "version",
"registry": true,
"raw": "extract-css-chunks-webpack-plugin@4.9.0",
"name": "extract-css-chunks-webpack-plugin",
"escapedName": "extract-css-chunks-webpack-plugin",
"rawSpec": "4.9.0",
"saveSpec": null,
"fetchSpec": "4.9.0"
},
"_requiredBy": [
"/@nuxt/webpack"
],
"_resolved": "https://registry.npmjs.org/extract-css-chunks-webpack-plugin/-/extract-css-chunks-webpack-plugin-4.9.0.tgz",
"_spec": "4.9.0",
"_where": "/home/node/nuxt",
"author": {
"name": "James Gillmore",
"email": "james@faceyspacey.com"
},
"bugs": {
"url": "https://github.com/faceyspacey/extract-css-chunks-webpack-plugin/issues"
},
"config": {
"commitizen": {
"path": "./node_modules/cz-conventional-changelog"
}
},
"contributors": [
{
"name": "Zack Jackson",
"email": "zack@ScriptedAlchemy.com",
"url": "https://github.com/ScriptedAlchemy"
}
],
"dependencies": {
"loader-utils": "^2.0.0",
"normalize-url": "1.9.1",
"schema-utils": "^1.0.0",
"webpack-sources": "^1.1.0"
},
"description": "Extract CSS from chunks into stylesheets + HMR. Supports Webpack 4 + SSR",
"devDependencies": {
"@babel/cli": "7.8.4",
"@babel/core": "7.9.0",
"@babel/preset-env": "7.9.5",
"@commitlint/cli": "8.3.5",
"@commitlint/config-conventional": "8.3.4",
"@webpack-contrib/defaults": "6.3.0",
"@webpack-contrib/eslint-config-webpack": "3.0.0",
"babel-eslint": "10.1.0",
"babel-jest": "25.5.1",
"commitizen": "4.0.4",
"commitlint-azure-pipelines-cli": "1.0.3",
"cross-env": "7.0.2",
"css-loader": "3.5.2",
"cz-conventional-changelog": "3.1.0",
"del": "5.1.0",
"del-cli": "3.0.0",
"es-check": "5.1.0",
"eslint": "6.8.0",
"eslint-config-prettier": "6.10.1",
"eslint-plugin-import": "2.20.2",
"eslint-plugin-prettier": "3.1.2",
"file-loader": "6.0.0",
"husky": "4.2.3",
"jest": "25.5.4",
"jest-dev-server": "4.4.0",
"jest-junit": "10.0.0",
"jest-puppeteer": "4.4.0",
"lint-staged": "10.0.8",
"memfs": "3.1.2",
"npm-run-all": "4.1.5",
"prerender-loader": "1.3.0",
"prettier": "1.19.1",
"puppeteer": "2.1.1",
"serve": "11.3.0",
"standard-version": "8.0.1",
"webpack": "4.43.0",
"webpack-cli": "3.3.11",
"webpack-dev-server": "3.10.3"
},
"engines": {
"node": ">= 6.9.0"
},
"files": [
"dist",
"index.d.ts"
],
"homepage": "http://github.com/faceyspacey/extract-css-chunks-webpack-plugin",
"keywords": [
"css",
"chunks",
"code splitting",
"mini-css",
"hot",
"hmr",
"universal",
"webpack",
"webpack 4",
"css-hot-loader",
"extract-css-chunks-webpack-plugin"
],
"license": "MIT",
"main": "dist/cjs.js",
"name": "extract-css-chunks-webpack-plugin",
"peerDependencies": {
"webpack": "^4.4.0 || ^5.0.0"
},
"repository": {
"type": "git",
"url": "git+https://github.com/faceyspacey/extract-css-chunks-webpack-plugin.git"
},
"scripts": {
"build": "cross-env NODE_ENV=production babel src -d dist --ignore \"src/**/*.test.js\" --copy-files",
"clean": "del-cli dist",
"commit": "git-cz",
"commitlint": "commitlint --from=master",
"defaults": "webpack-defaults",
"lint": "npm-run-all -l -p \"lint:js\" \"lint:prettier\"",
"lint:js": "eslint --cache src test",
"lint:prettier": "prettier \"{**/*,*}.{js,json,md,yml,css}\" --list-different",
"postbuild": "es-check es5 dist/hmr/hotModuleReplacement.js",
"prebuild": "npm run clean",
"prepare": "npm run build",
"pretest": "npm run lint",
"release": "standard-version",
"security": "npm audit",
"semantic-release": "npx semantic-release",
"start": "npm run build -- -w",
"test": "cross-env NODE_ENV=test npm run test:coverage",
"test:coverage": "cross-env NODE_ENV=test jest --collectCoverageFrom=\"src/**/*.js\" --coverage",
"test:manual": "npm run build && webpack-dev-server test/manual/src/index.js --open --config test/manual/webpack.config.js",
"test:only": "cross-env NODE_ENV=test jest --updateSnapshot",
"test:watch": "cross-env NODE_ENV=test jest --watch",
"travis": "npm run ci:coverage"
},
"types": "index.d.ts",
"version": "4.9.0"
}