Я пытаюсь обновить Webpack с v1 до v4. Я вижу созданный файл CSS, но он не имеет встроенного CSS из Radium.
Вот мой конфиг вебпак
'use strict';
var autoprefixer = require('autoprefixer');
var webpack = require('webpack');
var ManifestPlugin = require('webpack-manifest-plugin');
var paths = require('./paths');
var getClientEnvironment = require('./env');
var publicPath = paths.servedPath;
var shouldUseRelativeAssetPaths = publicPath === './';
var publicUrl = publicPath.slice(0, -1);
var env = getClientEnvironment(publicUrl);
const cssFilename = 'static/css/react-bundle.css';
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
const TerserPlugin = require('terser-webpack-plugin');
const createConfig = (name, entry, output) => {
return {
name,
stats: 'verbose',
mode: process.env.NODE_ENV,
devtool: 'cheap-module-eval-source-map',
entry,
output,
resolve: {
extensions: ['.js', '.json', '.jsx', '.css', '.scss'],
alias: {
'react-native': 'react-native-web',
radium: require.resolve("radium/index"),
},
},
module: {
rules: [
{
test: /\.(js|jsx)$/,
loader: 'eslint-loader',
exclude: /node_modules/,
include: [paths.appSrc, paths.modulesSrc, paths.commonSrc],
options: {
failOnWarning: false,
failOnError: false,
emitError: false,
emitWarning: true,
},
enforce: 'pre',
},
{
exclude: [
/\.html$/,
/\.(js|jsx)$/,
/\.css$/,
/\.json$/,
/\.svg$/
],
use: [
{
loader: 'url-loader',
options: {
limit: 10000,
name: 'static/media/[name].[hash:8].[ext]',
},
}
]
},{
test: /\.(js|jsx)$/,
include: [paths.appSrc, paths.modulesSrc, paths.commonSrc],
use: [{
loader: 'babel-loader',
}]
},{
test: /\.json$/,
use: [{
loader: 'json-loader',
}]
},
{
test: /\.svg$/,
use: [
{
loader: 'file-loader',
options: {
name: 'static/media/[name].[hash:8].[ext]',
},
},
],
},
{
test: /\.css$/,
use: [
{
loader: MiniCssExtractPlugin.loader,
},
{loader: 'css-loader', options: {importLoaders: 1}},
],
},
],
},
plugins: [
new webpack.DefinePlugin(env.stringified),
new webpack.optimize.OccurrenceOrderPlugin(),
new MiniCssExtractPlugin({
// Options similar to the same options in webpackOptions.output
// both options are optional
filename: cssFilename,
chunkFilename: "[id].css"
}),
new ManifestPlugin({
fileName: 'asset-manifest.json',
}),
//new WebpackNotifierPlugin({ alwaysNotify: true, })
],
node: {
fs: 'empty',
net: 'empty',
tls: 'empty',
},
optimization: {
minimizer: [
new TerserPlugin({
cache: true,
parallel: true,
sourceMap: true,
terserOptions: {}
}),
],
}
};
};
Вот мой пакет. Json
{
"name": "InvestorView",
"version": "1.0.0",
"private": true,
"scripts": {
"start": "concurrently 'npm run minifyjson' 'npm run build-dev'",
"start-win": "concurrently \"npm run minifyjson-win\" \"npm run build-dev\"",
"build": "concurrently 'npm run minifyjson' 'npm run build-prod'",
"build-win": "concurrently \"npm run minifyjson-win\" \"npm run build-prod\"",
"build-dev": "node --max_old_space_size=8000 --trace-deprecation scripts/build-dev.js --mode development",
"build-prod": "node scripts/build.js",
"minifyjson": "malta '#./core/api/config/malta-config.json'",
"minifyjson-win": "malta #./core/api/config/malta-config.json",
"coverage": "cross-env NODE_ENV=test nyc report --reporter=lcov --reporter=text",
"test": "cross-env NODE_ENV=test nyc mocha test/util/browser.js test/util/ignoreFileExtensions.js \"core/{api,constants,react_components,reducers,selectors,utils}/**/*.spec.{js,jsx}\" \"{modules,common}/**/*.spec.{js,jsx}\" --recursive",
"test-watch": "cross-env NODE_ENV=test mocha -w -R min test/util/browser.js test/util/ignoreFileExtensions.js \"core/{api,constants,react_components,reducers,selectors,utils}/**/*.spec.{js,jsx}\" \"{modules,common}/**/*.spec.{js,jsx}\" --recursive"
},
"nyc": {
"sourceMap": false,
"instrument": false,
"check-coverage": true,
"branches": 33,
"lines": 52,
"reporter": [
"lcov",
"text-summary"
],
"require": [
"./test/util/browser.js",
"./test/util/ignoreFileExtensions.js"
],
"extension": [
".jsx"
]
},
"dependencies": {
"accounting": "0.4.1",
"babel-polyfill": "6.26.0",
"classnames": "2.2.6",
"date-fns": "1.29.0",
"deepmerge": "1.3.2",
"dompurify": "1.0.5",
"es6-template-regex": "1.0.0",
"file-saver": "1.3.8",
"flexbox-react": "4.4.0",
"fuse.js": "3.2.1",
"hashids": "1.1.4",
"lodash": "4.17.10",
"md5": "2.2.1",
"moment": "2.22.2",
"prop-types": "15.6.2",
"rc-slider": "8.6.1",
"react": "15.4.2",
"react-bootstrap": "0.32.1",
"react-css": "0.0.2",
"react-dom": "15.4.2",
"react-helmet": "5.2.0",
"react-joyride": "2.0.3",
"react-jsonschema-form": "0.49.0",
"react-jss": "8.6.1",
"react-keydown": "1.9.7",
"react-modal": "3.5.1",
"react-motion": "0.5.2",
"react-motion-ui-pack": "0.10.3",
"react-player": "1.6.4",
"react-redux": "5.0.7",
"react-responsive": "5.0.0",
"react-responsive-carousel": "3.1.41",
"react-router-dom": "4.3.1",
"react-signature-canvas": "1.0.1",
"react-simple-maps": "0.12.1",
"recharts": "1.1.0",
"redux": "3.6.0",
"redux-logger": "3.0.6",
"redux-saga": "0.16.0",
"redux-thunk": "2.3.0",
"reselect": "3.0.1",
"shortid": "2.2.12",
"uniqid": "5.0.3",
"url-search-params-polyfill": "4.0.1"
},
"devDependencies": {
"@babel/core": "^7.3.4",
"@babel/plugin-proposal-decorators": "^7.3.0",
"@babel/preset-env": "^7.3.4",
"@babel/preset-react": "^7.0.0",
"autoprefixer": "^6.7.2",
"babel-core": "6.26.3",
"babel-eslint": "10.0.1",
"babel-jest": "24.5.0",
"babel-loader": "8.0.5",
"babel-plugin-transform-async-to-generator": "6.24.1",
"babel-plugin-transform-decorators-legacy": "1.3.4",
"babel-plugin-transform-react-remove-prop-types": "0.4.3",
"babel-register": "^6.26.0",
"babel-runtime": "6.20.0",
"case-sensitive-paths-webpack-plugin": "1.1.4",
"chai": "3.5.0",
"chalk": "1.1.3",
"concurrently": "^4.1.0",
"connect-history-api-fallback": "1.3.0",
"cross-env": "5.0.1",
"cross-spawn": "4.0.2",
"css-loader": "2.1.1",
"cssnano": "^4.1.10",
"detect-port": "1.0.1",
"dotenv": "2.0.0",
"enzyme": "2.8.2",
"eslint": "^4.7.1",
"eslint-loader": "^2.0.0",
"eslint-plugin-class-methods-use-this-regexp": "0.1.0",
"eslint-plugin-import": "2.7.0",
"eslint-plugin-react": "7.4.0",
"eslint-plugin-security": "1.4.0",
"file-loader": "3.0.1",
"fs-extra": "0.30.0",
"html-webpack-plugin": "3.2.0",
"http-proxy-middleware": "0.17.3",
"jest": "18.1.0",
"jsdom": "11.6.2",
"json-loader": "0.5.7",
"malta": "^3.9.3",
"malta-json-minify": "^1.0.3",
"mini-css-extract-plugin": "^0.5.0",
"mocha": "3.2.0",
"nyc": "11.3.0",
"object-assign": "4.1.1",
"postcss-cssnext": "^3.1.0",
"postcss-import": "^12.0.1",
"postcss-loader": "^3.0.0",
"promise": "7.1.1",
"prop-types": "^15.6.0",
"radium": "0.25.1",
"react-addons-test-utils": "15.4.2",
"react-dev-utils": "0.5.2",
"react-tooltip": "^3.10.0",
"signature_pad": "^3.0.0-beta.3",
"sinon": "2.1.0",
"sinon-chai": "2.9.0",
"style-loader": "0.23.1",
"sugarss": "^2.0.0",
"terser-webpack-plugin": "^1.2.3",
"url-loader": "1.1.2",
"webpack": "4.29.6",
"webpack-bundle-size-analyzer": "3.0.0",
"webpack-manifest-plugin": "2.0.4",
"webpack-notifier": "1.7.0",
"whatwg-fetch": "2.0.2"
},
"postcss": {
"parser": "sugarss",
"map": false,
"plugins": {
"postcss-plugin": {}
}
}
}
Я не уверен, что я здесь делаю неправильно.
Для меня это выглядит так: мне нужно изменить использование Radium в соответствии с новой конфигурацией Webpack.
Я уже внес изменения в соответствии с документацией Radium, но безуспешно.
Кто-то еще сталкивался с такой же проблемой.
Пожалуйста, дайте мне знать.