前端包管理工具的配置流程

一：新建目录结构，初始化项目

1 新建一个文件夹作为新项目的工作空间。
2 使用vscode工具打开文件夹，使用【npm init -y】命令初始化项目，项目初始化后出现一个【package.json】的文件。
3 新建一个【src】目录，用来存放源代码。
4 新建一个【dist】目录，用来存放产品的打包文件。
5【src】下新建首页【index.html】。
6【src】下新建入口文件【index.js】。

二：安装webpack的包管理工具

7 安装webpack打包工具

【cnpm i webpack webpack-cli -D】

8 全局运行【npm i cnpm -g】
9 在【webpack.config.js】配置文件中配置webpack

//向外暴露一个打包对象
module.exports = {
    mode:'development'//development production
}

10 约定的打包的入口文件为【index.js】文件，【约定大于配置的规则】
11 使用【webpack】打包，打包后在【dist】目录下生成一个【main.js】的文件。

三：配置修改后自动编译：

12 实时打包编译工具：【webpack-dev-server】
13 安装：【cnpm i webpack-dev-server -D】
14 在【package.json中配置】

"dev":"webpack-dev-server"

15 执行：【npm run dev】，即可完成修改代码后的自动编译
16 生成的【mian.js】是放在内存中的根目录下，引用内存中的【main.js】

四：配置编译后自动打开浏览器

"dev":"webpack-dev-server --open"

五：配置编译后自动跳转到浏览器后自动打开首页

1 问题：编译后没有自动跳转到首页
2 解决：配置编译后自动跳转到首页，即配置首页到内存中
3 安装【html-webpack-plugin】插件，【cnpm i html-webpack-plugin -D】
4 在【webpack.config.js】中进行配置【html-webpack-plugin】插件

//配置插件
    const path = require('path')
    const HtmlWebpackPlugin = require('html-webpack-plugin') //配置在内存中自动生成index.js的插件
 //创建一个插件的实例对象
 const htmlPlugin = new HtmlWebpackPlugin({
     template:path.join(__dirname,'./src/index.html'),
     filename:'index.html'
 })
//向外暴露一个打包对象
module.exports = {
    mode:'development',
    plugins:[
        htmlPlugin
    ]
}

六：总结：

总结：
（1）完成了打包后的【mian.js】文件进内存
（2）【index.html】进内存
（3）并且打包好的【mian.js】自动注入到【index.html】中，使用包管理工具的基本环境设置完成。

七：安装react依赖：

1 安装react依赖【cnpm i react react-dom -S】

react:专门用于创建组件和虚拟DOM元素，同时组件的生命周期在这里
react-dom:专门用于对虚拟DOM进行操作，最主要的应用场景是：【ReactDOM.render()】。

八：在react中启用JSX语法：

1 将html直接定义在js代码中。这些标签代表了一个或者多个js对象。并不是标签。这种在js中混合写入html代码的形式叫做JSX。浏览器默认不识别，可以使用第三方的工具来转换为原生的react中的方法。JSX的本质：在运行的时候被转换为了createlement()。
2 第三方的转换器，使用babel转换html标签
3 安装Babel插件

运行【cnpm i babel-core babel-loader babel-plugin-transfrom-runtime -D】
运行【cnpm i babel-preset-env babel-preset-stage-0 -D】

4 安装能识别转换JSX语法的包：

运行【cnpm i babel-preset-react -D】

5 添加【.babelrc】配置

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

6 在【package.json】中加入插件的配置信息

//向外暴露一个打包对象
module.exports = {
    mode:'development',
    plugins:[
        htmlPlugin
    ],
    module:{ //所有第三方的loader的匹配规则
        rules:[
            {test:/\.js|jsx$/,use:'babel-loader',exclude:/node_modules/}
        ]
    }
}

7 通过以上的配置，babel的配置完成，我们可以使用JSX语法来创建虚拟DOM元素或者组件。

前端包管理工具的配置流程