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

一、什么是ExtractTextPlugin

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

二、使用ExtractTextPlugin的步骤

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

1. 安装ExtractTextPlugin

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

2. 配置webpack.config.js

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
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. 构建项目

1
npm run build

三、示例代码

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

1
2
3
4
5
6
7
// app.js
import './styles.css';
 
// styles.css
body {
  background-color: #f5f5f5;
}

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

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

猿教程
请先登录后发表评论
  • 最新评论
  • 总共0条评论