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.js 和 webpack.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.js和webpack.config.prod.js 

添加如下代碼：

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

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

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

 

而後從新 run start

 

react 跨越問題

 這個問題我前面也寫了相關的博客 詳情能夠往裏面看 -》  http://www.javashuo.com/article/p-tgrcwzss-u.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 重度 喜歡者 ，不知道你是否是和我同樣咯