如何在Webpack中使用ExtractTextPlugin提取CSS？

一、什么是ExtractTextPlugin

ExtractTextPlugin是一个Webpack插件，用于将CSS从打包后的JavaScript文件中提取出来，生成单独的CSS文件。

二、使用ExtractTextPlugin的步骤

下面我们将详细介绍使用ExtractTextPlugin的步骤：

1. 安装ExtractTextPlugin

npm install extract-text-webpack-plugin --save-dev

2. 配置webpack.config.js

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')
  ]
};

3. 构建项目

npm run build

三、示例代码

下面是一个简单的示例代码：

// app.js
import './styles.css';

// styles.css
body {
  background-color: #f5f5f5;
}

通过以上步骤，Webpack会将styles.css文件提取出来，并在生成的HTML文件中引入该CSS文件。

本文为翻滚的胖子原创文章,转载无需和我联系,但请注明来自猿教程iskeys.com

• 上一篇： 如何在Webpack中使用Resolve URL进行路径解析和处理？
• 下一篇： 如何在Webpack中处理字体文件，实现图标字体引入？