Webpack 4迁移：mini-css-extract-plugin替代ExtractTextPlugin等价写法

针对你从extract-text-webpack-plugin迁移到mini-css-extract-plugin的需求，对应的等价代码如下：

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

// ... 其他配置代码

if (options.extract) {
  // 替换为MiniCssExtractPlugin的loader，直接加入loader链
  return [MiniCssExtractPlugin.loader].concat(loaders);
} else {
  // 开发环境保持vue-style-loader的用法不变
  return ['vue-style-loader'].concat(loaders);
}

关键差异说明 #

1. API设计不同：mini-css-extract-plugin不再需要extract()方法包裹整个loader配置，而是直接将其提供的MiniCssExtractPlugin.loader作为loader链的第一个元素，替代原方案中ExtractTextPlugin.extract()的作用。
2. fallback参数移除：因为在extract模式下，我们直接用MiniCssExtractPlugin.loader替换了vue-style-loader，不需要再指定fallback选项。

额外配置要点 #

• 安装依赖：确保已经安装插件：

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

• 添加插件实例：在Webpack配置的plugins数组中加入：

  plugins: [
    new MiniCssExtractPlugin({
      // 根据你的需求配置文件名，比如带哈希值的生产环境配置
      filename: process.env.NODE_ENV === 'production' ? '[name].[contenthash].css' : '[name].css'
    })
  ]
  

• 开发环境建议：mini-css-extract-plugin不支持热模块替换（HMR），所以只在生产环境开启options.extract，开发环境继续使用vue-style-loader以获得HMR支持。
• loader链保持不变：你原有的loaders数组（比如包含css-loader、postcss-loader等）无需修改，直接拼接即可。

内容的提问来源于stack exchange，提问作者Hanxue