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

时间:2019-04-03 22:08:30

标签: javascript webpack-4 react-select emotion react-on-rails

我有一个React项目,该项目由Webpack捆绑并由react_on_rails提供服务。在此项目中,我使用react-select中的Select组件。使用Webpack 3时一切正常。升级到Webpack 4后,在development模式下一切正常。但是,当我以production模式构建时,Select的{​​{1}}组件没有应用任何样式。

(我没有足够的信誉度来发布图像,因此我将提供图像的链接。)

这是在react-select模式下构建的选择器的外观。

selector with styling

这是在development模式下构建时选择器的外观。

selector without styling

不应用样式的原因是production使用Emotion css-in-js,并且CSS被注入样式表的头部。

这里是react-select模式下头部的一个示例。

screenshot of stylesheets in the head

development模式下,style中没有这些head标签。

我将其范围缩小到似乎由webpack缩小步骤引起的事实。如果我添加

production

转到我的optimization: { minimize: false } ,然后在webpack.config.js模式下显示样式。

这是我的production,没有添加webpack.config.js

optimization

这是我的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

任何人都有一个想法,为什么Webpack 4的最小化将阻止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 情感样式表的注入以及如何解决?

1 个答案:

答案 0 :(得分:0)

我找到了解决方法。我将默认的webpack最小化器换成了(UglifyJsPlugin)[https://github.com/webpack-contrib/uglifyjs-webpack-plugin],现在一切正常。

thread_alert