为啥 Webpack 4 缩小会阻止 react-select 组件的样式？
Posted
技术标签:
【中文标题】为啥 Webpack 4 缩小会阻止 react-select 组件的样式？【英文标题】：Why would Webpack 4 minification prevent styles for react-select component?为什么 Webpack 4 缩小会阻止 react-select 组件的样式？ 【发布时间】：2019-08-25 13:36:33 【问题描述】：我有一个由 Webpack 捆绑并由 react_on_rails 提供服务的 React 项目。在这个项目中，我使用来自react-select 的Select 组件。使用 Webpack 3 时一切正常。升级到 Webpack 4 后，一切在 development 模式下也能正常工作。但是，当我在production 模式下构建时，来自react-select 的Select 组件没有应用任何样式。
（我没有足够的声望点来发布图片，所以我将提供图片的链接。）
这是选择器在development 模式下构建时的样子。
selector with styling
这是选择器在production 模式下构建时的样子。
selector without styling
样式未应用的原因是react-select 使用Emotion css-in-js 并且css 被注入样式表的头部。
这是development 模式下头部的示例。
screenshot of stylesheets in the head
在production 模式下，这些style 标签在head 中全部缺失。
我已将其范围缩小到它似乎是由 webpack 缩小步骤引起的。如果我添加
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 组件的组件：
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
任何人都知道为什么 Webpack 4 最小化会阻止react-select Emotion 样式表被注入以及如何解决这个问题？
【问题讨论】：
能分享一下使用 react-select 的组件代码吗？ @etarhan 是的，我刚刚将其添加到问题中。 这可能是过分热心的死代码消除。我想我在使用 Webpack 5 和使用 terser-webpack-plugin 时看到了类似的问题。或者它可能是 CSP... 【参考方案1】：我找到了解决方法。我为 (UglifyJsPlugin)[https://github.com/webpack-contrib/uglifyjs-webpack-plugin] 替换了默认的 webpack 最小化程序，现在一切正常。
const UglifyJsPlugin = require('uglifyjs-webpack-plugin');
optimization:
minimizer: [ new UglifyJsPlugin() ],
【讨论】：
以上是关于为啥 Webpack 4 缩小会阻止 react-select 组件的样式？的主要内容，如果未能解决你的问题，请参考以下文章
React Native FlexBox：为啥添加`alignItems`会阻止孩子拥有100％的宽度？
你如何配置 Webpack 以清除生产缩小的 React 警告？
React Native：流行的库，支持图像裁剪而没有放大/缩小功能