学习webpack （二）antd ，mobx，mock，css-module

之前我们已经让我们的 webpack4 + react脚手架跑起来并且成功着陆，
现在我们可以安装 antd
antd官方网址
我们找到文档 Ant design of react

antd安装

npm install antd -S

再到我们的项目中试试吧。
不过我们需要在每个组件中加上 antd的css，
并不会用到antd的所有组件 而antd也为我们提供了按需加载。

按需加载

yarn add -D babel-plugin-import

官方推荐我们使用这个插件，可以实现按需加载还可以让我们不必引入css

试试看。。

mobx安装

之后我们还需要用到 mobx 并且我们也想使用其装饰器的语法

yarn add mobx -S
yarn add mobx-react -S

我们需要在react中使用，所以我们还需要 mobx-react

// 安装装饰器所需依赖
yarn add -D babel-plugin-transform-decorators-legacy
// 安装应用配置
yarn add -D @babel/plugin-proposal-decorators
yarn add -D @babel/plugin-proposal-class-properties
yarn add -D core-js

一些关于这些插件的解释
https://www.jianshu.com/p/35a07a1ee519

最后配置 .babelrc 文件

{
    "presets": [
        [
            "@babel/preset-env",
            {
                // 描述您为项目支持/目标的环境
                "targets": {
                    // 大于相关浏览器版本无需用到 preset-env
                    "edge": 17,
                    "firefox": 60,
                    "chrome": 67,
                    "safari": 11.1
                },
                // 根据代码逻辑中用到的 ES6+语法进行方法的导入，而不是全部导入
                "corejs": "3", // <---  此处加个这个，就没有报错警告了,不加会又一个警告，让你下载corejs
                "useBuiltIns": "usage"
            }
        ],
        "@babel/preset-react"
    ],
    "plugins": [
        [
            "import",
            {
                "libraryName": "antd",
                "libraryDirectory": "es",
                "style": "css" // `style: true` 会加载 less 文件
            }
        ],
        +[
            "@babel/plugin-proposal-decorators",
            {
                "legacy": true
            }
        ],
        +[
            "@babel/plugin-proposal-class-properties",
            {
                "loose": true
            }
        ]
    ]
}
// 加上带 + 的配置

在根目录 配置 jsconfig.json 阻止编辑器报错
如果是用ts 那么文件名为tsconfig.json

{
    "compilerOptions": {
        "experimentalDecorators": true,
        "allowJs": true
    }
}

Proxy 和 mock 和 模块懒加载

proxy 在devServer 中配置

  devServer:{
    proxy:{
      // 如果是 接口开口 加上 api 将会触发此代理
      "/api":{
        targrt: "", //地址
        //如果设置成true：发送请求头中host会设置成target·
        changeOrigin：true,
        pathRewrite:{
          // api
          "^api/":""
        }
      }
    }
  }

mock 有了mock数据那么很多时候在没有后端时我们依然可以工作
下载 mocker-api

npm i mocker-api -D

在根目录 创建mock文件夹在里面创建index.js

在index中我们可以写一个对象来模拟数据

const proxy = {
  'GET /mock/user': { id: 1, username: 'kenny', sex: 6 },
  'GET /mock/user/list': [
    { id: 1, username: 'kenny', sex: 6 },
    { id: 2, username: 'kenny', sex: 6 }
  ],
  'POST /mock/login/account': (req, res) => {
    const { password, username } = req.body
    if (password === '888888' && username === 'admin') {
      return res.send({
        status: 'ok',
        code: 0,
        token: 'sdfsdfsdfdsf',
        data: { id: 1, username: 'kenny', sex: 6 }
      })
    } else {
      return res.send({ status: 'error', code: 403 })
    }
  },
  'DELETE /mock/user/:id': (req, res) => {
    console.log('---->', req.body)
    console.log('---->', req.params.id)
    res.send({ status: 'ok', message: '删除成功！' })
  }
}
module.exports = proxy

在webpack.dev.config.js 中

const apiMocker = require("mocker-api")
devServer:{
  before(mock){
    // 注意地址不要写错哦 __dirname 时当前文件的绝对路径
    apiMocker(mock,path.resolve(__dirname,"../mock"))
  }
}

之后我们发送ajax请求就可以啦 接口前记得加mock
请求推荐使用axios,这里就不再介绍axios了

css-module，

在react中 通过xxx.module.css，可以让css只对当前模块生效
css很简单只需要 修改 配置中 module relus css-loader的部分

{
    test:/\.module.css$/,
    use:[
                // link的方式引入
            MiniCssExtractPlugin.loader,
            {
                  loader:"css-loader",
                  options:{
                       //  在这里加上 module:true
                    module:true
                  }
            },
       // 增加浏览器的前缀 有postcss.congfig.js文件
        "postcss-loader"
    ],
    // node_modules 除外保险起见，万一有个包就有.module.css的后缀呢

     exclude:[
                path.resolve(__dirname,"../node_modules"),
          ]
    },
 //   这是.module.css 的配置 因为我也不想让所有的css都模块化，比如node_modules中的css所以加上了exclude将其排除
//    我只需要对一部分css模块化就可以
// 那么我就还需要对node_modules的css进行 增加前缀转义打包等处理，所以需要再写一边
{
    test:/\.css$/,
    use:[
                // link的方式引入
            MiniCssExtractPlugin.loader,
                "css-loader",
       // 增加浏览器的前缀 有postcss.congfig.js文件
        "postcss-loader"
    ],
     include:[
                path.resolve(__dirname,"../node_modules"),
          ]
    },
// 对普通css还是和之前一样就好了 include 

sass 除了添加 modules 属性还要一个 importLoaders 属性

options:{
      // 2是因为你还有sass-loader和poatcss-loader
     // 如果还有loader，数字相对应的增加减少 
      importLoaders:2,
      // modules:true,
      // 差点忘了这个重新命名，不然class就是一串乱码，没有语义化了
      // 还有就是把之前module.css的也改成这样。。。
     modules:{localIdentName: "[name]-[hash:base64:5]"},
  }