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

关注

发布于: 2 小时前

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;

复制代码

发布于: 2 小时前阅读数: 3

原文链接:【http://xie.infoq.cn/article/27a1593fb24f3e0e503f182cb】。文章转载请联系作者。

闪闪带你学前端

关注

还未添加个人签名 2018.02.12 加入

还未添加个人简介

发布

暂无评论

创作场景

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

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

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

制作 loading 页面

闪闪带你学前端

评论