【React+AntD】1、关于左侧文件夹最重点的详解

文章目录

目录

1.脚手架:webpack

2.README.md

3.build文件夹

4.public文件夹

5.package.json

         总结

 

1.脚手架:webpack

 

2.README.md

自述文件：配置命令（如：’npm start‘）

配置端口：http://localhost:3000

3.build文件夹

 

4.public文件夹

公共文件夹:

1、src/assets目录的文件会被webpack编译，从而在实际项目中减少http请求，放置在src/assets目录有以下几点好处：

• 脚本和样式表被缩小并捆绑在一起以避免额外的网络请求。
• 缺少文件会导致编译错误，而不是用户的404错误。
• 结果文件名包含内容哈希，因此您无需担心浏览器缓存旧版本。

2、打包的时候，会将public文件夹直接复制一份到你构建出来的文件夹中 。

总结：如果你希望你的文件不被编译，比如jquery.min.js，或者压缩好的js插件等，你就可以把文件放在public文件夹中，这样还可以减少文件构建时间，可以减少构建文件的大小。换过来想，如果你把所有静态资源全部放在assets文件夹中，你会发现最后打包出来的文件很大，导致首页白屏时间过长，所以，你可以把一些不会改动的静态文件放到public中。

3、如果在index.html中，你可以像这样去使用它：

<img src="%PUBLIC_URL%/image/poster.jpeg" alt="">

只有前缀public可以访问文件夹中的文件%PUBLIC_URL%。如果需要使用src或中的文件node_modules，则必须将其复制到那里以明确指定将此文件作为构建的一部分的意图。
当运行npm run build，Create React App将替换%PUBLIC_URL%为正确的绝对路径，因此即使使用客户端路由或将其托管在非根URL上，项目也会正常工作。
在JavaScript代码中，可以process.env.PUBLIC_URL出于类似目的使用(注意最好不要用到图片)：

render() {
    return <img src={process.env.PUBLIC_URL + '/img/logo.png'} />;
}

 

5.package.json

---

总结