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

233jl 发布于2019-08-29 18:31 / 1367人阅读

摘要：对于前端开发者来说，无论使用还是还是，打包工具的配置永远都是一个必须的过程，因为这决定了打包出来项目的大小，资源占用，以及运行速度。所以自己就动手尝试配置一下。

对于前端开发者来说，无论使用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的使用是一样的。
这些基础的配置到此就结束就，第一次写博客，不到之处，错误之处还望多多指正。

idc机房托管服务器托管 webpack cdn配置 webpack配置cdn webpack常用配置项深度学习第四课

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/114388.html

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

摘要：对于前端开发者来说，无论使用还是还是，打包工具的配置永远都是一个必须的过程，因为这决定了打包出来项目的大小，资源占用，以及运行速度。所以自己就动手尝试配置一下。对于前端开发者来说，无论使用vue 还是react还是angular，打包工具的配置永远都是一个必须的过程，因为这决定了打包出来项目的大小，资源占用，以及运行速度。由于之前的项目一直都是在使用vue，对于vue的webpa...

Shonim 2019-08-02 16:11 评论0 收藏0
react学习日记第一记-webpack配置

摘要：对于前端开发者来说，无论使用还是还是，打包工具的配置永远都是一个必须的过程，因为这决定了打包出来项目的大小，资源占用，以及运行速度。所以自己就动手尝试配置一下。对于前端开发者来说，无论使用vue 还是react还是angular，打包工具的配置永远都是一个必须的过程，因为这决定了打包出来项目的大小，资源占用，以及运行速度。由于之前的项目一直都是在使用vue，对于vue的webpa...

zhkai 2019-08-23 16:47 评论0 收藏0
react学习日记第一记-webpack配置

摘要：对于前端开发者来说，无论使用还是还是，打包工具的配置永远都是一个必须的过程，因为这决定了打包出来项目的大小，资源占用，以及运行速度。所以自己就动手尝试配置一下。对于前端开发者来说，无论使用vue 还是react还是angular，打包工具的配置永远都是一个必须的过程，因为这决定了打包出来项目的大小，资源占用，以及运行速度。由于之前的项目一直都是在使用vue，对于vue的webpa...

MAX_zuo 2019-08-05 16:41 评论0 收藏0
基于 Laravel 开发 ThinkSNS+ 中前端的抉择（webpack/Vue）踩坑日记【社交

摘要：在上一篇文章基于分支，从到，再到，简单的介绍了这里分享在开发过程中，前端选择的心理活动。而作为核心开发之一，也负责前端这块的开发。在上一篇文章《 ThinkSNS+基于Laravel master分支，从1到 0，再到0.1》，简单的介绍了 ThinkSNS+ ,这里分享在开发过程中，前端选择的心理活动。 Laravel Mix的放弃在 Laravel 中，前端工作流默认是由 la...

songze 2019-06-27 16:41 评论0 收藏0
Vue学习日记（一）——Vue介绍

摘要：的核心库只关注视图层，并且非常容易学习，非常容易与其它库或已有项目整合。的目标是通过尽可能简单的实现响应的数据绑定和组合的视图组件。并不是框架，只是和他旁边的生态环境组成了一个框架，下面，贴一个官方的渐进式框架介绍图吧，方便理解。前言本人学习了一段时间的vue，并尝试写了一些小Demo之后，将vue投入了几个项目之后，一直在边学习边使用，经过看了vue,vuex,vue-route...

王晗 2019-08-26 11:33 评论0 收藏0