React修行日志（一）

关于React

• React 是一个用于构建用户界面的 JAVASCRIPT 库；
• React 主要用于构建UI，很多人认为 React 是 MVC 中的 V（视图）；
• React 起源于 Facebook 的内部项目，用来架设 Instagram 的网站，并于 2013 年 5 月开源；
• React 拥有较高的性能，代码逻辑非常简单，越来越多的人已开始关注和使用它；

当前前端三大主流框架

• Angular.js 较早的前端框架，由谷歌公司维护，学习曲线较陡NG1学习起来比较麻烦，NG2~NG5开始进行了一系列改革，也提供了组件化开发的概念；从NG2开始，也支持使用TS（TypeScript）进行编辑；
• React.js 最流行（用的人多）的门框架，设计优秀，一切基于JS并实现了组件化开发的思想；
• Vue.js 目前最火（关注的人多）的一门前端框架，由国人开发，文档相对友好；

DIFF算法

Node.js

webpack项目的创建

一、webpack初始化

• 快速初始化项目：npm init -y
• 项目根路径创建src（源码目录）与dist（打包目录）
• 安装webpack：npm i webpack -D
• 安装webpack命令行工具（4.x后需要安装-打包与命令行分开）：npm i webpack-cli -D 或者npm i webpack webpack-cli -D
• 创建webpack.config.js配置文件

//向外暴露一个打包配置对象
module.exports = {
	mode: 'development', //webpack4.x后的属性，development、production
	//entry: '',//webpack4.x中，约定大于配置，默认的打包入口路径为src->index.js
}

二、安装配置 webpack-dev-server：自动将js文件打包至缓存中

• 安装：npm i webpack-dev-server -D
• 修改package.json配置文件

{
  "name": "webpack",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "dev": "webpack-dev-server --open firefox --host 127.0.0.1 --port 3000 --hot --progress --compress"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "html-webpack-plugin": "^4.3.0",
    "webpack": "^4.44.1",
    "webpack-cli": "^3.3.12"
  }
}

• 运行： npm run dev

三、安装配置 html-webpack-plugin插件:自动将打包至缓存中的文件追加到html文档中

• 安装：npm i html-webpack-plugin -D
• 修改webpack.config.js配置文件

const path = require('path')
const HtmlWebPackPlugin = require('html-webpack-plugin') //导入内存中自动生成的 index 页面的插件

//创建一个插件的实例对象
const htmlPlugin = new HtmlWebPackPlugin({
    template: path.join(__dirname, './src/index.html'),//源文件
    filename: 'index.html'
})

//向外暴露一个打包配置对象
module.exports = {
    mode: 'development', //webpack4.x后新增，必选项，production，development
    //entry: '' //webpack4.x中，约定大于配置，默认入口程序为index.js，对应打包后的为dist>main.js
    plugins: [
        htmlPlugin
    ],
}

• 运行项目：npm run dev