Порядок css grid-областей меняется, когда я компилирую для распространения.Использование React, Webpack и минификация - PullRequest
Новая
       42

Порядок css grid-областей меняется, когда я компилирую для распространения.Использование React, Webpack и минификация

0 голосов
/ 30 января 2019

Я создаю свой первый веб-сайт для публикации в Интернете с использованием React, веб-пакета и минимизации для распространения.Когда я запускаю свой проект в процессе разработки, он работает просто отлично.Когда я иду к компиляции и минимизации для производства, одна из моих CSS-сеток вышла из строя.Похоже, минимизация изменяет имена областей сетки, что было бы хорошо, но это также меняет порядок областей сетки.

Я гуглил тонну и искал здесь, но не могу найти никого с подобной проблемой.

Вот мой базовый конфиг веб-пакета: 

const path = require('path');
const webpack = require('webpack');
const merge = require("webpack-merge");

const CopyWebpackPlugin = require('copy-webpack-plugin');
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
const HtmlWebpackPlugin = require('html-webpack-plugin');

const APP_DIR = path.resolve(__dirname, '../src');

module.exports = env => {
  const { PLATFORM, VERSION } = env;
  return merge([
      {
        entry: ['@babel/polyfill', APP_DIR],
        module: {
          rules: [
            {
              test: /\.js$/,
              exclude: /node_modules/,
              use: {
                loader: 'babel-loader'
              }
            },
            {
              test: /\.scss$/,
              use: [
                PLATFORM === 'production' ? MiniCssExtractPlugin.loader : 'style-loader',
                'css-loader',
                'sass-loader'
              ]
            },
            {
              test: /\.css$/,
              use: [
                PLATFORM === 'production' ? MiniCssExtractPlugin.loader : 'style-loader',
                'css-loader'
              ]
            },
            {
              test: /\.(png|jpg|gif|ttf|wav)$/,
              use: [
                {
                  loader: 'file-loader',
                  options: {}
                }
              ]
          }
          ]
        },
        plugins: [
          new HtmlWebpackPlugin({
            template: './src/index.html',
            filename: './index.html'
          }),
          new webpack.DefinePlugin({ 
            'process.env.VERSION': JSON.stringify(env.VERSION),
            'process.env.PLATFORM': JSON.stringify(env.PLATFORM),
          }),
          new CopyWebpackPlugin([ { from: 'src/static' } ]),
        ]
    }
  ])
};

и мой рабочий конфигурационный пакет: 

/* eslint-disable */
const merge = require('webpack-merge');
// Plugins
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
const OptimizeCssAssetsPlugin = require('optimize-css-assets-webpack-plugin');
const UglifyJsPlugin = require('uglifyjs-webpack-plugin');
const Visualizer = require('webpack-visualizer-plugin');
const HtmlWebpackPlugin = require('html-webpack-plugin');
// Configs
const baseConfig = require('./webpack.base.config');

const prodConfiguration = env => {
  return merge([
    {
      optimization: {
        // runtimeChunk: 'single',
        // splitChunks: {
        //   cacheGroups: {
        //     vendor: {
        //       test: /[\\/]node_modules[\\/]/,
        //       name: 'vendors',
        //       chunks: 'all'
        //     }
        //   }
        // },
        minimizer: [new UglifyJsPlugin()],
      },
      plugins: [
        new MiniCssExtractPlugin(),
        new OptimizeCssAssetsPlugin(),
        new Visualizer({ filename: './statistics.html' }),
        new HtmlWebpackPlugin({
          title: 'example',
          template: './src/index.html',
          filename: './index.html',
          inject: true,
          minify: {
            collapseWhitespace: true,
            collapseInlineTagWhitespace: true,
            minifyCSS: true,
            minifyURLs: true,
            minifyJS: true,
            removeComments: true,
            removeRedundantAttributes: true
          }
        })
      ],
    },
  ]);
}

module.exports = env => {
  return merge(baseConfig(env), prodConfiguration(env));
}

Любые идеи будут оценены.Пожалуйста, дайте мне знать, если вам нужна дополнительная информация.

...