extract-text-webpack-plugin安装
时间: 2023-09-30 09:10:02 浏览: 52
要使用 `extract-text-webpack-plugin` 插件,你需要先安装它。在安装之前,确保你已经安装了 Node.js 和 npm。
安装 `extract-text-webpack-plugin` 的命令如下:
```
npm install --save-dev extract-text-webpack-plugin
```
安装完成后,在 webpack 的配置文件中引入插件:
```javascript
const ExtractTextPlugin = require('extract-text-webpack-plugin');
```
然后在 `module.rules` 中配置插件的规则:
```javascript
module.exports = {
// ...其它配置项...
module: {
rules: [
// ...其它规则...
{
test: /\.css$/,
use: ExtractTextPlugin.extract({
fallback: 'style-loader',
use: ['css-loader']
})
}
]
},
plugins: [
new ExtractTextPlugin('styles.css')
]
};
```
在上面的代码中,我们将 `ExtractTextPlugin` 实例化并传入一个输出文件名,然后在 `module.rules` 中的 CSS 规则中使用 `ExtractTextPlugin.extract()` 方法来提取 CSS 到单独文件中。注意,我们同时使用了 `style-loader` 和 `css-loader`,这是因为 `ExtractTextPlugin.extract()` 方法要求至少有一个 loader 是非提取 loader(即不会将文件输出到文件系统中),这里我们使用了 `style-loader` 来将 CSS 插入到 HTML 文档中。
以上代码中,我们还需要在 webpack 配置文件的 `plugins` 中添加 `new ExtractTextPlugin('styles.css')`,这个插件将会在构建时将 CSS 提取到指定的输出文件中。
最后,运行 webpack 构建命令,就能够将 CSS 提取到单独的文件中了。