1

到目前为止，我一直在使用extract-text-webpack-plugin和webpack 3制作两个捆绑文件。一种用于本地样式，一种用于全局样式。

因此，在全局样式文件中，我们将从 bootstrap、语义等中提取 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,
   ...
  ],
}
4

1 回答 1

0

你的css装载机是正确的。

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

虽然它绝对是一个选项，但我成功地使用 webpack 优化选项实现了它，并且插件中只有 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',
}),
于 2018-08-21T13:32:51.723 回答