# react-demo

**Repository Path**: bysu/react-demo

## Basic Information

- **Project Name**: react-demo
- **Description**: 从零开始配置一个react,不需要脚手架
- **Primary Language**: Unknown
- **License**: MIT
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 1
- **Created**: 2021-11-16
- **Last Updated**: 2021-11-16

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

---
title: 玩转webpack
tags: webpack
date: 2020-03-26 16:27:12
---

近来得闲，重新撸了一边webpack文档，将webpack的用法以及作用基本理清了脉络，虽然各大前端框架的生态系统越来越完善，每个框架基本都搭配了一套标准的脚手架工具，但是那是搭配好的套餐，用起来虽然也还行，还是总觉得哪里不得劲儿，就像开车开了个自动档模式，不能根据自己的项目随心所欲的搭配功能。所以今天我们就来好好啃一啃webpack,知其然也知其所以然。
## 核心概念
webpack的核心功能就是模块化打包，既然是打包就一定涉及到entry(入口)和output(出口)，剩下的两个核心概念是loader(加载器)和plugin(插件)以及mode(模式)。
### entry && output
entry和output就是字面意思上的入口和出口，就是打包过程当中读取代码的入口以及编译输出文件。
###  mode
mode有点类似于半自动挡模式：提供mode配置选项，webpack会使用相应模式的内置功能进行自动优化。就这么一句话就可以概括了模式。至于在哪种模式下，webpack会开启那些功能，可以看如下表：

| 选项 | 描述 |
| :------| :------ |
| development | 会将 process.env.NODE_ENV 的值设为 development。启用 NamedChunksPlugin 和 NamedModulesPlugin。 | 
| production| 会将 process.env.NODE_ENV 的值设为 production。启用 FlagDependencyUsagePlugin, FlagIncludedChunksPlugin, ModuleConcatenationPlugin, NoEmitOnErrorsPlugin, OccurrenceOrderPlugin, SideEffectsFlagPlugin 和 UglifyJsPlugin. | 
###  loader
loader是加载器，用于对模块的源代码进行转换。loader 可以将所有类型的文件转换为 webpack 能够处理的有效模块，然后你就可以利用 webpack 的打包能力，对它们进行处理。

在 webpack 的配置中 loader 有两个目标：
1. test 属性，用于标识出应该被对应的 loader 进行转换的某个或某些文件。
2. use 属性，表示进行转换时，应该使用哪个 loader。

```
const config = {
  module: {
    rules: [
      { test: /\.txt$/, use: 'raw-loader' }
    ]
  },
};
```
以上配置中，对一个单独的 module 对象定义了 rules 属性，里面包含两个必须属性：test 和 use。这告诉 webpack 编译器(compiler) 如下信息：
> “嘿，webpack 编译器，当你碰到「在 require()/import 语句中被解析为 '.txt' 的路径」时，在你对它打包之前，先使用 raw-loader 转换一下。”

