create-react-app踩坑记

前言

 哇,不的不说这个react 这个脚手架create-react-app脚确实有很多问题,哈哈,下面来看看吧有哪些坑:

 

引用sass或者less    

    记得16年还是几年是不支持sass,和less的,貌似现在支持了,我配置sass 也遇到很多问题,还是不能正确使用:

   在这个之前:你需要运行 

      npm run eject 

   create-react-app生成的项目文,看不到webpack相关的配置文件,需要先暴露出来:

   然后运行:

 npm install sass-loader node-sass --save-dev

   

      修改webpack配置

       修改 webpack.config.dev.jswebpack.config-prod.js 配置文件

   大概在158行吧:

  

/\.css$/ 改为/\.(css|sass)$/, 

  完整的代碼:

  {
            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/2677
                  ident: '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: require.resolve('sass-loader') // compiles sass to CSS
              },
            ],
          },

在198行 添加如下配置:

       {
            // 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']
          }

 

添加.sass文件

  我是把安裝的antd ui庫 導入

  當然你需要 npm i antd --save

  我把那個common.scss 文件下引入下面2個 一個是antd 和阿里圖庫,

@import "~antd/dist/antd.sass";
@icon-url: '~antd/dist/iconfont/iconfont';// 把 iconfont 地址改到本地

另外:!!! 还需要将原先在主css文件中添加的@import '~antd/dist/antd.css';语句移除。

 哈哈這樣就好了

 

CSS模块加载

  react css 都是一块加载的,如果你那个文件的css 的ID或者class 类一样了,这样就会被覆盖了,还有就是会一起加载,

  这个对于我  3个字:不能忍

  当然有办法咯:

    在修改 webpack.config.dev.js 和 webpack.config-prod.js 配置文件

   在164 行:

     加入   modules:true,

{
                loader: require.resolve('css-loader'),
                options: {
                  importLoaders: 1,
                  modules:true,
                },
              },

 然后重新 npm start

antd按需加载

   因为antd 样式很多,那总不能一次性都加载吧,这样性能很能不好,当然我这里推荐使用 babel-plugin-import 

   npm i  babel-plugin-import --save-dev

   当然我 的方法是 在你的react 需要执行eject命令,这个命令是不可逆的

  需要在暴露的config  文件下 2个文件  

webpack.config.dev.jswebpack.config.prod.js 

添加以下代码:

  在webpack.config.dev.js 的147行左右

plugins: [
            ['import', [{ libraryName: "antd", style: 'css' }]],
         ],

在webpack.config.prod.js 的153行左右

 

然后重新 run start

 

react 跨越问题

 这个问题我前面也写了相关的博客 详情可以往里面看 -》  https://www.cnblogs.com/yf-html/p/9251895.html

生产环境去除sourcemap

修改webpack.config.prod.js

// devtool: shouldUseSourceMap ? 'source-map' : false,
  devtool: false,

 

添加插件 webpack-bundle-analyzer

npm i  webpack-bundle-analyzer --save-dev

修改 webpack.config.prod.js

const BundleAnalyzerPlugin = require(
  'webpack-bundle-analyzer').BundleAnalyzerPlugin

plugins:[
    ....,
    new BundleAnalyzerPlugin(),
]

.项目打包生成.gz文件

npn i --save-dev compression-webpack-plugin

修改webpack.config.prod.js

const CompressionPlugin = require("compression-webpack-plugin");

plugins: [
    ...
    new CompressionPlugin({
      asset: "[path].gz[query]",
      algorithm: "gzip",
      test: /\.js$|\.css$|\.html$/,
      threshold: 10240,
      minRatio: 0.8
    }),
]

 

总结

好啦,目前的坑 我遇到的,后面如果还有我会继续更博的, 讲道理 还是挺喜欢的react ,

   毕竟 我是react 重度 喜欢者 ,不知道你是不是和我一样咯

posted @ 2018-07-13 12:02  -鹿-  阅读(5977)  评论(0编辑  收藏  举报