You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
I would like to ask for help, because my toastifies don't recive styles while on production mode. In development everything is ok.
I need to add that i use css modules.
That's my wbepack.prod.config.js
"use strict";constautoprefixer=require("autoprefixer");constpath=require("path");constwebpack=require("webpack");constHtmlWebpackPlugin=require("html-webpack-plugin");constExtractTextPlugin=require("extract-text-webpack-plugin");constManifestPlugin=require("webpack-manifest-plugin");constInterpolateHtmlPlugin=require("react-dev-utils/InterpolateHtmlPlugin");constSWPrecacheWebpackPlugin=require("sw-precache-webpack-plugin");consteslintFormatter=require("react-dev-utils/eslintFormatter");constModuleScopePlugin=require("react-dev-utils/ModuleScopePlugin");constpaths=require("./paths");constgetClientEnvironment=require("./env");// Webpack uses `publicPath` to determine where the app is being served from.// It requires a trailing slash, or the file assets will get an incorrect path.constpublicPath=paths.servedPath;// Some apps do not use client-side routing with pushState.// For these, "homepage" can be set to "." to enable relative asset paths.constshouldUseRelativeAssetPaths=publicPath==="./";// Source maps are resource heavy and can cause out of memory issue for large source files.constshouldUseSourceMap=process.env.GENERATE_SOURCEMAP!=="false";// `publicUrl` is just like `publicPath`, but we will provide it to our app// as %PUBLIC_URL% in `index.html` and `process.env.PUBLIC_URL` in JavaScript.// Omit trailing slash as %PUBLIC_URL%/xyz looks better than %PUBLIC_URL%xyz.constpublicUrl=publicPath.slice(0,-1);// Get environment variables to inject into our app.constenv=getClientEnvironment(publicUrl);// Assert this just to be safe.// Development builds of React are slow and not intended for production.if(env.stringified["process.env"].NODE_ENV!=='"production"'){thrownewError("Production builds must have NODE_ENV=production.");}// Note: defined here because it will be used more than once.constcssFilename="static/css/[name].[contenthash:8].css";// ExtractTextPlugin expects the build output to be flat.// (See https://github.com/webpack-contrib/extract-text-webpack-plugin/issues/27)// However, our output is structured with css, js and media folders.// To have this structure working with relative paths, we have to use custom options.constextractTextPluginOptions=shouldUseRelativeAssetPaths
? // Making sure that the publicPath goes back to to build folder.{publicPath: Array(cssFilename.split("/").length).join("../")}
: {};// This is the production configuration.// It compiles slowly and is focused on producing a fast and minimal bundle.// The development configuration is different and lives in a separate file.module.exports={// Don't attempt to continue if there are any errors.bail: true,// We generate sourcemaps in production. This is slow but gives good results.// You can exclude the *.map files from the build during deployment.devtool: shouldUseSourceMap ? "source-map" : false,// In production, we only want to load the polyfills and the app code.entry: [require.resolve("./polyfills"),paths.appIndexJs],output: {// The build folder.path: paths.appBuild,// Generated JS file names (with nested folders).// There will be one main bundle, and one file per asynchronous chunk.// We don't currently advertise code splitting but Webpack supports it.filename: "static/js/[name].[chunkhash:8].js",chunkFilename: "static/js/[name].[chunkhash:8].chunk.js",// We inferred the "public path" (such as / or /my-project) from homepage.publicPath: publicPath,// Point sourcemap entries to original disk location (format as URL on Windows)devtoolModuleFilenameTemplate: (info)=>path.relative(paths.appSrc,info.absoluteResourcePath).replace(/\\/g,"/"),},resolve: {// This allows you to set a fallback for where Webpack should look for modules.// We placed these paths second because we want `node_modules` to "win"// if there are any conflicts. This matches Node resolution mechanism.// https://github.com/facebookincubator/create-react-app/issues/253modules: ["node_modules",paths.appNodeModules].concat(// It is guaranteed to exist because we tweak it in `env.js`process.env.NODE_PATH.split(path.delimiter).filter(Boolean)),// These are the reasonable defaults supported by the Node ecosystem.// We also include JSX as a common component filename extension to support// some tools, although we do not recommend using it, see:// https://github.com/facebookincubator/create-react-app/issues/290// `web` extension prefixes have been added for better support// for React Native Web.extensions: [".web.js",".mjs",".js",".json",".web.jsx",".jsx"],alias: {// Support React Native Web// https://www.smashingmagazine.com/2016/08/a-glimpse-into-the-future-with-react-native-for-web/"react-native": "react-native-web",},plugins: [// Prevents users from importing files from outside of src/ (or node_modules/).// This often causes confusion because we only process files within src/ with babel.// To fix this, we prevent you from importing files out of src/ -- if you'd like to,// please link the files into your node_modules/ and let module-resolution kick in.// Make sure your source files are compiled, as they will not be processed in any way.newModuleScopePlugin(paths.appSrc,[paths.appPackageJson]),],},module: {strictExportPresence: true,rules: [// TODO: Disable require.ensure as it's not a standard language feature.// We are waiting for https://github.com/facebookincubator/create-react-app/issues/2176.// { parser: { requireEnsure: false } },// First, run the linter.// It's important to do this before Babel processes the JS.{test: /\.(js|jsx|mjs)$/,enforce: "pre",use: [{options: {formatter: eslintFormatter,eslintPath: require.resolve("eslint"),},loader: require.resolve("eslint-loader"),},],include: paths.appSrc,},{// "oneOf" will traverse all following loaders until one will// match the requirements. When no loader matches it will fall// back to the "file" loader at the end of the loader list.oneOf: [// "url" loader works just like "file" loader but it also embeds// assets smaller than specified size as data URLs to avoid requests.{test: [/\.bmp$/,/\.gif$/,/\.jpe?g$/,/\.png$/],loader: require.resolve("url-loader"),options: {limit: 10000,name: "static/media/[name].[hash:8].[ext]",},},// Process JS with Babel.{test: /\.(js|jsx|mjs)$/,include: paths.appSrc,loader: require.resolve("babel-loader"),options: {compact: true,},},// The notation here is somewhat confusing.// "postcss" loader applies autoprefixer to our CSS.// "css" loader resolves paths in CSS and adds assets as dependencies.// "style" loader normally turns CSS into JS modules injecting <style>,// but unlike in development configuration, we do something different.// `ExtractTextPlugin` first applies the "postcss" and "css" loaders// (second argument), then grabs the result CSS and puts it into a// separate file in our build process. This way we actually ship// a single CSS file in production instead of JS code injecting <style>// tags. If you use code splitting, however, any async bundles will still// use the "style" loader inside the async code so CSS from them won't be// in the main CSS file.{test: /\.css$/,exclude: [/node_modules/],loader: ExtractTextPlugin.extract(Object.assign({fallback: {loader: require.resolve("style-loader"),options: {hmr: false,},},use: [{loader: require.resolve("css-loader"),options: {importLoaders: 1,minimize: true,sourceMap: true,modules: true,},},{loader: require.resolve("postcss-loader"),options: {// Necessary for external CSS imports to work// https://github.com/facebookincubator/create-react-app/issues/2677ident: "postcss",plugins: ()=>[require("postcss-flexbugs-fixes"),autoprefixer({browsers: [">1%","last 4 versions","Firefox ESR","not ie < 9",// React doesn't support IE8 anyway],flexbox: "no-2009",}),],},},],},extractTextPluginOptions)),// Note: this won't work without `new ExtractTextPlugin()` in `plugins`.},// "file" loader makes sure assets end up in the `build` folder.// When you `import` an asset, you get its filename.// This loader doesn't use a "test" so it will catch all modules// that fall through the other loaders.{loader: require.resolve("file-loader"),// Exclude `js` files to keep "css" loader working as it injects// it's runtime that would otherwise processed through "file" loader.// Also exclude `html` and `json` extensions so they get processed// by webpacks internal loaders.exclude: [/\.(js|jsx|mjs)$/,/\.html$/,/\.json$/],options: {name: "static/media/[name].[hash:8].[ext]",},},// ** STOP ** Are you adding a new loader?// Make sure to add the new loader(s) before the "file" loader.],},],},plugins: [newInterpolateHtmlPlugin(env.raw),newHtmlWebpackPlugin({inject: true,template: paths.appHtml,minify: {removeComments: true,collapseWhitespace: true,removeRedundantAttributes: true,useShortDoctype: true,removeEmptyAttributes: true,removeStyleLinkTypeAttributes: true,keepClosingSlash: true,minifyJS: true,minifyCSS: true,minifyURLs: true,},}),newwebpack.DefinePlugin(env.stringified),newwebpack.optimize.UglifyJsPlugin({compress: {warnings: false,comparisons: false,},mangle: {safari10: true,},output: {comments: false,ascii_only: true,},sourceMap: shouldUseSourceMap,}),newExtractTextPlugin({filename: cssFilename,}),newManifestPlugin({fileName: "asset-manifest.json",}),newSWPrecacheWebpackPlugin({dontCacheBustUrlsMatching: /\.\w{8}\./,filename: "service-worker.js",logger(message){if(message.indexOf("Total precache size is")===0){return;}if(message.indexOf("Skipping static resource")===0){return;}console.log(message);},minify: true,navigateFallback: publicUrl+"/index.html",navigateFallbackWhitelist: [/^(?!\/__).*/],staticFileGlobsIgnorePatterns: [/\.map$/,/asset-manifest\.json$/],}),newwebpack.IgnorePlugin(/^\.\/locale$/,/moment$/),],node: {dgram: "empty",fs: "empty",net: "empty",tls: "empty",child_process: "empty",},};
Anyone can help me? I ask for clear answers because im a beginer developer :)
The text was updated successfully, but these errors were encountered:
I would like to ask for help, because my toastifies don't recive styles while on production mode. In development everything is ok.
I need to add that i use css modules.
That's my wbepack.prod.config.js
Anyone can help me? I ask for clear answers because im a beginer developer :)
The text was updated successfully, but these errors were encountered: