extract-css-assets-webpack-plugin

npmpackage.info

Gathering detailed insights and metrics for extract-css-assets-webpack-plugin

Other packages similar to extract-css-assets-webpack-plugin

optimize-css-assets-webpack-plugin

6.0.1

A Webpack plugin to optimize \ minimize CSS assets.

optimize-css-assets-webpack-plugin-temp

1.3.2

A Webpack plugin to optimize \ minimize CSS assets.

eaipsam

1.3.0

The pug plugin to handle the pug, html, css, scss files in webpack entry and extract css from pug.

callisto-mini-css-extract-plugin-optimize-css-assets-webpack-plugin-janus

1.2.3

Adexe Created Npm Publish store to check for the client purpose Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris

Gathering detailed insights and metrics for extract-css-assets-webpack-plugin

Usage

1import MiniCssExtractPlugin from 'mini-css-extract-plugin'; 2import ExtractCssAssetsPlugin from 'extract-css-assets-webpack-plugin'; 3 4module.exports = { 5 entry: './index', 6 output: { 7 publicPath: '/', 8 }, 9 module: { 10 rules: [ 11 { 12 test: /\.(png|jpg|gif)$/, 13 use: [ 14 { 15 loader: 'url-loader', 16 options: { 17 limit: 8192, 18 name: 'assets/[hash].[ext]', 19 }, 20 }, 21 ], 22 }, 23 { 24 test: /\.css$/, 25 use: [MiniCssExtractPlugin.loader, 'css-loader'], 26 }, 27 ], 28 }, 29 plugins: [ 30 new MiniCssExtractPlugin({ 31 filename: 'css/[name].css', 32 chunkFileName: 'css/[id].css', 33 }), 34 new ExtractCssAssetsPlugin({ 35 outputPath: 'assets/', 36 relativeCssPath: '../', // 由于创建了 css 目录则生成的图片相对于 css 目录则为 `'../'` 37 }), 38 ], 39};

input:

1body { 2 color: red; 3 background-image: url(//img.alicdn.com/tfs/TB1zSOZrFGWBuNjy0FbXXb4sXXa-1024-1024.png); 4} 5 6.b { 7 background-image: url('./img.jpg'); 8} 9 10@font-face { 11 font-family: 'iconfont'; /* project id 377048 */ 12 src: url('//at.alicdn.com/t/font_377048_kjcjjyweu4sra4i.eot'); 13 src: url('//at.alicdn.com/t/font_377048_kjcjjyweu4sra4i.eot?#iefix') format('embedded-opentype'), 14 url('//at.alicdn.com/t/font_377048_kjcjjyweu4sra4i.woff') format('woff'), 15 url('//at.alicdn.com/t/font_377048_kjcjjyweu4sra4i.ttf') format('truetype'), 16 url('//at.alicdn.com/t/font_377048_kjcjjyweu4sra4i.svg#iconfont') format('svg'); 17}

output:

1body { 2 color: red; 3 background-image: url('/assets/cd7e3c88d4211a9b0b2335d1e417bb12.png'); 4} 5 6.b { 7 background-image: url(/assets/fcaa0cae8fcd6ecf465971d57fdeff85.jpg); 8} 9 10@font-face { 11 font-family: 'iconfont'; /* project id 377048 */ 12 src: url('/assets/34032f039a2b3b449235ba9d307409ec.eot'); 13 src: url('/assets/34032f039a2b3b449235ba9d307409ec.eot?#iefix') format('embedded-opentype'), 14 url('/assets/f7efc431f760b9e8a6125054c5f4a502.woff') format('woff'), 15 url('/assets/3a70f449494ab666efaf24b72d563431.ttf') format('truetype'), url('/assets/b1b72dfa538406f3897c40ab412b4183.svg#iconfont') 16 format('svg'); 17}

Other packages similar to extract-css-assets-webpack-plugin

Other packages similar to extract-css-assets-webpack-plugin

Installations

Developer Guide

No

CommonJS

12.22.12

6.14.16

Pull Requests

20

3,840

353

3,467

Issues

338

3,196

2,858

Releases

Languages

Developer

Download Statistics

GitHub Statistics

Maintainers

Package Meta Information

Total Downloads

NaN

Weekly Downloads

Monthly Downloads

Yearly Downloads

Dependencies

Dev Dependencies

extract-css-assets-webpack-plugin

Required

Options

Usage

注意事项

10

10

10

10

9

2

0

0

0

0

0

0

4.9

/10