Create-react-app trample the Pit to remember

Objective

Wow, no, don't say this react this scaffold create-react-app Foot does have a lot of problems, haha, let's see what pits there are:

Quote Sass or less

Remember 16 or years is not support sass, and less, seemingly now support, I configure Sass also encountered a lot of problems, or can not be used correctly:

Before this: you need to run

NPM Run Eject

Create-react-app generated project text, do not see the Webpack related configuration file, need to be exposed first:

Then run:

NPM Install Sass-loader Node-sass--save-dev

Modifying the Webpack configuration

modifying webpack.config.dev.js and webpack.config-prod.js configuration files

It's about 158 lines:

Full Password:

{test:/\. (Css|sass) $/, use: [Require.resolve (' Style-loader '), {loader:require.resolve (' Css-loader '), Options: {importloaders:1, 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 ',} ),],},}, {Loader:r Equire.resolve (' Sass-loader ')//compiles sass to CSS              },            ],          },

In line 198, add the following configuration:

       {            //Exclude ' js ' files to keep "CSS" loader working as it injects            //Its 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$/,/\.scss$/], Loader:require.resolve (' File-loader '), Options: {name:' Static/media/[name]. [Hash:8]. [ext] ',},}, {test:/\.scss$/, loaders: [' Style-loader ', ' css-loader ', ' Sass-loader ']          }

Add. sass File

I'm putting an installed Antd UI library into

Of course you need NPM I antd--save

I put that common.scss file into the following 2 one is Antd and Ali,

@import "~antd/dist/antd.sass"; @icon-url: ' ~antd/dist/iconfont/iconfont '; // Change the Iconfont address to local

Other than that:!!! You will also need to remove the statements that @import ‘~antd/dist/antd.css‘; were previously added to the main CSS file.

Haha, that's good.

CSS Module loading

React CSS is a piece of loading, if your file's CSS ID or the class class, so it will be overwritten, and will be loaded together,

This for me 3 words: can't endure

Of course there are ways:

When modifying webpack.config.dev.js and webpack.config-prod.js configuration files

In line 164:

Join Modules:true,

{                loader:require.resolve (' Css-loader '),                options: {                  1,                  modules:  True,                },              },

Then re-NPM start

Production environment Removal SOURCEMAP

Modify webpack.config.prod.js

// Devtool:shouldusesourcemap? ' Source-map ': false,  false,

Add Plugin webpack-bundle-analyzer

NPM I  webpack-bundle-analyzer--save-dev

Modifywebpack.config.prod.js

Const BUNDLEANALYZERPLUGIN = require (  ' Webpack-bundle-analyzer '). bundleanalyzerpluginplugins:[...    ..    ,new  Bundleanalyzerplugin (),]

. Project packaging generates. gz files

NPN I--save-dev compression-webpack-plugin

Modifywebpack.config.prod.js

Const COMPRESSIONPLUGIN = require ("Compression-webpack-plugin");p lugins: [    ...     New Compressionplugin ({      "[Path].gz[query]",      "gzip",      /\.js$|\.css$|\.html$/ ,       10240,      0.8    }),]

Summarize

Well, the current pit I met, the back if there is still I will continue to be more bo, reasoning or quite like the react,

After all, I'm react, I don't know if you're like me.

Create-react-app trample the Pit to remember