react + webapck 项目搭建

这是我参与更文挑战的第15天，活动详情查看: 更文挑战

1，前话

最近公司需要新搭建一个小项目，考虑很久没有用react, 准备用react 简单搭建一个前端框架，记录一下本次搭 建的过程，两种方案：

一种方案: 用react + webpack 手动构建

一种方案：通过react脚手架创建，用config-overrides.js覆盖配置文件。

方案一：react + webpack 把一些项目中常用的插件都集成进去， 记录一下，整个搭建的过程。

方案二：react脚手架创建项目，需要修改配置文件，但是不想执行reject, 怕产生大量的垃圾代码， 于是尝试用config-overrides配置覆盖需要的功能

2，方案一：react + webapck项目搭建

1, mkdir react-webapck
2, cd react-webpack
3, 初始化package.json文件
   npm init -y 
4, webpack4.x安装
   npm install webpack webapck-cli webpack-dev-server --save-dev
5, 新建src/index.js文件
6, 在package.json中添加"build":"webpack"
   终端执行：npm run build 
   webpack打包会默认寻找src/index.js打包入口，生成dist/main.js文件

7, 配置HTML模板
  npm install -D html-webpack-plugin

const HtmlWebpackPlugin = require('html-webpack-plugin')
new HtmlWebpackPlugin({
      filename: resolve('./../dist/index.html'),
      template: "index.html",
      inject: true, // 默认值 true, script标签位于html文件的body底部
      hash: true,
      minify: {
        removeComments: true, // 去掉注释
        collapseWhitespace: true, // 压缩空格
        removeAttributeQuotes: true //去除标签的引号
      }
    })

修改打包命令：
  "build": "webpack --config build/webpack.config.js",

8, 抽取webpack配置文件，安装webpack-merge插件
  npm install -D webpack-merge

9，引入React
   npm install -S react react-dom
   还需要安装babel
   npm install -D @babel/core @babel/preset-env @babel/preset-react
   npm install -D @babel/plugin-transform-runtime @babel/runtime @babel/runtime-corejs2
   @babel/core babel   babel的核心库 
   @babel/preset-env 把es6,es7语法转换成es5
   @babel/plugin-transform-runtime  转化es6,es7的新特性
   @babel/preset-react 把react语法转换为es5
   @babel/plugin-transform-runtime 支持一些es6，es7的新语法
  根目录下面：创建.babelrc 文件

{
  "presets": [
    ["@babel/preset-env", {
      "modules": false,
      "target": {
        "browsers": [">1%", "last 2 versions", "not ie <= 8"]
      }
    }],
    "@babel/preset-react"
  ],
  "plugins": [
    ["@babel/plugin-transform-runtime", {
      "corejs": 2, // polyfill 需要使用@babel/runtime-corejs2
      "useBuildIns": "usage" // 按需引入,即使用什么新特性打包什么新特性, 可以减小打包的体积`
    }]
  ]
}

11， 配置编译打包规则
   npm install -D babel-loader // babel-loader使用babel进行编译项目
   npm install -D style-loader css-loader  // style-loader，css-loader编译css文件
   npm install -D url-loader file-loader // 引入文件路径（图片，字体）
   npm install -D less less-loader //  less-loader识别less文件

import HomePage from './home/home'
默认会加载home文件夹下面的index.js，

12， 测试打包的代码是否正常
  npm install -g http-server
  然后 cd dist
  执行： http-server

13, 使用react-router-dom 管理路由
  npm install -S react-router-dom

14，静态文件通过index.html直接引入，但是加载不到，需要安装插件
  npm install -D copy-webpack-plugin
  new CopyWebpackPlugin({
      patterns: [
        {
          from: utils.resolve('../static'), // 从哪个目录copy
          to: 'static' // copy到哪个目录
        }
      ]
    })
    之后再index.html中可以直接引入了

15， 引入 antd
    npm install antd --save

3，方案二：config-overrides配置

1, 安装 antd 包
   npm install antd
2, 安装react+webpack的配置依赖
   npm install react-app-rewired customize-cra babel-plugin-import
3，自定义less， 改变antd的样式
   npm install less less-loader
4，配置根路径下的config-overrides.js文件

const {override,fixBabelImports,addLessLoader} =require('customize-cra');

module.exports = override(
    // 针对antd 实现按需打包：根据import来打包 (使用babel-plugin-import)
    fixBabelImports('import',{
        libraryName:'antd',
        libraryDirectory:'es',
        style:true,//自动打包相关的样式 默认为 style:'css'
    }),
    // 使用less-loader对源码重的less的变量进行重新制定，设置antd自定义主题
    addLessLoader({
        javascriptEnabled: true,
        modifyVars:{'@primary-color':'#1DA57A'},
    })
);

5, 修改package.json文件
"scripts": {
    "start": "react-app-rewired start",
    "build": "react-app-rewired build",
    "test": "react--app-rewired test",
    "eject": "react-scripts eject"
  },

4，总结

工作中遇到这样的需求，才会进行这样的配置， 当然，搭建一个react项目的方案有很多种，实际工作中也会需要配置很多其他的插件，loader， 等等，上面的配置，只是记录一下常用的工具，还有很多东西需要完善，后续我也会继续完善，方便以后使用。