Webpack 4和Atomic CSS问题与生产版本

Question

我有一个使用atomc css（acss.io）的项目，我正在将其从Webpack 1转换为Webpack4。一切都可以在开发版本中正常工作，但是一旦创建了生产版本，它就不会包含所有样式。

我是否缺少某些东西，会导致生产与开发的方式有所不同，以致于样式会丢失？

这是我的webpack.common.js文件：

const path = require('path');
const webpack = require('webpack');
const commonPaths = require('./common-paths');
const atomizerConfig = require('../atomizerConfig');
const jsonImporter = require('node-sass-json-importer');
const autoprefixer = require('autoprefixer');
const miniCssExtractPlugin = require('mini-css-extract-plugin');
const htmlWebpackPlugin = require('html-webpack-plugin');

const { ImageminWebpackPlugin } = require('imagemin-webpack');
const imageminGifsicle = require('imagemin-gifsicle');
const imageminJpegtran = require('imagemin-jpegtran');
const imageminOptipng = require('imagemin-optipng');
const imageminSvgo = require('imagemin-svgo');

const breakPoints = Object.assign({}, atomizerConfig.configs.breakPoints);
Object.keys(breakPoints).forEach(key => (breakPoints[key] = breakPoints[key].replace('@media', '')));

const config = {
  entry: {
    vendors: commonPaths.vendors,
    polyfill: 'babel-polyfill',
    head: commonPaths.headPath,
    app: commonPaths.appEntry,
  },
  output: {
    filename: 'js/[name].[hash].js',
    path: commonPaths.outputPath,
    publicPath: '/'
  },
  module: {
    rules: [
      {
        test: /\.jsx?$/,
        exclude: /(node_modules)/,
        use: [
          {
            loader: 'webpack-atomizer-loader',
            query: {
              postcssPlugins: [autoprefixer],
              configPath: path.resolve('./atomizerConfig.js')
            }
          }
        ]
      },
      {
        test: /\.jsx?$/,
        exclude: /(node_modules)/,
        use: [
          {
            loader: 'babel-loader',
            options: {}
          }
        ]
      },
      {
        test: /\.css$/,
        use: [
          miniCssExtractPlugin.loader,
          'css-loader'
        ]
      },
      {
        test: /\.scss$/,
        exclude: /(node_modules)/,
        use: [
          miniCssExtractPlugin.loader,
          {
            loader: 'css-loader',
            options: {
            }
          },
          {
            loader: 'sass-loader',
            options: {
              importer: jsonImporter
            }
          }
        ]
      },
      {
        test: /\.(woff|woff2)$/,
        use: {
          loader: 'url-loader',
          options: {
            limit: 10000
          }
        }
      },
      {
        test: /\/sprite\/.*\.svg$/,
        use: [
          {
            loader: 'svg-sprite-loader',
            options: {
              name: '[name]',
              prefixize: false
            }
          },
          {
            loader: 'img-loader',
            options: {
              minimize: true
            }
          }
        ]
      },
      {
        test: /\.(jpe?g|gif|png|svg)$/,
        exclude: [/sprite/],
        use: [
          {
            loader: 'file-loader',
            options: {
              name: 'img/[name]_[hash].[ext]'
            }
          },
          {
            loader: 'img-loader',
            options: {
              minimize: true
            }
          }
        ]
      },
      {
        test: /\.(eot|ttf|wav|mp3)$/,
        use: {
          loader: 'file-loader',
          options: {}
        }
      }
    ]
  },
  externals: {
    'react/addons': true,
    'react/lib/ExecutionEnvironment': true,
    'react/lib/ReactContext': true
  },
  plugins: [
    new webpack.DefinePlugin({
      Atomizer: JSON.stringify({ breakPoints })
    }),
    new miniCssExtractPlugin({
      filename: 'css/app.[hash].css'
    }),
    new ImageminWebpackPlugin({
      imageminOptions: {
        plugins: [
          imageminGifsicle({
            interlaced: true
          }),
          imageminJpegtran({
            progressive: false,
            arithmetic: false,
          }),
          imageminOptipng({
            optimizationLevel: 7
          }),
          imageminSvgo({
            removeDoctype: true,
            convertPathData: true,
          })
        ]
      }
    }),
    new htmlWebpackPlugin({
      template: './src/client/index.html',
      inject: false
    }),
  ]
};

module.exports = config;

当前，我的webpack.prod.js文件仅将模式更改为“生产”。