关于webpack配置环境,以及自己搭建react环境

# react

 

## 1.利用webket构建项目

1.webpack4.x项目创建步骤

（1）运行npm init -y 快速初始化项目 package.json显示

（2）在项目的根目录下创建src源代码目录和dist的目录

（3）在src中建立index.html和main.js文件 main.js是webpack的入口文件

（4）使用cnpm（npm i cnpm -g） 安装webpack 运行cnpm i webpack -D 安装webpack包 安装之前应该保证webpack已经本地安装，否则可能会报错。

（5）cnpm i webpack-cli -D 安装脚手架工具。

（6）此时安装已经完成，在package.json的scripts中输入打包命令 "dev": "webpack",此时打包会提示打包方式    

 

// 向外暴露成员webpack.config.js
module.exports = {
 mode: 'development' //development production
 //webpack4.x中，有一个较大的特性，就是约定大于配置，约定默认的打包入口路径是src -> index.js
}

(7)约定大于配置，直接运行会找不到文件，默认是走src下的index.js文件，所以将main.js文件改为index.js. 直接运行。

(8)利用webpack-dev-server 进行实时打包，cnpm i webpack-dev-server -D

(9)在运行中index.html的引入文件 <script src="/main.js"></script> 其中main.js为运行在内存根目录中实时编译的一个文件。不是dist中的，所以引入的文件地址为/main.js而不是../dist/main.js

(10)dev启动配置

"dev": "webpack-dev-server --open(自动打开浏览器) --port 3000（改变端口号为3000） --hot(热更新) --host 127.0.0.1(配置地址)" 

(11) 将index.html 托管到内存中去 

　　cnpm i html-webpack-plugin -D  

​     之后在webpack.config.js中导入并配置

// 向外暴露成员
  const path=require('path')
  const HtmlWebpackPlugin=require('html-webpack-plugin')

  const htmlplugin=new HtmlWebpackPlugin({
   template: path.join(__dirname,'./src/index.html') , //源文件
       filename:'index.html' //内存中生成的文件名称
   })
module.exports = {
     mode: 'development', //development production
 //webpack4.x中，有一个较大的特性，就是约定大于配置，约定默认的打包入口路径是src -> index.js
 plugins:[
      htmlplugin
 ]
}

(12)此时运行npm run dev 会直接打开页面，同时在内存中能够自动引入main.js 不用在index.html中引入。

 

## 2.构建react项目

（1）运行cnpm i react react-dom -s 安装包

   引入 :

   import React from 'react'

   import ReactDOM from 'react-dom'

 (2)创建虚拟dom元素

   参数1:创建的元素的类型，字符串，表示元素的名称

   参数2:是一个对象或null，表示当前这个DOM元素的属性

   参数3:子节点（包括 其它 虚拟dom获取文本子节点）

   参数n:其他子节点

   创建h1  <h1 id='myh1' title="this is h1">这是一个大大的h1</h1>

   const myh1=React.createElement('h1,{id:'myh1',title:"this is h1"},'这是一个大大的h1')

 (3)使用ReactDOM把虚拟DOM渲染到页面上

   参数1:要渲染的那个虚拟DOM元素

   参数2:指定页面上的DOM元素，当作容器

   第二个参数是dom元素

   ReactDOM.render(myh1,document.getElementById('app))

（4）为了写html标签 可以用babel来转换

   注意：这些在js中，混合写入类似于html的语法，叫做jsx，符合xml规范的js

## 3.jsx语法

   ### 1.启用jsx语法

   版本一 （babel8.X版本以下）

     （1）安装babel插件

         cnpm i babel-core babel-loader@7 babel-plugin-transform-runtime -D 

         cnpm i babel-preset-env babel-preset-stage-0 -D   语法

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

         cnpm i babel-preset-react -D

      (3)添加.babelrc配置文件

         {

            "presets":["env","stage-0","react"],

            "plugins":["transform-runtime"]

         }

      注意：npm i babel-core babel-loader babel-plugin-transform-runtime -D

           npm i babel-preset-env  babel-preset-stage-0 babel-preset-react -D

           bable-loader,babel-core 会出版本问题，请见babel版本问题 babel-loader7.x 配 babel-core 6.x

           使用 `npm i babel-core babel-loader@7 babel-plugin-transform-runtime -D

   版本二 （babel8.X版本）

 

      （1）必须安装的包

         "@babel/core": "^7.4.5",

         "@babel/plugin-proposal-class-properties": "^7.4.4",

         "@babel/plugin-transform-runtime": "^7.4.4",

         "@babel/preset-env": "^7.4.5",

         "@babel/runtime": "^7.4.5",

         "babel-loader": "^8.0.6",

 

         安装命令：

            cnpm i babel-loader @babel/core @babel/plugin-transform-runtime -D

            cnpm i @babel/preset-env @babel/runtime @babel/plugin-proposal-class-properties -D　　

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

        　　 npm install --save-dev @babel/preset-react

         （2）.babelrc文件

            {

               "presets": ["@babel/preset-env"],

               "plugins": ["@babel/plugin-transform-runtime","@babel/plugin-proposal-class-properties"]

            }

 

webpack.config.js配置项

// 向外暴露成员
const path=require('path')
const HtmlWebpackPlugin=require('html-webpack-plugin')

const htmlplugin=new HtmlWebpackPlugin({
    template: path.join(__dirname,'./src/index.html') , //源文件
    filename:'index.html' //内存中生成的文件名称
 })
module.exports = {
    mode: 'development', //development production
    //webpack4.x中，有一个较大的特性，就是约定大于配置，约定默认的打包入口路径是src -> index.js
    plugins:[
      htmlplugin
    ],
    module:{
      rules:[
        {test:/\.js|jsx$/,use:'babel-loader',exclude:/node_modules/}
      ]
    }
}

.babelrc配置项

{

 "presets": ["@babel/preset-env"],

 "plugins": ["@babel/plugin-transform-runtime","@babel/plugin-proposal-class-properties"]

}