Javascript 为什么Webpack 4缩小会阻止react select组件的样式？

我有一个React项目，该项目由Webpack捆绑并由提供。在这个项目中，我使用

从中选择
组件。当使用Webpack 3时，一切正常。升级到Webpack 4后，在
development
模式下，一切都能正常工作。但是，当我在
production
模式下构建时，来自
react Select
的
Select
组件没有应用任何样式

（我没有足够的声誉点数来发布图片，因此我将提供图片链接。）

以下是内置于
开发
模式时选择器的外观


下面是在
生产模式下内置的选择器的外观


不应用样式的原因是
react-select
使用，css被注入样式表的头部

以下是处于
开发
模式时头部的一个示例


在
生产
模式下，这些
样式
标记在
头部
中都不存在

我已经把它缩小到一个事实，这似乎是由网页缩小步骤造成的。如果我加上

optimization: {
  minimize: false
}

到我的
webpack.config.js
，则样式在
生产模式下出现

这是我的
webpack.config.js
，没有添加
优化
：

const webpack = require('webpack');
const pathLib = require('path');

const devBuild = process.env.NODE_ENV !== 'production';

const config = {
  entry: [
    'es5-shim/es5-shim',
    'es5-shim/es5-sham',
    'babel-polyfill',
    './app/bundles/analytic',
    './app/bundles/Pulse/startup/registration',
  ],
  output: {
    filename: 'webpack-bundle.js',
    path: pathLib.resolve(__dirname, '../app/assets/webpack'),
  },
  devtool: "source-map",
  resolve: {
    extensions: [".ts", ".tsx", '.js', '.jsx'],
  },
  plugins: [
    new webpack.EnvironmentPlugin({ NODE_ENV: 'development' }),
  ],
  module: {
    rules: [
      {
        test: /travel-info-type.ts/,
        use: [{
          loader: 'expose-loader',
          options: 'TravelInfoType'
        }]
      },
      {
        test: /heatmap-getter.ts/,
        use: [{
          loader: 'expose-loader',
          options: 'HeatmapGetter'
        }]
      },
      {
        test: /data-hub.ts/,
        use: [{
          loader: 'expose-loader',
          options: 'DataHub'
        }]
      },
      {
        test: /exported-functions.js/,
        use: [{
          loader: 'expose-loader',
          options: 'ExportedFunctions'
        }]
      },
      {
        test: /analyticsTracker.ts/,
        use: [{
          loader: 'expose-loader',
          options: 'analyticsTracker'
        }]
      },
      {
        test: /railsAnalytics.js/,
        use: [{
          loader: 'expose-loader',
          options: 'railsAnalytics'
        }]
      },
      {
        test: require.resolve('react'),
        use: {
          loader: 'imports-loader',
          options: {
            shim: 'es5-shim/es5-shim',
            sham: 'es5-shim/es5-sham',
          }
        },
      },
      {
        test: /\.(woff|woff2|eot|ttf|svg|gif|png)$/,
        use: [{
          loader: 'url-loader'
        }],
      },
      {
        test: /\.jsx?$/,
        use: 'babel-loader',
        exclude: /node_modules/,
      },
      // All files with a '.ts' or '.tsx' extension will be handled by 'ts-loader'.
      { test: /\.tsx?$/, loader: "ts-loader" },

      // All output '.js' files will have any sourcemaps re-processed by 'source-map-loader'.
      { enforce: "pre", test: /\.js$/, loader: "source-map-loader" },
      // Extract css files
      {
        test: /\.css$/,
        use: ['style-loader', 'css-loader'],
      },
      {
        test: /\.scss$/,
        use: [ "style-loader", "css-loader", "sass-loader" ],
      },
    ],
  },
};

module.exports = config;

if (devBuild) {
  console.log('Webpack dev build for Rails'); // eslint-disable-line no-console
  module.exports.devtool = 'eval-source-map';
} else {
  console.log('Webpack production build for Rails'); // eslint-disable-line no-console
}


这是我的
package.json

