react+webpack搭建项目

一、搭建webpack项目

1、npm init-y  快速初始化项目，会生成package.json文件

2、在项目根目录创建src源代码目录和dist产品目录
Src下新建index.html

3、安装webpack   npm install webpack --s –D

4、npm install webpack-cli --s –D  (4.x版本以后需要安装）

5、进行webpack打包命令的时候，出错,因为在4.xx版本之后，约定大于配置,即默认的入口文件是index.js而不再是main.js (所以新建的是index.js文件)

6、新增webpack.config.js文件，在里面进行mode的配置(mode一般有2种,一个是development,另一个是production)再次执行打包命令，完成打包

完成打包后----打包的输出文件是dist下的main.js

7、使用webpack-dev-server实现自动打包编译的功能 ：npm i webpack-dev-server --s

不用每次修改完代码后都要进行打包

8、在package.json文件中的scripts下新增dev节点

9、实现npm run dev 后出现以下页面

打包的文件被托管于根目录)

10、Webpack-dev-server打包好的main.js是托管到了内存，所以在项目根目录种看不到,但是我们可以认为在项目根目录种有一个看不见的main.js

这样，我们在引入main.js文件时，不用指定../dist/main.js，只需要引入/main.js即可，尽管在根目录下没有这个文件

11、npm install html-webpack-plugin --s -D
作用：将页面生成到内存中去,因为index.html默认在物理磁盘中

12、webpack.config.js文件中进行插件实列的创建且进行节点配置

const path = require("path");
//npm install html-webpack-plugin --s -D
const HtmlWebpackPlugin = require('html-webpack-plugin');

// 创建一个插件的实例对象
const htmlPlugin = new HtmlWebpackPlugin({
    template: path.resolve('./src/index.html'),//源文件
    filename: 'index.html'//生成的内存中首页的名称
})
module.exports = {
    mode: "development",
    plugins: [
        htmlPlugin
    ]
}

这样，在index.html中就可以不用指定main.js所在的路径，默认会生成

13、再次运行直接跳转页面，此时body下会自动生成一个script标签

--------------------------------------------------------------------------------------------

项目结构如下所示：

二、在项目中使用react

1、运行：npm i react react-dom --s

其中：react专门用于创建组件和虚拟DOM。同时组件的生命周期都在这个包中

          react-dom 专门进行DOM操作，最主要的应用场景，就是ReactDOM.render()

2、在index.html页面中创建容器

<!--容器，将来是要react创建的虚拟dom元素，都会被渲染到这个指定的容器中-->
<div id="app"></div>

3、在index.js中引入包

//这两个导入的时候，接收的成员名，必须这么写
import React from 'react'  //创建组件，虚拟dom'元素
import ReactDOM from 'react-dom'  //把创建好的组件和虚拟dom放到页面上展示

4、创建虚拟dom元素并渲染到页面上

// #创建虚拟dom元素
const myh1 = React.createElement('h1',{id:'myh1',title:'this is a h1'},'标题一')

// 把虚拟dom渲染到页面上
ReactDOM.render(
    myh1,
    document.getElementById('app')
)

现在，index.js中的内容为：

运行后的结果为：

5、但是，上述方法并不好，渲染页面上的dom结构，最好的方式是写html代码！！

但是直接写：

const mydiv = <div id="mydiv" title="this is a div">这是一个div元素</div>

会报错，因为在js文件中默认不能写这种类似于html的标记(JSX)，否则会打包失败！！！！ 

怎么解决呢？？---需要合适的第三方loader来处理js代码

安装：babel，这种jsx语法在执行的过程中会被babel转化成createElement形式

5、如何启用jsx语法？

（1）安装babel插件

运行：npm i babel-loader @babel/core @babel/plugin-transform-runtime @babel/runtime -D

运行：npm i @babel/preset-env @babel/plugin-proposal-class-properties -D

（2）安装能够世界jsx语法的包

运行：npm i @babel/preset-react -D

（3）添加  .babelrc  配置文件

{
  "presets": ["@babel/preset-env", "@babel/preset-react"],
  "plugins": ["@babel/plugin-transform-runtime", "@babel/plugin-proposal-class-properties"]
}

（4）在配置文件中添加babel-loader配置项：

module: { //要打包的第三方模块
    rules: [
      { test: /\.js|jsx$/, use: 'babel-loader', exclude: /node_modules/ }
    ]
}
6、此时运行 npm run dev

三、引入css

1、安装css-loader、style-loader

运行：npm i -D css-loader style-loader

2、配置webpack.config.js

{ test: /\.css$/, use: ["style-loader", "css-loader"] }

注意：loader处理的顺序：

• 先是css-loader处理（webpack把mian.css文件作为模块打包）
• 接着是style-loade处理（让打包后的css可以写入html文件中的<style>

3、编写index.css文件，引入css文件

4、运行npm run dev，结果如下

四、引入图片

A. webpack如何在css文件中引入图片；

B. webpack如何在html中引入图片；

1、安裝file-loader：

npm i -D file-loader

2、配置webpack.config.js

{test: /\.(jpg|png|gif|bmp|jpeg)$/, use: ["file-loader"]}

3、在css中引入我们的图片

注：前面已经在index.js中引入了index.css了

运行结果：

4、在html中引入图片

import myImg  from './1.png'

ReactDOM.render(
    <div>
        <img src={myImg}/>
    </div>,
    document.getElementById('app')
)

运行结果：