对于前端开发者来说，无论是使用vue、react还是angular，打包工具的配置始终是一个必经的过程，因为它决定了打包项目的大小和资源占用率和运行速度。由于之前的项目一直在用vue，vue的webpack(3.x)的配置坑差点被踩了。正好公司不忙，可以抽空学学react，然后直接进入正题。1.构建React开发俗话说：工欲善其事，必先利其器。作为一个才毕业半年的小白，深知开发工作对工具使用在工作中的重要性。1.首先，运行环境——node是必须的。您需要下载并安装node的运行环境。可以到官网下载，点击【打开连接】[1]2、安装好node后，npm也自动安装好了。npm沿用了nodeJs的包管理工具，当然也可以使用yarn。本文使用npm3，全局安装脚手架`npminstall-gcreate-react-app`注意，用惯了Vue的可能不习惯这种方式，这来自于两个框架的设计思路不同（vue的安装方法`npminstall-gvue-cli`）个人意见，不喜勿喷。4.创建项目：在文件夹中执行`create-react-appmyFirstReact`5.启动项目：`npmstart`至此，我们的第一个react项目就搭建完成了。2.解压webpack，你会发现此时创建的vue的文件目录和vue的文件目录有很大的不同。vue的build包含三个配置webpack的基础文件，webpack.base,webpack.dev,webpack.prod，而react没有build文件，只是因为react隐藏了webpack的配置文件所以我们需要执行npmrun在命令控制台中弹出。执行后，webpack文件就暴露出来了。注意：该操作不可逆解压文件目录如下：接下来我们需要配置相关的webpack3，去掉map{test:/\.(js|mjs)$/,exclude:/@babel(?:\/|\\{1,2})runtime/,loader:require.resolve('babel-loader'),选项:{babelrc:false,configFile:false,compact:false,presets:[[require.resolve('babel-preset-react-app/dependencies'),{helpers:true}]],cacheDirectory:true,cacheCompression:isEnvProduction,//如果包中发生错误，//可能是因为它被编译了。因此，我们不希望浏览器//调试器显示原始代码。相反，正在评估的代码//会更有帮助。sourceMaps:false}}，将sourceMaps更改为false。打包文件缺少mapconstpublicPath=isEnvProduction？paths.servedPath:isEnvDevelopment&&'/';//一些应用程序不使用带有pushState的客户端路由。//对于这些，“主页”可以设置为“。”启用相对资产路径。constshouldUseRelativeAssetPaths=publicPath==='./';把路径改成相对路径'./'如何用@替换相对路径？别名：{//支持ReactNativeWeb//https://www.smashingmagazine.com/2016/08/a-glimpse-into-the-future-with-react-native-for-web/'react-native':'react-native-web','@':path.join(__dirname,'..','src')//使用@符号进行相对路径处理}，在别名中添加'@'：path.join(__dirname,'..','src')//使用@符号进行相对路径处理4.使用stylus因为我之前用vue的时候就喜欢stylus。与less和scss相比，stylus更易于使用。但是在wbpack4.0+版本的react中如何在项目中配置和使用stylus呢？一开始我是在vue中的webpack3.0+项目中配置的，发现根本不是这样的。后来又去网上找了类似的博客，也没有。几乎都是老式的react脚手架和分离出来的webpack基础配置文件。是的，一切都不是我想要的。所以尝试自己配置。`{//"oneOf"将遍历所有后续加载器，直到有一个//符合要求。当没有加载器匹配时，它会掉落//回到加载器列表末尾的“文件”加载器。oneOf:[//“url”加载器的工作方式类似于“文件”加载器，只是它嵌入了资产//小于指定的字节数限制作为数据URL以避免请求。//缺少`test`等同于匹配。{测试：[/\.bmp$/,/\.gif$/,/\.jpe?g$/,/\.png$/],loader:require.resolve('url-loader'),options:{limit:10000,name:'static/media/[name].[hash:8].[ext]'}},{test:/\.styl$/,使用：[require.resolve('style-loader'),require.resolve('css-loader'),require.resolve('stylus-loader')]},`可以使用vscode的搜索功能搜索一个数组，然后再里面添加`{test:/\.styl$/，使用：[require.resolve('style-loader'),require.resolve('css-loader'),require.resolve('stylus-loader')]},`这里配置一下，然后创建css文件用.styl代替的.css。安装stylus的过程这里就省略了。请同样使用百度和Vue。这些基本配置到此结束。这是我第一次写博客。
