webpack4如何使用MiniCssExtractPlugin提取css到一个文件而不是多个文件？

Question

我正在搭建一个多页面脚手架，就是传统jquery写静态页面那种的，用的webpack4。

我是这样处理页面样式的：所有页面都公用一个style.less（项目不大，不想每个页面一个css文件），然后每个页面的入口文件都import "./less/style.less";。

然后我使用MiniCssExtractPlugin来把样式提取到css文件里，我的插件配置是这样的:

new MiniCssExtractPlugin({
    filename: "./css/[name].[hash:7].css",
    chunkFilename: "[id].css"
}),

编译的结果是：比如有两个页面index和about，就生成了index.css和about.css，但是这两个css文件的内容是一样的。这个我也知道原因，因为我每个入口文件都import了同一个文件，编译出来的自然是一样的。

我现在想要的功能是：只生成一个style.css，然后所有生成的页面都引入style.css。我尝试了下面这样的配置：

new MiniCssExtractPlugin({
    filename: "./css/style.[hash:7].css",
}),

结果编译失败了，好像因为我使用了htmlWebpackPlugin来生成不同的页面，各个页面引入同名的chunk，然后style.css没法跟那些chunk对应上。

请问我应该怎样配置，才能完成我想要的功能：只生成一个style.css，然后所有生成的页面都引入style.css呢？

---

贴上我的配置文件

const path = require("path");
const webpack = require("webpack");
const HtmlWebpackPlugin = require('html-webpack-plugin');
const CleanWebpackPlugin = require("clean-webpack-plugin");
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
const OptimizeCSSAssetsPlugin = require("optimize-css-assets-webpack-plugin");
const UglifyJsPlugin = require("uglifyjs-webpack-plugin");
// 根据环境做不同的配置，这里需要在npm scripts里结合cross-env使用
const devMode = process.env.NODE_ENV !== 'production';

module.exports = {
  entry: {
    index: './src/index.js',
    about: './src/about.js'
  },
  output: {
    filename: 'js/[name].bundle.js',
    path: path.resolve(__dirname, 'dist'),
  },
  module: {
    rules: [{
        test: /\.(less|css)$/,
        use: [{
            // 开发环境不提取css，打包更快
            loader: devMode ? 'style-loader' : MiniCssExtractPlugin.loader,
          },
          {
            loader: 'css-loader'
          },
          {
            loader: 'postcss-loader'
          },
          {
            loader: 'less-loader'
          }
        ]
      },
      {
        test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,
        use: [{
          loader: "url-loader",
          options: {
            limit: 1000,
            name: './img/[hash:7].[ext]',
          }
        }]
      },
      {
        test: /\.(htm|html)$/i,
        use: [{
          loader: 'html-withimg-loader'
        }]
      },
      {
        test: require.resolve('jquery'),
        use: [{
          loader: 'expose-loader',
          options: 'jQuery'
        }, {
          loader: 'expose-loader',
          options: '$'
        }]
      },
      {
        test: /\.js$/,
        include: './src/',
        exclude: ['./src/vendor', './node_modules'],
        use: ['babel-loader']
      }
    ]
  },
  optimization: {
    minimize: true,
    minimizer: [
      new UglifyJsPlugin({
        cache: true,
        parallel: true,
        sourceMap: true
      }),
      new OptimizeCSSAssetsPlugin({})
    ],
    splitChunks: {
      cacheGroups: {
        vendor: {
          // test: /\.js$/,
          test: /[\\/]node_modules[\\/]/,
          chunks: "all", 
          name: "vendor",
          enforce: true,
        }
      }
    }
  },
  plugins: [
    new HtmlWebpackPlugin({
      template: path.resolve('./src/pages', './index.html'),
      filename: 'index.html',
      chunks: ['vendor', 'index'],
      hash: true,
      minify: {
        removeComments: false,
        collapseWhitespace: false
      }
    }),
    new HtmlWebpackPlugin({
      template: path.resolve('./src/pages', './about.html'),
      filename: 'about.html',
      chunks: ['vendor', 'about'],
      hash: true,
      minify: {
        removeComments: false,
        collapseWhitespace: false
      }
    }),
    new webpack.NamedModulesPlugin(),
    new webpack.HotModuleReplacementPlugin(),
    new CleanWebpackPlugin(['dist']),
    new webpack.ProvidePlugin({
      $: 'jquery',
      jQuery: 'jquery',
      'window.jQuery': 'jquery',
      'window.$': 'jquery',
    }),
    new MiniCssExtractPlugin({
      filename: "./css/[name].[hash:7].css",
      chunkFilename: "[id].css"
    }),
  ]
}

Answer 1

你可以配置optimization,把你想要抽取的css，js，甚至是公用图片都抽取出来，例如：

optimization: {
    runtimeChunk: {
      name: 'manifest'
    },
    splitChunks: {
      maxInitialRequests: 10,
      cacheGroups: {       
        vendor: {
          test: /(jquery|fastclick|vue.esm.js)/,
          name: 'vendor',
          chunks: 'all'
        },        
        common: {
          test: /(\.(png|jpe?g|gif|svg))/,
          name: 'app',
          chunks: 'initial',
          minChunks: 10
        },
        app: {
          test: /(css[\\/]style.css)/,
          name: 'app',
          chunks: 'initial',
          minChunks: 1
        }
      }
    }
  },