webpack4 中使用 MiniCssExtractPlugin 提取 CSS 文件

前言

在前端开发中，CSS 是不可或缺的一部分，但是在项目中，CSS 文件往往会变得非常庞大，这不仅会影响页面加载速度，还会影响开发效率。为了解决这个问题，我们可以使用 webpack 中的 MiniCssExtractPlugin 插件来提取 CSS 文件，减少打包后的体积。

本文将介绍如何使用 webpack4 中的 MiniCssExtractPlugin 插件来提取 CSS 文件，并提供示例代码。

MiniCssExtractPlugin 简介

MiniCssExtractPlugin 是 webpack 中一个用于将 CSS 文件提取为独立文件的插件。与之前使用的 style-loader 不同，MiniCssExtractPlugin 可以将 CSS 文件从 JavaScript 文件中分离出来，减少文件体积，提高页面加载速度。

安装 MiniCssExtractPlugin

在使用 MiniCssExtractPlugin 之前，需要先安装该插件。可以通过 npm 安装，命令如下：

npm install --save-dev mini-css-extract-plugin

配置 webpack.config.js

在 webpack.config.js 中，需要添加 MiniCssExtractPlugin 的配置项，示例代码如下：

const MiniCssExtractPlugin = require('mini-css-extract-plugin');

module.exports = {
  // ...
  module: {
    rules: [
      // ...
      {
        test: /\.css$/,
        use: [
          MiniCssExtractPlugin.loader,
          'css-loader'
        ]
      }
    ]
  },
  plugins: [
    // ...
    new MiniCssExtractPlugin({
      filename: '[name].css',
      chunkFilename: '[id].css'
    })
  ]
};

其中，filename 和 chunkFilename 分别指定输出的 CSS 文件名和 chunk 文件名。

示例代码

下面是一个简单的示例代码，用于提取项目中的 CSS 文件。

index.js

import './style.css';

console.log('Hello World!');

style.css

body {
  background-color: #f5f5f5;
  font-family: Arial, sans-serif;
}

h1 {
  color: #333;
}

webpack.config.js

const path = require('path');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');

module.exports = {
  entry: './src/index.js',
  output: {
    filename: 'bundle.js',
    path: path.resolve(__dirname, 'dist')
  },
  module: {
    rules: [
      {
        test: /\.css$/,
        use: [
          MiniCssExtractPlugin.loader,
          'css-loader'
        ]
      }
    ]
  },
  plugins: [
    new MiniCssExtractPlugin({
      filename: '[name].css',
      chunkFilename: '[id].css'
    })
  ]
};

package.json

{
  "name": "webpack-demo",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "build": "webpack --mode production"
  },
  "devDependencies": {
    "css-loader": "^3.2.0",
    "mini-css-extract-plugin": "^0.8.0",
    "webpack": "^4.41.2",
    "webpack-cli": "^3.3.10"
  }
}

在终端中执行以下命令，即可将项目中的 CSS 文件提取出来：

npm run build

总结

使用 MiniCssExtractPlugin 插件可以有效地将 CSS 文件从 JavaScript 文件中提取出来，减少打包后的体积，提高页面加载速度。本文介绍了如何在 webpack4 中使用 MiniCssExtractPlugin 插件来提取 CSS 文件，并提供了示例代码。希望本文能够对大家在前端开发中使用 webpack 有所帮助。

来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/65c436b0add4f0e0ffeab75a