mini-css-extract-plugin在webpack4中代替extract-text-webpack-plugin，此插件是將 CSS 樣式提取到單獨的文件中。 它為每個包含 CSS 的 JS 文件創(chuàng)建一個 CSS 文件。即通過 JS 文件中import進來的樣式文件。它支持CSS和SourceMaps的按需加載。

是建立在新的webpack v4功能（模塊類型）之上，并且需要在webpack 4版本才能工作。

相比extract-text-webpack-plugin：

• 異步加載
• 沒有重復的編譯（性能）
• 更容易使用
• 特定于CSS

基本配置如下（webpack.config.js）：

const MiniCssExtractPlugin = require('mini-css-extract-plugin');
module.exports = {
  plugins: [
    new MiniCssExtractPlugin({
      filename:  '[name].css',
      chunkFilename: '[id].css'
    }),
  ],
  module: {
    rules: [
      {
          test: /\.css$/,
        use: [
          {
            loader: MiniCssExtractPlugin.loader,
            options: {
              // 公共路徑
              // 默認情況下，使用的是webpackOptions.output中publicPath
              publicPath: '../',
              //開發(fā)環(huán)境配置熱更新
              hmr: process.env.NODE_ENV === 'development',
            },
          },
          'css-loader',
      }
    ]
  }
}

高級配置如下（既可以在開發(fā)中使用 HMR，也可以在生成版本的文件中提取樣式）：

//webpack.config.js
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const devMode = process.env.NODE_ENV !== 'production';

module.exports = {
  plugins: [
    new MiniCssExtractPlugin({
      filename: devMode ? '[name].js' : '[name].[hash].css',
      chunkFilename: devMode ? '[id].css' : '[name].[hash].css',
    });
  ],
  module: {
    rules: [
      {
        test: /\.(sa|sc|c)ss$/,
        use: [
          {
            loader: MiniCssExtractPlugin.loader,
            options: {
              hmr: process.env.NODE_ENV === ‘development’
            }
          },
          'css-loader',
          'postcss-loader',
          'sass-loader'
        ]
      }
    ]
  }
}

生產(chǎn)環(huán)境優(yōu)化壓縮（production）
縮小輸出，要使用像optimize-css-assets-webpack-plugin這樣的插件。 設置optimization.minimizer會覆蓋 webpack 提供的默認值，因此確保要指定JS minimalizer：

//webpack.config.js
const UglifyJsPlugin = require('uglifyjs-webpack-plugin');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const OptimizeCSSAssetsPlugin = require('optimize-css-assets-webpack-plugin');
module.exports = {
  optimization: {
    minimizer: [new UglifyJsPlugin({
      include: /\/src/,
      exclude: /\/excludes/,
      cache: true,
      sourceMap: true,
      parallel: true,//多進程并行運行
      comments: false, //禁止構建注釋
    }), new OptimizeCSSAssetsPlugin({})],
  },
  plugins: [
    new MiniCssExtractPlugin({
      filename: '[name].css',
      chunkFilename: '[id].css',
    }),
  ],
  module: {
    rules: [
      {
        test: /\.css$/,
        use: [MiniCssExtractPlugin.loader, 'css-loader'],
      },
    ],
  },
};

將所有 CSS 樣式提取到單個文件中，與extract-text-webpack-plugin類似，可以使用optimization.splitChunks.cacheGroups。

//webpack.config.js
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
module.exports = {
  optimization: {
    splitChunks: {
      cacheGroups: {
        styles: {
          name: 'styles',
          test: /\.css$/,
          chunks: 'all',
          enforce: true,
        },
      },
    },
  },
  plugins: [
    new MiniCssExtractPlugin({
      filename: '[name].css',
    }),
  ],
  module: {
    rules: [
      {
        test: /\.css$/,
        use: [MiniCssExtractPlugin.loader, 'css-loader'],
      },
    ],
  },
};

還可以根據(jù) webpack 的 entry name 來提取CSS，這對你動態(tài)引入路由，卻想依據(jù) entry 保存打包的 CSS 的情況十分有用。這也解決了 ExtractTextPlugin 中 CSS 重復的問題。

//webpack.config.js
const path = require('path');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
function recursiveIssuer(m) {
  if (m.issuer) {
    return recursiveIssuer(m.issuer);
  } else if (m.name) {
    return m.name;
  } else {
    return false;
  }
}
module.exports = {
  entry: {
    foo: path.resolve(__dirname, 'src/foo'),
    bar: path.resolve(__dirname, 'src/bar'),
  },
  optimization: {
    splitChunks: {
      cacheGroups: {
        fooStyles: {
          name: 'foo',
          test: (m, c, entry = 'foo') =>
            m.constructor.name === 'CssModule' && recursiveIssuer(m) === entry,
          chunks: 'all',
          enforce: true,
        },
        barStyles: {
          name: 'bar',
          test: (m, c, entry = 'bar') =>
            m.constructor.name === 'CssModule' && recursiveIssuer(m) === entry,
          chunks: 'all',
          enforce: true,
        },
      },
    },
  },
  plugins: [
    new MiniCssExtractPlugin({
      filename: '[name].css',
    }),
  ],
  module: {
    rules: [
      {
        test: /\.css$/,
        use: [MiniCssExtractPlugin.loader, 'css-loader'],
      },
    ],
  },
};

特別注意：

For long term caching use filename: "[contenthash].css". Optionally add [name].
需要使用長緩存的，命名要使用 contenthash，如果直接使用 hash 的話，在 js 有改動，樣式?jīng)]有變動的情況下，css 會被重新打包生成新的 hash 值，這顯然不是我們想要的，所以這里生產(chǎn)環(huán)境用 contenthash，確保 css 文件在沒有改動的情況下，使用緩存文件。
參考：
https://www.npmjs.com/package/mini-css-extract-plugin