Webpack 插件 extract-text-webpack-plugin 使用及安装详解
插件简介
extract-text-webpack-plugin 是一个用于 webpack 的插件，主要用来抽离 CSS 样式，防止将样式打包在 JS 中引起页面样式加载错乱的现象。
插件安装
要安装 extract-text-webpack-plugin，需要使用 npm 或 yarn 进行安装。对于不同的 webpack 版本，安装命令如下：
* 对于 webpack 2：`npm install extract-text-webpack-plugin --save-dev`
* 对于 webpack 1：`npm install --save-dev extract-text-webpack-plugin`
* 对于特定版本的 webpack 1：`npm install --save-dev [email protected]`
插件配置
在安装完成后，需要在 webpack 配置文件中引入该插件。下面是一个基本的配置示例：
```javascript
const ExtractTextPlugin = require("extract-text-webpack-plugin");
module.exports = {
module: {
rules: [
{
test: /\.css$/,
use: ExtractTextPlugin.extract({
fallback: "style-loader",
use: "css-loader"
})
}
]
},
plugins: [
new ExtractTextPlugin("styles.css")
]
};
```
在上面的配置中，我们引入了 ExtractTextPlugin，并将其作为插件添加到 webpack 配置中。然后，我们配置了一个规则，用于将 `.css` 文件编译成独立的 CSS 文件。
多实例配置
如果我们需要将不同的样式文件编译成独立的 CSS 文件，可以使用多实例的方式。例如：
```javascript
const ExtractTextPlugin = require('extract-text-webpack-plugin');
const extractCSS = new ExtractTextPlugin('stylesheets/[name]-one.css');
const extractLESS = new ExtractTextPlugin('stylesheets/[name]-two.css');
module.exports = {
module: {
rules: [
{
test: /\.css$/,
use: extractCSS.extract([
'css-loader',
'postcss-loader'
])
},
{
test: /\.less$/i,
use: extractLESS.extract([
'css-loader',
'less-loader'
])
}
]
},
plugins: [
extractCSS,
extractLESS
]
};
```
在上面的配置中，我们创建了两个实例 `extractCSS` 和 `extractLESS`，每个实例都用于编译不同的样式文件。
插件参数
extract-text-webpack-plugin 插件有三个参数：
1. `use`: 指需要什么样的 loader 去编译文件。在上面的示例中，我们使用 `css-loader` 来编译 `.css` 文件。
2. `fallback`: 编译后用什么 loader 来提取 CSS 文件。在上面的示例中，我们使用 `style-loader` 来提取 CSS 文件。
3. `publicfile`: 用来覆盖项目路径，生成该 CSS 文件的文件路径。在上面的示例中，我们使用 `styles.css` 作为输出文件名。
extract-text-webpack-plugin 插件可以帮助我们将 CSS 样式抽离出来，避免了样式打包在 JS 中引起的页面样式加载错乱的问题。
