MiniCssExtractPlugin:是一个后处理插件,可以在 Webpack 打包之后,将 CSS 样式从 bundle 中提取出来生成独立的 CSS 文件,并将其引入到 HTML 中。
- 安装 MiniCssExtractPlugin 插件:
npm install mini-css-extract-plugin --save-dev
。 - 新建
src/index.css
,并编写代码。// src/index.css .container { width: 100%; height: 100%; background: 'red'; }
- 新建
src/index.js
,并编写代码。// src/index.js import './index.css'
- 在 Webpack 配置文件中进行配置。
// webpack.config.js const MiniCssExtractPlugin = require('mini-css-extract-plugin') module.exports = { module: { rules: [ // 使用 MiniCssExtractPlugin.loader 和 css-loader 转换 css 文件 { test: /\.css$/, use: [MiniCssExtractPlugin.loader, 'css-loader'], } ] }, plugins: [ // 使用 MiniCssExtractPlugin 将 css 抽取到打包输出的文件夹下的 css 文件夹下单独的文件中 new MiniCssExtractPlugin({ filename: 'css/[name].css', }) ] }
- 运行
webpack
命令进行打包,会发现,CSS 文件被打包为了单独的文件。