react学习日记第一记-webpack配置

对于前端开发者来说，无论使用vue 还是react还是angular，打包工具的配置永远都是一个必须的过程，因为这决定了打包出来项目的大小，资源占用，以及运行速度。

---

由于之前的项目一直都是在使用vue，对于vue的webpack（3.x）配置坑也踩的差不多了，正好公司不忙，可以抽空学习下react，接下来直接进入正题吧

---

一、搭建react开发环境

俗话说：‘工欲善其事，必先利其器’，作为才接毕业半年的小白来说，在工作中深刻的体会到开发工作对工具使用的重要性。
1、首先运行环境-node是必须的，需要下载安装node的运行环境，官网下载即可点击[打开连接][1]
2、安装好node后，npm也自动安装好了，npm是随从nodeJs的包管理工具，当然也可使用yarn，本文使用的是npm
3、全局安装脚手架`npm install -g create-react-app`注意，用习惯vue的可能有点不太习惯这种方式，这来源于两个框架的设计思维不一样（vue的安装方式`npm install -g vue-cli`）个人见解，不喜勿喷。
4、创建项目：在文件夹下执行`create-react-app myFirstReact`
5、启动项目：`npm start`
至此，我们的第一个react项目就搭建完成了

---

二、解压webpack
你会发现这时候创建的文件目录和vue大不一样，vue的build里面包含了webpack.base、webpack.dev、webpack.prod三个配置webpack的基础文件，而react并没有build文件，只是因为react隐藏了webpack的配置文件
所以我们需要在命令控制台执行npm run eject，
执行完之后，webpack文件被暴露出来。注意：此操作不可逆
解压出来的文件目录如下：

接下来我们就需要配置相关的webpack

三，去掉map

  {
              test: /\.(js|mjs)$/,
              exclude: /@babel(?:\/|\\{1,2})runtime/,
              loader: require.resolve('babel-loader'),
              options: {
                babelrc: false,
                configFile: false,
                compact: false,
                presets: [
                  [
                    require.resolve('babel-preset-react-app/dependencies'),
                    { helpers: true }
                  ]
                ],
                cacheDirectory: true,
                cacheCompression: isEnvProduction,

                // If an error happens in a package, it's possible to be
                // because it was compiled. Thus, we don't want the browser
                // debugger to show the original code. Instead, the code
                // being evaluated would be much more helpful.
                sourceMaps: false
              }
            },

将 sourceMaps改为false。打包出来的文件就没有了map

 const publicPath = isEnvProduction
    ? paths.servedPath
    : isEnvDevelopment && '/';
  // Some apps do not use client-side routing with pushState.
  // For these, "homepage" can be set to "." to enable relative asset paths.
  const shouldUseRelativeAssetPaths = publicPath === './';

将路径改为相对路径'./'
如何使用@去取代相对路径呢？

  alias: {
        // Support React Native Web
        // 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') //使用@符号做相对路径处理
      },

在alias里面加入 '@': path.join(__dirname, '..', 'src') //使用@符号做相对路径处理

---

四、使用stylus

因为之前使用vue的时候就很喜欢stylus，相比less和scss，stylus更容易上手。
但是在react的wbpack4.0+版本中如何配置和在项目中使用stylus呢？
起初，我以在vue中webpack3.0+的项目中配置，发现根本就不是那么回事，后来去网上找类似的Blog，也没有，几乎全部都是旧的react脚手架和将webpack基础配置文件分开的，全部不是我想要的。所以自己就动手尝试配置一下。
`{

      // "oneOf" will traverse all following loaders until one will
      // match the requirements. When no loader matches it will fall
      // back to the "file" loader at the end of the loader list.
      oneOf: [
        // "url" loader works like "file" loader except that it embeds assets
        // smaller than specified limit in bytes as data URLs to avoid requests.
        // A missing `test` is equivalent to a match.
        {
          test: [/\.bmp$/, /\.gif$/, /\.jpe?g$/, /\.png$/],
          loader: require.resolve('url-loader'),
          options: {
            limit: 10000,
            name: 'static/media/[name].[hash:8].[ext]'
          }
        },
        {
          test: /\.styl$/,
          use: [
            require.resolve('style-loader'),
            require.resolve('css-loader'),
            require.resolve('stylus-loader')
          ]
        },`
        
  可以使用vscode的搜索功能搜索oneOf数组，然后再里面添加`{
          test: /\.styl$/,
          use: [
            require.resolve('style-loader'),
            require.resolve('css-loader'),
            require.resolve('stylus-loader')
          ]
        },`
  仅仅配置此处就行了，然后建立css文件的时候要用.styl而不是用.css
  

、

此处省略了安装stylus的过程，请自行百度。跟vue的使用是一样的。
这些基础的配置到此就结束就，第一次写博客，不到之处，错误之处还望多多指正。