extract-text-webpack-plugin 简书

extract-text-webpack-plugin 简书

extract-text-webpack-plugin 是一个webpack插件，用于将打包后的CSS文件从js文件中独立出来，生成一个单独的CSS文件。

在webpack中，通常将CSS文件打包进JS文件中，然后使用style-loader将CSS注入到HTML页面的header中。但是，这样会导致页面加载速度变慢、缓存问题等等。extract-text-webpack-plugin 可以解决这个问题。

使用 extract-text-webpack-plugin 插件可以将CSS文件独立出来，生成一个单独的CSS文件，从而提高页面加载速度，减少文件大小，优化用户体验。

用法：

1. 安装插件：`npm install extract-text-webpack-plugin --save-dev`。

2. 在webpack配置文件中引入插件。

```。

const ExtractTextPlugin = require('extract-text-webpack-plugin')。

```。

3.配置插件。

```。

plugins: 。

new ExtractTextPlugin('')。

]。

```。

这里的 `` 是生成的独立 CSS 文件的文件名，插件会将所有的 CSS 文件提取到这个文件中。

4. 在loader中使用插件。

在loader中使用插件时，只需要将 `style-loader`

`` 即可。

```。

module: 。

rules: 。

。

test: /.scss$/,。

use: t(。

fallback: "style-loader",。

use: ["css-loader", "sass-loader"]。

})。

}。

]。

替换为

}。

```。

这里的 `sass-loader` 和 `css-loader` 用于编译 SCSS 文件和解析 CSS 文件，而 `` 用于将 CSS 文件提取出来。

使用 `t()` 方法可以将 loader 转换成插件，实现将 CSS 文件独立出来的功能。

使用 extract-text-webpack-plugin 插件可以大大提高页面加载速度，减少文件大小，优化用户体验。因此，在使用 webpack 进行前端开发的过程中，推荐使用该插件来优化工程。