webpack4的基本使用

首先创建项目的基本目录结构

webpack构建一个基本的react项目_html

代码都在src文件中，压缩后的代码放在dist中，创建完后执行 npm init -y 生成项目配置文件package.json,然后创建webpack的配置文件webpack.config.js文件，在里面指定打包的相关配置
webpack4有一些默认的设置，比如默认打包入口文件是src下的index.js，默认生成的打包文件叫main.js会放到dist目录下，也可以自己指定，如果采用默认设置，我们只需要指定打包的模式就可以进行打包了

module.exports = {//node语法 webpack基于node
    mode:'development'//打包模式 当前为开发环境
    // mode:'production' //生产环境 打包压缩 体积小
}

然后执行webpack

webpack构建一个基本的react项目_html页面_02

会显示相关信息，表示打包成功，这时dist文件夹下面会多出一个main.js文件，就是src下的index.js文件打包后的js文件，打包生成的main.js引入index.html文件中，就可以正常使用了。
webpack4.x再往后的版本mode也可以不指定，默认production

webpack热更新:webpack-dev-server

cnpm i webpack-dev-server -D

在项目配置文件中配置webpack-dev-erver的执行命令

"scripts": {
    "dev": "webpack-dev-server"
  },

然后执行npm run dev 就相当于执行了定义的dev右面对应的操作

这时命令行中头两行会有下面两条消息

webpack构建一个基本的react项目_html页面_03

第一句表示项目现在运行在http://licalhost:8080/
第二局是webpack 输出文件服务于 / 也就是项目根路径
在没用webpack-dev-server时打包好的文件的出口是dist目录下的main.js,当用了webpack-dev-server后，打包好的文件会被托管在根目录下，不过是在内存中（内存可以更快的加载显示，性能更好），所以物理磁盘看不到，也就是说编辑器还是文件夹中看不到打包好后的main.js,不过它确实是存在的，并且这时对index.js中的操做保存后页面是没反应的，因为当前index.js文件打包好的地址不再是dist目录下，而是在项目根路径下，只是我们看不到，现在index.html文件中就要引入根路径下的main.js文件了。

<script src="/main.js"></script>//根目录下的main.js

这样我们对index.js文件中做的操作保存后页面会自动更新，省去了以前要查看一次效果就要webpack一次的步骤
webpack-dev-server还有其他的参数可以配置
比如：

"dev": "webpack-dev-server --open firefox --port 3000 --hot --host 127.0.0.1"

以上表示执行webpack-dev-server操作时–open 自动打开默认浏览器，后面如果加上firefox表示自动打开firefox浏览器，–port表示打开地址端口，默认8080， --hot表示热更新，不写默认就有， --host 表示打开地址，默认localhost

这样我们的js文件就放到了项目根路径的内存中，不过目前来看打开的是整个项目，还需要我们手动点击src文件，才会显示我们的html文件，怎么让我们执行npm run dev就自动打开浏览器并进入index.html页面呢
插件：html-webpack-plugin：在内存中生成index.html文件，并引入内存中的main.js
首先引入

cnpm i html-webpack-plugin -D

然后webpack使用该插件

const path = require('path')
const HtmlWebPackPlugin = require('html-webpack-plugin')

const htmlPlugin = new HtmlWebPackPlugin({
    template:path.join(__dirname,'./src/index.html'),
    filename:'index.html'//内存中生成的html页面的文件名
})

module.exports = {
    mode:'development',
    plugins:[
        htmlPlugin
    ]
}

然后执行npm run dev就会自动打开浏览器并显示index.html页面
这样html页面就不需要引js文件了index.html 和 main.js都放在项目根路径的内存中 html-webpack-plugin生成的html文件会自动引入main.js，路径也会自动配置好，不需要我们担心
至此一个基本的webpack配置就搭建好了

npm 后面的 -D -S：
-D 项目开发时期用到的工具 : webpack …
-S 项目开发和上线时都要用到的：vue react react-dom …

react基本使用
首先安装react和react-dom

cnpm i react react-dom -S

然后就简单了，只是使用react的语法创建一个虚拟dom，将其渲染到页面上

//导入 导入名必须是React和ReactDom
import React from 'react'
import ReactDom from 'react-dom'

//创建虚拟DOM元素
const myh1 = React.createElement('h1',{id:"myh1",title:"This is a H1"},"Hello React")

//渲染到界面的DoM元素中
ReactDom.render(myh1,document.getElementById("app"))

index.html

<body>
    <div id="app"></div>
</body>

webpack构建一个基本的react项目_webpack_04


Hello react

一直用React.createElement和ReactDom.render来创建虚拟DOM太过麻烦，所以有了JSX

jsx

在js文件中写html语法

本质还是通过React.createElement和ReactDom.render来创建虚拟DOM，不过我们只需要写html代码，而转换成React.createElement和ReactDom.render的格式则由第三方插件替我们完成

webpack默认只能打包js文件，无法处理.vue .png .less 等格式文件，处理它们由对应的loader，而这些loader的配置规则都写在webpack.config.js文件中的modle中

安装需要的包 babel8较之前版本有所更改。 下载：

cnpm i -D babel-loader
    cnpm i -D @babel/core @babel/preset-env @babel/runtime @babel/plugin-transform-runtime @babel/preset-react
     cnpm i -D @babel/plugin-proposal-class-properties

modle中配置匹配规则

module:{//所有第三方模块的使用
        rules:[//规则
            {
                test:/\js|jsx$/,//匹配js或jsx
                use:'babel-loader',//使用babel-loader
                exclude:/node_modules/,//排除node_modules中的js或jsx语法
            }
        ]
    }

rules中规定了当是js或jsx时使用babel-loader，所以要配置下babel-loader
配置babel-loader：根目录下创建 .babelrc 文件

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

然后就可以使用jsx语法了

const myDiv = <div id="wrap">
    <h1>Hello React</h1>
</div>

ReactDom.render(myDiv,document.getElementById("app"))

npm run dev

webpack构建一个基本的react项目_webpack_05

👌

各个包的作用

webpack构建一个基本的react项目_配置文件_06