react脚手架 create-react-app 学习笔记

生成静态文件时 npm build，更改css、js、image生成目录：

编辑 \node_modules\react-scripts\config\webpack.config.js 文件,
把 static/css、static/js、static/media 分别替换为 assets 及 img

new MiniCssExtractPlugin({
    filename: 'assets/[name].[contenthash:8].css',
    chunkFilename: 'assets/[name].[contenthash:8].chunk.css',
})

filename: isEnvProduction
    ? 'assets/[name].[contenthash:8].js'
    : isEnvDevelopment && 'assets/bundle.js',

chunkFilename: isEnvProduction
    ? 'assets/[name].[contenthash:8].chunk.js'
    : isEnvDevelopment && 'assets/[name].chunk.js',

exclude: [/\.(js|mjs|jsx|ts|tsx)$/, /\.html$/, /\.json$/],
    options: {
        name: 'assets/[name].[hash:8].[ext]',
    },

options: {
    limit: imageInlineSizeLimit,
    mimetype: 'image/avif',
    name: 'img/[name].[hash:8].[ext]',
    },

options: {
    limit: imageInlineSizeLimit,
    name: 'img/[name].[hash:8].[ext]',
    },

src目录下的image、字体引用，jsx里导入再引用，css里可以直接引用

import cimg1 from './img/cimg1.png';

class Cover extends React.Component {
    render(){
        return(
            <>
                <img src={cimg1} alt="cimg1" className="cimg1" />
            </>
        )
    }
}

.bgmwrap span {
    background: transparent url(./img/icon-play.png) 0 0 no-repeat;
}

@font-face {
  font-family: 'zitiName';
  src: url('./assets/zitiName.woff') format('woff'),
      url('./assets/zitiName.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

如果是在public下的图片，比如在 public/index.html 里引用，就要在 public 下建立 assets 文件夹，放入图片

loading页面

在 public/index.html 的 #root div 外面写 <div id="loading"></div>，
然后在 App.js 里 componentDidMount 里把 #loading 节点删除，即 App 加载完成时删除 loading 节点

<div id="loading">
    ...
</div>
<div id="root"></div>



class App extends React.Component {

    componentDidMount() {
        document.querySelector("#loading").outerHTML = "";
    }

    render(){
        return (
            <>
              <div className="container">
                  ...
              </div>
            </>
        );
    }
}

export default App;