# extract-css-assets-webpack-plugin

> Extract network resources in css

Latest version **0.2.10** (published 2022-08-11) · MIT license · 0 weekly downloads

## Install

```sh
npm install extract-css-assets-webpack-plugin
pnpm add extract-css-assets-webpack-plugin
yarn add extract-css-assets-webpack-plugin
bun add extract-css-assets-webpack-plugin
```

## Health

**Score 30/100 (F)** — status: abandoned.

Positive: no vulnerabilities; popular repo.

Warnings: low downloads; no types; no esm support; pre 1.0.

Negative: abandoned.

## Facts

| | |
|---|---|
| Version | 0.2.10 |
| Published | 2022-08-11 |
| First published | 2018-06-14 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 6 |
| Unpacked size | 16.5 KB |
| Known vulnerabilities | 0 (+6 in 2 direct dependencies) |
| Install scripts | no |
| GitHub stars | 18615 |
| Maintainers | noyobo, clarkxia, luhengchang228, rax-publisher |
| Keywords | webpack, webpack-plugin |

## Links

- npm: https://www.npmjs.com/package/extract-css-assets-webpack-plugin
- Repository: https://github.com/alibaba/ice/tree/master/packages/webpack-plugin-extract-css-assets
- npm.io page: https://npm.io/package/extract-css-assets-webpack-plugin

## Dependencies (6)

- [chalk](https://npm.io/package/chalk.md) ^2.4.1
- [postcss](https://npm.io/package/postcss.md) ^7.0.32
- [request](https://npm.io/package/request.md) ^2.87.0
- [file-type](https://npm.io/package/file-type.md) ^8.1.0
- [request-promise](https://npm.io/package/request-promise.md) ^4.2.2
- [webpack-sources](https://npm.io/package/webpack-sources.md) ^2.0.0

## Alternatives

- [raw-loader](https://npm.io/package/raw-loader.md) — 4.3M weekly downloads
- [plop](https://npm.io/package/plop.md) — 1.4M weekly downloads
- [webpack-deadcode-plugin](https://npm.io/package/webpack-deadcode-plugin.md) — 80.3K weekly downloads
- [@storybook/preact-vite](https://npm.io/package/@storybook/preact-vite.md) — 54.2K weekly downloads
- [vite-plugin-transform](https://npm.io/package/vite-plugin-transform.md) — 2.4K weekly downloads

## Recent versions

- 0.2.10 (latest) — 2022-08-11
- 0.2.9-beta.1 (beta) — 2021-02-22
- 0.2.1 (next) — 2018-06-20
- 0.2.9 — 2021-02-24
- 0.2.8 — 2020-10-28
- 0.2.7 — 2020-09-29
- 0.2.7-1 — 2020-09-29
- 0.2.7-0 — 2020-09-24
- 0.2.5 — 2018-07-17
- 0.2.4 — 2018-07-12
- 0.2.3 — 2018-07-02
- 0.2.2 — 2018-06-21
- 0.2.0 — 2018-06-20
- 0.1.1 — 2018-06-14
- 0.1.0 — 2018-06-14

## README

# extract-css-assets-webpack-plugin

提取 css 文件中网络资源，将其本地化。

## Required

- webpack >= 4.0

## Options

- `outputPath` 默认值： `""` 提取后的文件目录前缀
- `relativeCssPath` 默认值： `""` 提取的文件后相对于 css 的路径
- `forceLocal` 默认值： `false` 是否 publicPath 为 http 网络路径时也强制生效

## Usage

```js
import MiniCssExtractPlugin from 'mini-css-extract-plugin';
import ExtractCssAssetsPlugin from 'extract-css-assets-webpack-plugin';

module.exports = {
  entry: './index',
  output: {
    publicPath: '/',
  },
  module: {
    rules: [
      {
        test: /\.(png|jpg|gif)$/,
        use: [
          {
            loader: 'url-loader',
            options: {
              limit: 8192,
              name: 'assets/[hash].[ext]',
            },
          },
        ],
      },
      {
        test: /\.css$/,
        use: [MiniCssExtractPlugin.loader, 'css-loader'],
      },
    ],
  },
  plugins: [
    new MiniCssExtractPlugin({
      filename: 'css/[name].css',
      chunkFileName: 'css/[id].css',
    }),
    new ExtractCssAssetsPlugin({
      outputPath: 'assets/',
      relativeCssPath: '../', // 由于创建了 css 目录 则生成的图片相对于 css 目录则为 `'../'`
    }),
  ],
};
```

input:

```css
body {
  color: red;
  background-image: url(//img.alicdn.com/tfs/TB1zSOZrFGWBuNjy0FbXXb4sXXa-1024-1024.png);
}

.b {
  background-image: url('./img.jpg');
}

@font-face {
  font-family: 'iconfont'; /* project id 377048 */
  src: url('//at.alicdn.com/t/font_377048_kjcjjyweu4sra4i.eot');
  src: url('//at.alicdn.com/t/font_377048_kjcjjyweu4sra4i.eot?#iefix') format('embedded-opentype'),
    url('//at.alicdn.com/t/font_377048_kjcjjyweu4sra4i.woff') format('woff'),
    url('//at.alicdn.com/t/font_377048_kjcjjyweu4sra4i.ttf') format('truetype'),
    url('//at.alicdn.com/t/font_377048_kjcjjyweu4sra4i.svg#iconfont') format('svg');
}
```

output:

```css
body {
  color: red;
  background-image: url('/assets/cd7e3c88d4211a9b0b2335d1e417bb12.png');
}

.b {
  background-image: url(/assets/fcaa0cae8fcd6ecf465971d57fdeff85.jpg);
}

@font-face {
  font-family: 'iconfont'; /* project id 377048 */
  src: url('/assets/34032f039a2b3b449235ba9d307409ec.eot');
  src: url('/assets/34032f039a2b3b449235ba9d307409ec.eot?#iefix') format('embedded-opentype'),
    url('/assets/f7efc431f760b9e8a6125054c5f4a502.woff') format('woff'),
    url('/assets/3a70f449494ab666efaf24b72d563431.ttf') format('truetype'), url('/assets/b1b72dfa538406f3897c40ab412b4183.svg#iconfont')
      format('svg');
}
```

## 注意事项

- 当 `output.publicPath` 设置为 http 网络路径，并且 `forceLocal` 未设置为 `true` 时，插件不工作。

---
_Source: https://npm.io/package/extract-css-assets-webpack-plugin · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._