# webpack-demo

**Repository Path**: team-2203/webpack-dem

## Basic Information

- **Project Name**: webpack-demo
- **Description**: 学习目标
> 使用webpack搭建一个React运行环境


- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2022-09-07
- **Last Updated**: 2022-09-07

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

## 知识点回顾
1. 表单操作
   + 非受控组件  createRef
   + 受控组件    value、onChange  （v-model的实现原理？）

2. 生命周期
   + 会描述生命周期流程  
   + componentDidMount 发初始化页面数据异步请求

3. LeanCloud扮演真实后端角色
   + 只需要向LeanCloud提交你向存储的数据包（objectId、createAt不需要携带）
   + 测试的时候请使用自己的ID、Key
   + 后端接口（Java后端、PHP后端、LeanCloud后端）

4. axios的使用
5. PureComponent 不用可以使用


## 学习目标
> 使用webpack搭建一个React运行环境



## webpack介绍
> 项目开发打包工具
[文档](https://www.webpackjs.com)

1. 浏览器不认识新的框架语法
  + 开发者写的React语法---webpack---浏览器（js、html、css）

2. ECMAScript的最新版本语法，浏览器支持有延迟
  + 开发者提前使用ES新特新----webpack----浏览器(ES5语法)






## webpack打包基本流程

1. 在不使用webpack的情况下，让浏览器尝试执行模块化语法
```
报错信息
Uncaught SyntaxError: Cannot use import statement outside a module
```

2. 使用webpack对index.js进行打包


## 使用webpack流程
> 参考step01

1. 做package.json的初始化
```
npm init
或
yarn init
```

2. 安装webpack相关依赖
```
yarn add webpack webpack-cli --dev
```

3. 在项目根目录下，新建webpack.config.js配置文件
```
const path = require("path");
module.exports = {
  mode:'production',
  entry:'./src/index.js',   //指定被打包的js文件
  output:{    //指定打包后的存放位置
    path:path.resolve(__dirname,'dist'),  //指定存放目录，如果没有该文件夹则自动新建
    filename:'abc.js'  //打包后的文件名称
  }
}
```

4. 在package.json中新增打包命令
```
"scripts": {
  "build":"webpack --config webpack.config.js"
},
```

5. 执行打包命令
```
yarn build
或
npm run build
```

6. 将打包结果，引入index.html进行测试


## webpack的插件机制
> 参考step02
> 拓展升级webpack的能力
例如:打包完成后，自动生成一个html文件，并引入打包后的js
> html-webpack-plugin


1. 插件来源
  + webpack官方插件
  + npm平台上第三方团队开发的插件

2. html-webpack-plugin插件的使用
  [文档](https://www.webpackjs.com/plugins/html-webpack-plugin/)
  + 安装
  ```
  yarn add html-webpack-plugin --dev
  ```
  + 在webpack.config.js中新增配置
  ```
  const HtmlWebpackPlugin = require('html-webpack-plugin')

  ...
  plugins:[
    new HtmlWebpackPlugin({  //配置自动生成html的插件
      filename:'efg.html',   //指定生成的文件名称
      template:'./public/index.html'  //指定参考的html模板文件路径
    })
  ]
  ```
  + 重新打包测试
  ```
  yarn build
  ```



## devServer
> 参考step02分支
> 让webapck在本地开启一个临时开发服务
  + 开启后自动打开浏览器
  + 修改代码后，自动刷新页面

1. 安装
```
yarn add webpack-dev-server --dev
```

2. 在webpack.config.js中新增devServer配置
```
devServer:{
  port:9898,  //本地服务端口
  open:true  //自动打开浏览器
}
```

3. 在package.json中新增本地服务启动命令
```
"scripts": {
    "start":"webpack-dev-server --config webpack.config.js",
    "build": "webpack --config webpack.config.js"
  },
```

1. 需要将自动生成的html文件名，全部改为index
  + plugins   调整

5. 开启本地服务并预览测试
```
yarn start
```

有可能遇到版本兼容问题，参考文章
> 降低webpack-cli的版本
[参考文章](https://www.cnblogs.com/fsg6/p/14117791.html)


## Loader
> webpack自身，并不能认识所有框架的语法
> 如果webpack遇到了React语法，需要借助对应的loader来协助编译

公司---翻译---法国
webpack---Loader---React


## Babel的介绍及认识
> 一个名字叫做Babel的loader

[官网](https://www.babeljs.cn/)

1. 知道Babel是啥？
> Babel 是一个 JavaScript 编译器
> 协助开发环境，翻译框架的高级语法
ECMAscript组织，语法立案

2. 预设 preset   
> 每一种语法的语法解析包
  + React预设   @babel/preset-react   协助babel翻译react语法
  + ES6~8 预设    @babel/preset-env    协助babel翻译ES6及更高版本的语法

3. 相关参考文档
  [在webpack中使用bebel的文档](https://www.babeljs.cn/setup#installation)
  [react预设的文档](https://www.babeljs.cn/docs/babel-preset-react)

4. 在项目的打包入口文件index.js中，写入React代码片段，尝试让webpack环境解析
> 在不使用babel-loader的情况下，webpack是无法解析react语法的
```
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
| 
| ReactDOM.render(
>   <h1>演示React代码解析结果!</h1>,
|   document.getElementById('root')
| )

```

## 在webpack中使用Babel的流程
> 参考step03 分支

1. 安装babel基础库
```
yarn add babel-loader @babel/core --dev
```

2. 安装react预设
```
yarn add @babel/preset-react --dev
```

3. 安装react核心库,并在index.js中写入基础react语法
```
yarn add react react-dom
```

4. 在webpack.config.js中，新增loader相关配置
```
module: {
  rules: [ // loader的解析规则配置
    {
      test: /\.js$/,  //告知loader解析哪种类型的文件
      exclude: /node_modules/,  //将某些文件排除在解析之外
      use: {
        loader: "babel-loader",  //指定使用的loader名称
        options: {
          presets: ['@babel/preset-react']  //指定loader需要使用的预设
        }
      }
    }
  ]
},
```

5. 在项目根目录下，新建babel.config.json配置
> 为babel服务的配置文件
```
{
  "presets": ["@babel/preset-react"]
}
```

6. 把mode改为development
   
7. 重启本地服务，测试babel的解析结果
```
yarn start
```


## 任务
> webpack不是三阶段的重点学习对象，术语了解内容

1. webpack基本使用流程

2. 配置插件，自动生成html

3. 配置devServer，自动启动本地服务，预览项目代码

4. 配置loader，让环境支持react语法