Question

直到现在，我一直在使用 extract-text-webpack-plugin 和 webpack 3 制作两个捆绑文件。一种是当地风格，另一种是全球风格。

因此，在全局样式文件中，我们将从引导程序，语义...中提取css，而在本地样式捆绑中，我们将放置自己的样式。

这两个文件都将具有 contenthash ，因此，例如，如果我更改本地样式的某些内容并重建应用程序，则仅更改来自本地样式的哈希而不更改来自全局样式的哈希。

更新到Webpack 4后，需要使用mini-css-extract-plugin代替extract-text-webpack-plugin。

这是我到目前为止的设置。我正在尝试不同的方法，但是我不知道如何打开mini-css-extract-plugin的设置？

const ExtractTextPlugin = require('extract-text-webpack-plugin')

const ExtractLocal = new ExtractTextPlugin({
  filename: 'stylesheet/stylesLocal.[contenthash].local.css',
  disable: false,
  allChunks: true,
})
const ExtractGlobal = new ExtractTextPlugin({
  filename: 'stylesheet/stylesGlobal.[contenthash].css',
  disable: false,
  allChunks: true,
})


module.exports = {
  module: {
    rules: [
      /* Local styles */
      {
        test: /\.local\.(css|scss)$/,
        use: ExtractLocal.extract({
          use: [
            {
              loader: 'css-loader',
              options: {
                sourceMap: true,
                minimize: true,
                modules: true,
                importLoaders: 1,
                localIdentName: '[local]___[name]__[hash:base64:5]',
              },
            },
           ...
          ],
        }),
      },
      /* Global styles */
      {
        test: /^((?!\.local).)+\.(css)$/,
        use: ExtractGlobal.extract({
          use: [
            {
              loader: 'css-loader',
              options: {
                sourceMap: true,
                minimize: true,
              },
            },
          ],
        }),
      },
    ],
  },
  plugins: [
    ExtractLocal,
    ExtractGlobal,
   ...
  ],
}

Answer 1

您的css装载机是正确的。

在插件中，我看到您想使用mini-css来实现它以提取多个CSS文件。

虽然绝对是一个选项，但我成功使用webpack Optimization选项实现了它，并且插件中只有1个mini-css。

输出配置：

  output: {
    path: appConfig.paths.appBuild,
    filename: 'scripts/[name].[chunkhash:8].js',
    chunkFilename: 'scripts/[name].[chunkhash:8].chunk.js',
    publicPath: publicPath,
  },

仅适用于节点模块样式的其他css规则（我将其作为第一个css规则，之后是其他规则）：

 {
    test: /\.(css|scss)$/,
    include: /(node_modules)/,
    use: [
      MiniCssExtractPlugin.loader,
      { loader: 'css-loader', options: { sourceMap: true } },
      { loader: 'sass-loader', options: { sourceMap: true } },
    ],
  },

优化配置：（这还将提取供应商js。）

  optimization: {
    splitChunks: {
      cacheGroups: {
        commons: {
          test: /[\\/]node_modules[\\/]/,
          name: 'vendors',
          chunks: 'all',
        },
      },
    },
  },

插件配置：

new MiniCssExtractPlugin({
  filename: 'styles/[name].[contenthash].css',
  chunkFilename: 'styles/[name].[contenthash].css',
}),

使用mini-css-extract-plugin提取本地和全局样式

1 个答案: