前端包管理工具配置流程1：新建目录结构并初始化项目1新建一个文件夹作为新建项目的工作空间。2使用vscode工具打开文件夹，使用[npminit-y]命令初始化项目。项目初始化后，会出现一个[package.json]文件。3新建一个[src]目录存放源代码。4新建【dist】目录，存放产品打包后的文件。5在[src]下创建主页[index.html]。6在[src]下新建入口文件[index.js]。二：安装webpack包管理工具7安装webpack打包工具【cnpmiwebpackwebpack-cli-D】8全局运行【npmicnpm-g】9在【webpack.config.js】配置文件中配置webpack//toExpose一个打包对象module.exports={mode:'development'//developmentproduction}10约定的打包入口文件为[index.js]文件，[约定大于配置的规则]11使用[webpack]进行打包，package然后在[dist]目录下生成一个[main.js]文件。三：配置修改后自动编译：12实时打包编译工具：[webpack-dev-server]13安装：[cnpmiwebpack-dev-server-D]14在[package.json]"dev"中配置："webpack-dev-server"15执行：[npmrundev]修改代码后完成自动编译16生成的[mian.js]放在内存根目录下，引用[main.js]内存中四：配置编译后自动打开浏览器17"dev":"webpack-dev-server--open"五：配置编译后自动跳转到浏览器并自动打开首页1问题：之后编译，不自动跳转到首页2解决方法：配置编译后自动跳转到首页，即配置首页到内存3安装【html-webpack-plugin】插件，【cnpmihtml-webpack-plugin-D]4In[webpack.config.js]Configure[html-webpack-plugin]plug-in//配置插件constpath=require('path')constHtmlWebpackPlugin=require('html-webpack-plugin')//在内存中配置自动生成index.js的插件//创建插件实例对象consthtmlPlugin=newHtmlWebpackPlugin({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依赖[cnpmireactreact-dom-S]react:专门用于创建组件和虚拟DOM元素，组件的生命周期在这里react-dom:专门用于虚拟DOM操作，主要应用场景为：【ReactDOM.render()】。八：在react中启用JSX语法：1直接在js代码中定义html。这些标签代表一个或多个js对象。不是标签。这种在js中混合html代码的形式称为JSX。浏览器默认不识别，可以使用第三方工具转换为nativereact中的方法。JSX的本质：在运行时转换为createlement()。2第三方转换器，使用babel转换html标签3安装babel插件，运行[cnpmibabel-corebabel-loaderbabel-plugin-transfrom-runtime-D]运行[cnpmibabel-preset-envbabel-preset-stage-0-D]4安装可以识别和转换JSX语法的包：运行[cnpmibabel-preset-react-D]5添加[.babelrc]配置{"presets":["env","stage-0","react"],"plugins":["transform-runtime"]}6在【package.json】中添加插件的配置信息//暴露一个打包对象module.exports={mode:'development',plugins:[htmlPlugin],module:{//所有第三方加载器匹配规则rules:[{test:/\.js|jsx$/,use:'babel-loader',exclude:/node_modules/}]}}7通过上面的配置，babel的配置就完成了，我们可以使用JSX语法来创建虚拟DOM元素或组件了。
