# webpack-react

**Repository Path**: yooyeLearning/webpack-react

## Basic Information

- **Project Name**: webpack-react
- **Description**: 使用webpack为React搭建运行环境
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 1
- **Forks**: 0
- **Created**: 2021-02-25
- **Last Updated**: 2022-12-27

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

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

## webpack介绍
> 项目开发打包工具
[文档](https://www.webpackjs.com/)
1. 浏览器不能直接识别模块化代码 ---webpack---整合为浏览器可识别代码
2. 浏览器对ES6以上语法、.vue、.jsx ----webpack--- （HTML、css、js、img）
3. 可以为项目开发提供比较便利的开发环境


## webpack打包基本流程

1. 不使用webpack的时候，通过模块化定义js代码
```
Uncaught SyntaxError: Cannot use import statement outside a module
```

2. 使用webpack打包index.js



## 使用webpack流程

1. 安装
```
yarn init
yarn add webpack webpack-cli --dev
```

2. 新建webpack.config.js并添加配置项
> 必须在项目根目录下
```
var path = require('path')
module.exports = {
  entry:'./src/index.js',  //指定被打包文件
  output:{
    path:path.resolve(__dirname,'dist'),
    filename:'bundle.js'
  }
}
```

3. 在package.json中添加scripts可执行命令
```
"scripts":{
  "build":"webpack --config webpack.config.js"
},
```
4. 执行打包命令，验证打包结果
```
yarn build
```

## webpack的插件机制
> 每个插件都会负责解决某一类问题

1. 插件来源
  + webpack官方插件
  + 第三方开发的npm插件

2. html-webpack-plugin插件的使用
  + 安装  yarn add html-webpack-plugin
  + 引入配置
  + 重新打包，查看打包结果


## Loader
> 参考 step02分支
> webpack本身在打包过程中，并不能完全识别所有的新语法（如：React）
面向法国外贸公司--翻译官---中法
webpack----Loader ----React&js

0. 在项目打包入口文件index.js中，写入一段react代码

1. 不使用Loader，直接打包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')
| );
```


2. 使用babel-loader协助webpack编译react语法


## Babel的使用
> 参考 step02分支
> Babel 是一个 JavaScript 编译器。
[文档](https://www.babeljs.cn/)

预设
翻译官（法语、中文语法、英文）
babel预设（ES6语法预设、react语法预设）

1. 安装babel核心库
```
yarn add babel-loader @babel/core --dev
```

2. 在webpack中配置loader
[文档](https://www.babeljs.cn/setup#installation)
> 在webpack.config.js中追加一个module配置项
```
...其他配置项,
module: {
  rules: [  //loader的编译规则
    {
      test: /\.m?js$/,  //指定被编译文件类型
      exclude: /node_modules/,  //排除不需要编辑的文件目录
      use: {
        loader: "babel-loader",  //指定编译使用的loader
        options: {
          presets: ['@babel/preset-react']  //指定loader编译需要的预设
        }
      }
    }
  ]
}
```

3. 安装react预设包
> 协助babel翻译react语法
```
yarn add @babel/preset-react --dev
```

4. 在项目根目录新建babel.config.json文件，指定babel相关配置
```
{
  "presets": ["@babel/preset-react"]
}
```


## devServer
> 启动本地开发服务
> 自动打包、自动打开浏览器、监听代码变化并刷新浏览器
[文档](https://www.webpackjs.com/configuration/dev-server/)
1. 安装
```
yarn add webpack-dev-server --dev
```

2. 在webpack.config.js中配置devServer
```
devServer:{
  port:8080,
  open:true
}
```

3. 在package.json中新增scripts可执行命令
```
"scripts": {
  "build": "webpack --config webpack.config.js",
  "dev": "webpack serve --open --config webpack.config.js"
},
```

4. 执行yarn dev命令，启动项目并预览



## 任务

1. 体验webpack的基本打包流程

2. webpack插件机制plugins

3. Loader预编译
  + 什么是Loader？
  + Loader与plugins之间有什么区别？
  + bable-loader如何使用？

4. devServer的配置使用

5. 将React项目代码迁移至webpack环境，并解决代码编译问题



## 在webpack环境中，运行React项目

 1. webpack无法解析css样式文件
 ```
 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
> body {
|   margin: 0;
|   font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
 @ ./src/index.js 3:0-21
 ```

2. 安装css-loader解决该问题
```
yarn add style-loader css-loader --dev
```

3. 在webpack.config.js中新增css-loader配置
> webpack.config.js / module / rules


# React is not  defined问题解决
[参考连接](https://stackoverflow.com/questions/32070303/uncaught-referenceerror-react-is-not-defined)

在webpack.config.js中新增一个plugins
```
new webpack.ProvidePlugin({  //解决React is  undefined问题
    "React": "react",
}),
```