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 跨越问题
这个问题我前面也写了相关的博客 详情可以往里面看 -》 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 重度 喜欢者 ，不知道你是不是和我一样咯
