从零搭建一个react-hooks项目（一）

从零搭建一个react-hooks项目（一）

• 最近有打算仿vue-admin项目构造一个react的项目，不引用官方脚手架，从webpack开始配置一套基于react,redux,typescript的项目，并实时记录一下项目中的一些配置情况
• 首先搭建一个基本的webpack环境

webpack项目搭建

• 前置基础，电脑有安装node环境，可以使用npm工具
• 新建文件夹，命名项目名称（react-admin）,进入文件夹，使用命令 npm init ，然后一路确定生成package.json文件
• webpack需要安装基本依赖 webpack webpack-cli webpack-dev-server, 命令为 npm i webpack webpack-cli webpack-dev-server -D
• 安装依赖完成，则需要进行webpack的基本配置，我们在根目录构建 webpack.config.js 文件用于配置webpack
• 然后在根目录创建一个index.js作为入口文件，我们先构造index.js这个入口文件，代码如下

function a(number){
   
  console.log(number)
}
a(12)

• 然后开始配置我们的webpack，webpack需要配置入口及输出位置，分别对应entry与output属性
• entry可以接收一个字符串作为主入口的文件路径，但只能用于单入口项目。也可以接收一个对象作为入口的文件路径，如下所示
• output用来描述打包后的文件应该放到哪，叫什么名字，也有两个基本属性，一个是打包后的文件名，一个是打包后的文件路径，这里我们通过[name].js来获取他在入口文件中的对应名称并生成文件名，如果是单入口并且直接用字符串指定的文件路径，比如entry: ‘./index.js’，这样最后生成的文件名就是main.js，如果采用对象形式设定的entry属性，比如entry: { app: ‘./index.js’ }，则最后生成的文件就是对应的键值app.js。 路径使用path.resolve()来在根目录下生成dist文件夹并将打包文件放到其中

const path = require('path') // node环境自带，无需下载
// 单入口文件
module.exports = {
   
  entry: './index.js', // 入口为index.js
  output: {
     // 输出就是 dist/main.js
    filename: '[name].js',
    path: path.resolve(__dirname, 'dist')
  }
}

// 多入口文件
module.exports = {
   
  entry: {
    // 入口也是index.js
    app: './index.js'
  }, 
  output: {
     // 输出为dist/app.js
    filename: '[name].js',
    path: path.resolve(__dirname, 'dist')
  }
}

• 配置到这就算完成了最基本的配置，我们可以来测试一下，先在package.json中的 scripts 下新建指令 “start”: “webpack --config webpack.config.js”
• 然后再执行npm run start 就可以看到执行了打包过程，生成了dist文件夹
• 这里我们完成了基本的配置，但是这里还有一个问题，当我们修改entry对应的文件名时，重新执行打包，会发现之前的打包文件还存在，这样就会导致我们的dist文件夹会包含很多之前打包的跟当前代码无关的文件，这样其实对我们的项目并不友好，这里我们想要在每次打包的时候都把dist给移除了，并重新生成
• clean-webpack-plugin 插件可以帮助我们实现这个需求，先下载这个包 npm i clean-webpack-plugin -D
• 然后在webpack.config.js中进行配置，如下，plugins用于我们配置我们想要的相关插件，接收一个数组值，这样我们的项目就可以在每次打包前都将dist清空了，就不会存在无用文件在内了

const path = require('path')
const {
    CleanWebpackPlugin } = require('clean-webpack-plugin');

module.exports = {
   
  entry: {
   
    app: './index.js'
  },
  output: {
   
    filename: '[name].js',
    path: path.resolve(__dirname, 'dist'),
    chunkFilename: '[name].bundle.js'
  },
  plugins: [
    new CleanWebpackPlugin()
  ]
}

• 接下来就让我们开始配置react相关吧，react开发中我们会用到jsx或者es6的语法，而这些语法在低版本浏览器都是不兼容的，所以我们需要配置babel来实现低版本浏览器的兼容
• 这里我们需要下载 babel-loader @babel/preset-env(根据环境转换代码) @babel/preset-react(react使用) @babel/preset-polyfill(Babel默认只转换新的JavaScript语法，但是不转换新的API，比如 Iterator、Generator、Set、Maps、Proxy、Reflect、Symbol、Promise 等全局对象，以及一些定义在全局对象上的方法（比如Object.assign ）都不会转码。而@babel/preset-polyfil