Webpack 配置未压缩所有 CSS 库答案

【问题标题】：Webpack config not compressing all css librariesWebpack 配置未压缩所有 CSS 库
【发布时间】：2018-12-22 03:49:50
【问题描述】：

查看我的 react 应用程序，我正在使用 ant design、normalize 和其他一些 CSS 库来轻松创建组件并使用预定义样式。但是由于某种原因，我的 webpack 配置没有将这些正确压缩到一个主 CSS 文件中。而是添加<head></head> 之间的所有样式。 http://take.ms/7a4o2

我的 webpack 可以在这里找到： gist.github.com/martinsoender/dd978c9defc298889454b0035e2389cb

【问题讨论】：

你的 webpack 配置是什么样的？

标签： reactjs webpack react-redux webpack-style-loader

【解决方案1】：

这取决于你的配置，很多配置使用 style-loader[1] 和 css-loader[0]。

css-loader 添加.css 作为支持的扩展，发射文件以供输出。样式加载器注入样式元素。同样，您可能有一个 css-in-js 或类似的工具。

样式加载器通常用于开发，而另一个用于 text/css 的合并/组合加载器用于生产构建。 YMMV。

[0]https://www.npmjs.com/package/css-loader

[1]https://www.npmjs.com/package/style-loader

【讨论】：

谢谢！我发现问题来自我的样式加载器的声明。

【解决方案2】：

要压缩/缩小您的 CSS，请使用 optimize-css-assets-webpack-plugin。

在您的配置中，所有样式都添加到<head>，因为style-loader，通过将其设置为ExtractTextPlugin 中的后备，一个名为bundle.css 的css 文件应该可以正确输出。

如果你使用 Webpack 3，这个配置应该可以工作（我在下面的 sn-p 中添加了两个 cmets）：

const webpack = require('webpack');
const ExtractTextPlugin = require('extract-text-webpack-plugin');
const OptimizeCssAssetsPlugin = require('optimize-css-assets-webpack-plugin');

module.exports = {
  devtool: 'cheap-module-eval-source-map',
  entry: [
    'bootstrap-loader',
    'webpack-hot-middleware/client',
    './src/index'
  ],
  output: {
    publicPath: '/dist/'
  },
  module: {
    rules: [
      {
        test: /\.scss$/,
        use: ExtractTextPlugin.extract({
          fallback: 'style-loader',
          use: [
            {
              loader: 'css-loader',
              options: {
                sourceMap: true,
                localIdentName: '[path][name]--[local]'
              }
            },
            {
              loader: 'postcss-loader',
              options: { sourceMap: true }
            },
            {
              loader: 'sass-loader',
              options: { sourceMap: true }
            }
          ]
        })
      }
    ]
  },
  plugins: [
    new webpack.DefinePlugin({
      'process.env': {
          NODE_ENV: '"development"',
      },
      __DEVELOPMENT__: true
    }),
    new ExtractTextPlugin('bundle.css'),
    new webpack.optimize.OccurenceOrderPlugin(),
    new webpack.HotModuleReplacementPlugin(),
    new webpack.NoErrorsPlugin(),
    new webpack.ProvidePlugin({
        jQuery: 'jquery'
    }),
    new OptimizeCSSAssetsPlugin({ // minify css
      cssProcessorOptions: { // enable css external source maps output, you must set devtool: 'source-map'
        map: {
          inline: false,
          annotation: true
        }
      }
    })
  ]
};

【讨论】：