当你需要对各个文件转为webpack能够处理的有效模块时可以去[loader列表](https://www.webpackjs.com/loaders/)选择一个合适的加载器

### plugin
插件则可以用于执行范围更广的任务。插件的范围包括，从打包优化和压缩，一直到重新定义环境中的变量。插件接口功能极其强大，可以用来处理各种各样的任务。
想要使用一个插件，你只需要 require() 它，然后把它添加到 plugins 数组中。多数插件可以通过选项(option)自定义。你也可以在一个配置文件中因为不同目的而多次使用同一个插件，这时需要通过使用 new 操作符来创建它的一个实例。
当你想用某些实现某些任务优化时可以去[插件列表](https://www.webpackjs.com/plugins/html-webpack-plugin/)看没有现成的插件开箱即用，

这里有个例子可以说明loader以及plugin用法
```
const HtmlWebpackPlugin = require('html-webpack-plugin'); // 通过 npm 安装
const webpack = require('webpack'); // 用于访问内置插件

const config = {
    ...
    plugins: [
        new HtmlWebpackPlugin({template: './src/index.html'})
    ]
};

module.exports = config;
```

引入了HtmlWebpackPlugin插件自动生成一个HTML文件。

### 配置文件
虽然webpack支持在命令行中手动敲下webpack-cli命中以构建文件，但是一般的项目要复杂的多，
所以webpack支持提供配置文件。这比在终端(terminal)中手动输入大量命令要高效的多。所以让我们创建一个取代以上使用 CLI 选项方式的配置文件：
```
const path = require('path');

module.exports = {
  entry: './src/index.js',
  output: {
    filename: 'bundle.js',
    path: path.resolve(__dirname, 'dist')
  }
};
```
这是一个最简单的配置文件，定义了输入文件与输出文件，读取并运行src下的index.js文件将生成的bundle.js输出到dist文件夹中。
有了这样的一个配置文件之后，有两中方式启动它
1. 通过命令行工具运行`npx webpack --config webpack.config.js`
这行命令表示以指定的webpack配置文件运行webpack命令
> 如果 webpack.config.js 存在，则 webpack 命令将默认选择使用它。我们在这里使用 --config 选项只是向你表明，可以传递任何名称的配置文件。这对于需要拆分成多个文件的复杂配置是非常有用。
2. NPM 脚本(NPM Scripts)
考虑到用 CLI 这种方式来运行本地的 webpack 不是特别方便，我们可以设置一个快捷方式。在 package.json 添加一个 npm 脚本(npm script)：
```
"scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "build": "webpack"
},
```
现在，可以使用 npm run build 命令，来替代我们之前使用的 npx 命令。

谈谈我自己对webpack的理解，把webpack看作是要编织一条美丽的珍珠项链的话，那么配置文件则是项链的链子，而webpack中[loader列表](https://www.webpackjs.com/loaders/)和[插件列表](https://www.webpackjs.com/plugins/html-webpack-plugin/)则相当于原料库，我们可以从原料库中挑出我们所需要的珍珠，entry和output则是选择以及打磨这条项链的入口及出口。好了一切准备就绪了，我们要学习的变成如何打造一条美丽的珍珠项链。首先是要学习如何打磨完美的入口和出口。然后我们要学习应该在什么地方放上怎样的珠子，以及如何放上去。

## 实例——从零创建一个React应用
现在我们可以从简单到复杂一步一步来完成一个针对react的从0到1的配置文件：
### 实现流程
1，初始化npm项目，生成package.json。

2，添加public/index.html。

3, 安装Babel，创建.babelrc进行配置。

4，安装react、react-dom、热更新react-hot-loader。

5，安装webpack，创建webpack.config.js进行配置。

6，添加src/index.js、src/App.js、src/App.css。

7，配置package.json，修改启动命令。

8，启动项目

### 具体步骤

#### 1. 初始化npm项目，生成package.json
创建一个新项目，并cd进入。
```
$ mkdir react-demo
$ cd react-demo
```
创建package.json文件, 如果你想跳过初始化时的问题，加上 -y，以默认选项安装:
```
npm init -y
```
#### 2. 添加public/index.html。
```
mkdir public
cd public
touch index.html
```
index.html
```
<!-- sourced from https://raw.githubusercontent.com/reactjs/reactjs.org/master/static/html/single-file-example.html -->
<!DOCTYPE html>
<html>

<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
  <title>React Starter</title>
</head>

<body>
  <div id="root"></div>
  <noscript>
    You need to enable JavaScript to run this app.
  </noscript>
  <script src="../dist/bundle.js"></script>
</body>
</html>
```
这里引入的bundle.js后面会用到。

#### 3. 安装Babel，创建.babelrc进行配置。
```
cd ../
npm install -D @babel/core@7.1.0 @babel/cli@7.1.0 @babel/preset-env@7.1.0 @babel/preset-react@7.0.0
touch .babelrc

```
.babelrc
```
{
  "presets": ["@babel/env", "@babel/preset-react"]
}
```
#### 4. 安装react、react-dom、热更新react-hot-loader
```
npm i react react-dom -S
npm i react-hot-loader -D

```
#### 5. 我们需要安装webpack的以及需要的开发依赖，创建webpack.config.js进行配置
```
npm i webpack webpack-cli webpack-dev-server style-loader css-loader babel-loader --save-dev
touch webpack.config.js
```
webpack.config.js
```
const path = require("path");
const webpack = require("webpack");

module.exports = {
  entry: "./src/index.js",
  mode: "development",
  module: {
    rules: [
      {
        test: /\.(js|jsx)$/,
        exclude: /(node_modules|bower_components)/,
        loader: "babel-loader",
        options: { presets: ["@babel/env"] }
      },
      {
        test: /\.css$/,
        use: ["style-loader", "css-loader"]
      }
    ]
  },
  resolve: { extensions: ["*", ".js", ".jsx"] },
  output: {
    path: path.resolve(__dirname, "dist/"),
    publicPath: "/dist/",
    filename: "bundle.js"
  },
  devServer: {
    contentBase: path.join(__dirname, "public/"),
    port: 3000,
    publicPath: "http://localhost:3000/dist/",
    hotOnly: true
  },
  plugins: [new webpack.HotModuleReplacementPlugin()]
};
```

#### 6. 添加src/index.js、src/App.js、src/App.css。

```
mkdir src
cd src
touch index.js
touch App.js
touch App.css
```

index.js
```
import React from "react";
import ReactDOM from "react-dom";
import App from "./App.js";
ReactDOM.render(<App />, document.getElementById("root"));
```

App.js
```
import React, { Component} from "react";
import {hot} from 'react-hot-loader';
import "./App.css";

class App extends Component{
  render(){
    return(
      <div className="App">
        <h1> Hello</h1>
      </div>
    );
  }
}

export default hot(module)(App);
```

App.css
```
.App {
  margin: 1rem;
  font-family: Arial, Helvetica, sans-serif;
  border: 1px solid red;
}
```

#### 7. 配置package.json，修改启动命令。

在package.json里配置scripts字段。
```
"scripts": {
    "start": "webpack-dev-server --mode development",
    "test": "echo \"Error: no test specified\" && exit 1"
  }
```

#### 8. 启动项目。

```
npm start
```

在浏览器键入http://localhost:3000以启动项目