How to use the loader function from mini-css-extract-plugin

Find comprehensive JavaScript mini-css-extract-plugin.loader code examples handpicked from public code repositorys.

The mini-css-extract-plugin.loader extracts CSS into separate files during the Webpack build process.

webpack.config.js

GitHub: ActiveLearningStudio/H5P.Distribution

26
27
28
29
30
31
32
33
34
35
{
  test:/\.(s*)css$/,
  include: path.resolve(__dirname, 'scripts'),
  use: [
    {
      loader: isDev ? 'style-loader' : MiniCssExtractPlugin.loader
    },
    'css-loader',
    'sass-loader'
  ]

webpack.config.js

GitHub: ux-mind/ptp-compilance-test

168
169
170
171
172
173
174
175
176
177
},
{
	test: /\.css$/i, //for css
	use: [
		{
			loader: MiniCssExtractPlugin.loader
			// options: {
			// 	hmr: isDev //hot model reloading - updates without page reload
			// }
		},

How does mini-css-extract-plugin.loader work?

mini-css-extract-plugin.loader is a Webpack loader used to extract CSS from JavaScript bundles and create separate CSS files. It works by loading the CSS as a separate module, and then extracting it to a file using the MiniCssExtractPlugin.

webpack.prod.js

GitHub: vincentCheng/my-react

0
1
2
3
4
5
6
7
8
9
10
/**
 * 生产环境寻求兼容性更高，尽可能和开发环境看到相同效果。
 */
const { merge } = require('webpack-merge')
const MiniCssExtractPlugin = require('mini-css-extract-plugin')
const _loader = MiniCssExtractPlugin.loader
const common = require('./webpack.common')
const TerserPlugin = require('terser-webpack-plugin')


const config = merge(common, {

vue-webpack.conf.js

GitHub: ustbhuangyi/better-scroll

87
88
89
90
91
92
93
94
95
96
.test(/\.css$/)
.use('style-loader')
  .loader(
    process.env.NODE_ENV !== 'production' ?
    'vue-style-loader' :
    MiniCssExtractPlugin.loader
  )
  .end()
.use('css-loader')
  .loader('css-loader')

259

+ 3 other calls in file

Ai Example

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
const MiniCssExtractPlugin = require("mini-css-extract-plugin");

module.exports = {
  // other webpack config options...
  module: {
    rules: [
      {
        test: /\.css$/,
        use: [MiniCssExtractPlugin.loader, "css-loader"],
      },
    ],
  },
  plugins: [
    new MiniCssExtractPlugin({
      filename: "[name].[contenthash].css",
    }),
  ],
};

This configuration tells webpack to use mini-css-extract-plugin.loader to extract CSS into a separate file, and then use css-loader to process the CSS code. The extracted CSS will be saved in a separate file with a filename that includes the content hash of the CSS code, to ensure that the filename changes when the CSS changes.

Other functions in mini-css-extract-plugin

Sorted by popularity

mini-css-extract-plugin.loader is the most popular function in mini-css-extract-plugin (7 examples)

Other popular packages:

Home

About