摘要：對于前端開發者來說，無論使用還是還是，打包工具的配置永遠都是一個必須的過程，因為這決定了打包出來項目的大小，資源占用，以及運行速度。所以自己就動手嘗試配置一下。

對于前端開發者來說，無論使用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的使用是一樣的。
這些基礎的配置到此就結束就，第一次寫博客，不到之處，錯誤之處還望多多指正。