{
  "name": "myProject",
  "version": "0.0.1",
  "private": true,
  "scripts": {
    "build:test": "webpack --config webpack.config.js",
    "build:production": "NODE_ENV=production webpack --mode=production --config webpack.config.js",
    "build:development": "webpack --mode=development -w --config webpack.config.js",
    "test": "jest",
    "test:watch": "yarn test --watch",
    "storybook": "start-storybook -p 6006",
    "build-storybook": "build-storybook -o ../public/storybook"
  },
  "cacheDirectories": [
    "node_modules",
    "client/node_modules"
  ],
  "dependencies": {
    "actioncable": "^5.2.0",
    "color-convert": "^1.9.0",
    "es5-shim": "^4.5.9",
    "expose-loader": "^0.7.3",
    "imports-loader": "^0.7.1",
    "js-cookie": "^2.2.0",
    "moment": "^2.18.1",
    "prop-types": "^15.5.7",
    "rc-slider": "^8.6.7",
    "react": "^16.7.0",
    "react-dom": "^16.7.0",
    "react-on-rails": "6.9.3",
    "react-onclickoutside": "^5.11.1",
    "react-redux": "^6.0.0",
    "react-router-dom": "^4.1.1",
    "react-select": "^2.3.0",
    "react-table": "^6.0.5",
    "react-toggle-switch": "^2.1.3",
    "react-tooltip": "^3.6.1",
    "redux": "^4.0.1",
    "redux-batched-actions": "^0.2.0",
    "redux-thunk": "^2.3.0",
    "rxjs": "5.5.2"
  },
  "devDependencies": {
    "@storybook/addon-knobs": "^3.4.11",
    "@storybook/addons": "^3.4.11",
    "@storybook/react": "^3.4.11",
    "@types/actioncable": "^0.0.2",
    "@types/bugsnag": "^2.5.28",
    "@types/google-maps": "^3.2.0",
    "@types/googlemaps": "^3.26.11",
    "@types/highcharts": "^4.2.55",
    "@types/jest": "23.3.10",
    "@types/jquery": "^2.0.45",
    "@types/js-cookie": "^2.2.0",
    "@types/lodash": "^4.14.118",
    "@types/moment": "^2.13.0",
    "@types/rc-slider": "^8.6.3",
    "@types/react": "^16.8.1",
    "@types/react-dates": "^16.0.5",
    "@types/react-dom": "16.0.11",
    "@types/react-redux": "^7.0.1",
    "@types/react-router": "^4.0.26",
    "@types/react-router-dom": "^4.2.7",
    "@types/react-select": "^2.0.11",
    "@types/react-tooltip": "^3.3.5",
    "ts-loader": "^5.3.3",
    "babel-cli": "^6.23.0",
    "babel-core": "^6.23.1",
    "babel-loader": "^7.1.5",
    "babel-polyfill": "^6.23.0",
    "babel-preset-es2015": "^6.22.0",
    "babel-preset-react": "^6.23.0",
    "babel-preset-stage-2": "^6.22.0",
    "babel-runtime": "^6.23.0",
    "css-loader": "^0.28.0",
    "enzyme": "^3.8.0",
    "enzyme-adapter-react-16": "^1.9.0",
    "highcharts": "^6.0.3",
    "jest": "23.3.0",
    "jquery": "^3.2.1",
    "jsdom": "^10.0.0",
    "node-sass": "^4.9.3",
    "react-test-renderer": "^16.7.0",
    "redux-mock-store": "^1.2.3",
    "sass-loader": "^7.1.0",
    "sinon": "^2.4.1",
    "source-map-loader": "^0.2.1",
    "storybook-addon-jsx": "^5.4.0",
    "style-loader": "^0.16.1",
    "ts-jest": "23.10.5",
    "typescript": "^3.0.1",
    "url-loader": "^1.1.2",
    "webpack": "^4.29.5",
    "webpack-cli": "^3.2.3"
  }
}


下面是使用
Select
组件的组件：

import * as React from 'react'

import Select from 'react-select'

import { MultiSelectOption } from '../interfaces/SelectionUI'

class MultipleSelectPicker extends React.PureComponent<MultipleSelectPickerProps> {

  onChange = (allSelected: MultiSelectOption[]) => {
    const {
      onAdd,
      onRemove,
      values,
    } = this.props

    if (values.length < allSelected.length) {
      const addedOption = allSelected.find(selected => !values.includes(selected))

      onAdd(addedOption)
    }
    else if (values.length > allSelected.length) {
      const removedOption = values.find(value => !allSelected.includes(value))

      onRemove(removedOption)
    }
  }

  render() {

    const {
      name,
      values,
      options,
      placeholder,
    } = this.props

    return (
      <Select
        name={name}
        value={values}
        className={`${name} selectpicker`}
        options={options}
        onChange={this.onChange}
        isMulti
        placeholder={placeholder}
      />
    )
  }
}

export interface MultipleSelectPickerProps {
  name: string,
  options: MultiSelectOption[],
  values: MultiSelectOption[],
  placeholder?: string,
  onAdd: (addedOption: MultiSelectOption) => void,
  onRemove: (removedOption: MultiSelectOption) => void,
}

export default MultipleSelectPicker


import*作为来自“React”的React
从“反应选择”导入选择
从“../interfaces/SelectionUI”导入{MultiSelectOption}
类MultipleSelectPicker扩展了React.PureComponent{
onChange=（全部选中：多选选项[]）=>{
常数{
奥纳德，
在删除时，
价值观
}=这是道具
如果（values.length！values.includes（selected））
onAdd（增补）
}
else if（values.length>allSelected.length）{
const removedOption=values.find（value=>！allSelected.includes（value））
onRemove（removedOption）
}
}
render（）{
常数{
名称
价值观
选项，
占位符，
}=这是道具
返回(
)
}
}
导出接口MultipleSelectorProps{
名称：string，
选项：多选选项[]，
值：多选选项[]，
占位符？：字符串，
onAdd:（addedOption:MultiSelectOption）=>void，
onRemove：（removedOption:MultiSelectOption）=>void，
}
导出默认多重选择器

有人知道为什么Webpack 4最小化会阻止
react select
情感样式表被注入，以及如何解决这个问题吗？
我找到了一个解决办法。我用（UglifyJsPlugin）替换了默认的webpack最小化工具，现在一切正常了

  const UglifyJsPlugin = require('uglifyjs-webpack-plugin');

  optimization: {
    minimizer: [ new UglifyJsPlugin() ],
  }

我找到了一个解决办法。我用（UglifyJsPlugin）替换了默认的网页包最小化工具，现在一切都按预期工作

  const UglifyJsPlugin = require('uglifyjs-webpack-plugin');

  optimization: {
    minimizer: [ new UglifyJsPlugin() ],
  }

你能用react-select共享一个组件的代码吗？@etarhan-Yep，我刚刚在问题中添加了这一点。这可能是过于热衷于消除死代码。我想我在Webpack 5和使用更简洁的Webpack插件时也看到了类似的问题。或者可能是CSP…你能用react-select共享一个组件的代码吗？@etarhan-Yep，我刚刚添加了这可能是过于热心的死代码消除。我想我在Webpack 5和使用更简洁的Webpack插件时也看到了类似的问题。或者可能是CSP。。。