# 初始化项目步骤

# 手动初始化项目

npm init -y

# 安装配置 webpack

webpack (opens new window)

npm i webpack -D
如果是webpack4.0+版本,需要安装webpack-cli
npm i webpack-cli -D

# webpack 默认只能打包处理.js 后缀名类型的文件。想.png .vue 无法主动处理,所以要配置对应的第三方 loader

# webpack 创建了一个全局变量 process.env.NODE_ENV 字段标识了当前运行环境 (development / production)

等同于在插件 plugins 中加入了 new webpack.DefinePlugin({ "process.env.NODE_ENV": JSON.stringify("development|production") }) 用来区分不同的状态(线上版本或者开发版本),同时可以在程序中区分程序状态。

webpack 如果发现有处理不了的文件类型,会去配置文件中的 module 对象中的 rules 中寻找对应的第三方loader模块的配置规则

在配置rules规则时一定要加exclude字段,标记排除对应的文件,否则运行项目会报错

# webpack 配置中的 mode

mode 的默认配置就是 productiondevelopment / production / none 标识运行环境

前两个是有预设的插件,而最后一个则是什么都没有,

也就是说设置为 none 的话,webpack 就是最初的样子,无任何预设,需要从无到有开始配置。

webpack 的配置中,其他配置都可以没有!但是 mode 是必备的,

如果不加 mode,官方虽然会打包,但同时也会给你一个警告:

WARNING

WARNING in configuration The 'mode' option has not been set, webpack will fallback to 'production' for this value. Set 'mode' option to 'development' or 'production' to enable defaults for each environment. You can also set it to 'none' to disable any default behavior. Learn more: https://webpack.js.org/concepts/mode/

mode 没有被设置的情况下,系统就会给你一个默认的 production 模式。

配置 webpack,手动打包命令,可以试着用下这个命令

"scripts": {
	"build": "webpack --mode production"
}

# 安装配置 webpack-dev-server

webpack-dev-server (opens new window)

npm i webpack-dev-server -D

webpack-dev-server 热打包更新 打包好的 main.js 文件是托管到了内存中,所以在项目根目录看不到

这个文件相当于就在项目根目录下,有一个看不到的 main.js

package.json 文件中的 scripts 对象中添加以下命令

可以试着用下这个命令, 这里需要在 index 中引入一个 main.js

<script src="/main.js"></script>

"scripts": {
	"serve": "webpack-dev-server --open --port 8080 --hot"
}

然后在命令行中输入npm run serve即可启动项目

有可能会出现 webpack webpack-cli webpack-dev-server 版本不兼容的问题,导致启动不了项目。可以选择降级 webpack-cli 来解决该问题

如报错:

Cannot find module ``'webpack-cli/bin/config-yargs'

// 降级cli
yarn add webpack-cli@3.3.12 --dev

# 安装配置 htmlplugin

打包本地 html 文件 html-webpack-plugin (opens new window)

安装该插件之后,就不需要我们自己每次打包文件之后,手动在 index.html 文件中引入 main.js

npm i html-webpack-plugin -D
// 配置文件中加入以下代码,如config.js或webpack.config.js
var HtmlWebpackPlugin = require('html-webpack-plugin');
var path = require('path');

const htmlPlugin = new HtmlWebpackPlugin({
  title: 'website',
  /**
  * 如果不指定template源文件地址,则不会打包src中的index.html,而是生成一个新的html
  */
  template: path.join(__dirname, '/src/index.html'),
  filename: 'index.html',
});

module.exports = {
  /* do something... */
  plugins: [htmlPlugin],
  /* do something... */
};

# 安装 react react-dom

npm i react react-dom -S
import React from 'react';
import ReactDOM from 'react-dom';

/**
* 第一个参数是必填,传入的是似HTML标签名称,ul, li
* 第二个参数是选填,表示的是属性,className,可以传个null或者{}
* 第三个参数是选填, 子节点, 要显示的文本内容
*/
const div = React.createElement('div', {}, '一个div元素');

ReactDOM.render(div, document.getElementById('app'));

React.createElement()方法返回的是一个虚拟 DOM 对象。

JSX语法在运行时被解析为React.createElement()方法执行,那么同理, 用JSX语法在js文件中写的<h1>标题</h1>赋值给一个变量的时候var h1 = <h1>标题</h1>,这个变量h1就是一个虚拟 DOM 对象

# 配置 JSX

TIP

JSX 语法的本质还是在运行的时候,被转换成了 React.createElement 形式来执行的。

  1. 注释:使用块注释 { /* */ },不推荐使用行注释 // 可以省去一些特殊情况的麻烦
  2. JSX 中的元素添加 class 类名:需要使用className来代替classhtmlFor替换 labelfor属性
  3. style 行内样式不能是字符串需要是 对象的形式 style={\{color: '#ccc'\}}
  4. JSX 创建 DOM 的时候,所有的节点,必须有唯一的根元素进行包裹
  5. 标签必须成对出现,如果是单标签必须要闭合
  6. 标签首字母
  • 如果小写字母开头,则将该标签转为 HTML 中的同名元素,如果 HTML 中没有该标签对应的同名元素,则报错
  • 如果大写字母开头,react 就去渲染对应的组件,如果组件没有定义,则报错 is not defined
  1. 当编译引擎,在编译 JSX 代码的时候,如果遇到了<那么就把它当做 HTML 代码去编译,如果遇到了{}就把花括号内部的代码当做普通的 JS 代码去编译

# 安装 babel 插件

npm i babel-core babel-loader babel-plugin-transform-runtime -D
npm i babel-preset-env babel-preset-stage-0 -D

// 下载后也要注意版本号不一致的问题

# 安装能够识别转换 jsx 语法的包 babel-preset-react

npm i babel-preset-react -D

# 添加 .babelrc 配置文件

{
    "presets": ["env", "stage-0", "react"],
    "plugins": ["transform-runtime"]
}

# 添加 babel-loader 配置项

// webpack.config.js 或其他对应配置文件中
module: {
  //要打包的第三方模块
  rules: [{ test: /\.js|jsx$/, use: 'babel-loader', exclude: /node_modules/ }];
}
  • 配置导入文件时省略文件后缀
// webpack.config.js 或其他对应配置文件中
resolve: {
    // 配置导入文件时,省略文件后缀
    extensions: ['.js', '.jsx', '.json'],
    // 设置路径别名
    alias: {
      '@': path.join(__dirname, 'src'), // 这样配置后 @ 可以指向 src 目录,@符号的好处如果后期需要抽离组件,不用考虑路径问题,可以避免一些路径问题而引起的bug
    }
}

# vscode 中配置 JSX 语法自动补全,在 vscode 中 settings.json 文件中加入以下代码

// JS文件中自动补全JSX语法自动补全
"emmet.includeLanguages": {
"javascript": "javascriptreact"
},