webpack搭建项目并引入React

1、npm init -y 快速初始化项目（生成package.json文件）
2、在项目目录下创建dist和src文件
3、在src下创建
index.html

haha48

和main.js
console.log(‘main47775.js’)
4、cnpm install webpack -D
5、cnpm install webpack-cli -D
6、在当前文件下新建一个webpack.config.js文件。里面内容为
// 向外暴露一个打包的配置对象
module.exports = {
mode: “development”,
entry: “./src/main.js” //入口
};
注意： // 在 webpack 4.x 中，有一个很大的特性，就是 约定大于配置 约定，默认的打包入口路径是 src -> index.js
module.exports = {
mode: “development”,
// entry:’./src/index.js’, //所以把之前的mian.js改为index.js
}
7、执行webpack命令。会在dist文件夹下生成一个main.js文件
8、现在如果你更改了src下的文件都需要重新打包，比较麻烦
9、安装实时打包工具
cnpm i webpack-dev-server -D
10、在package.json文件中配置
“scripts”: {
“test”: “echo “Error: no test specified” && exit 1”,
“dev”:“webpack-dev-server --open Chrome --port 3000 --hot --progress --compress --host 127.0.0.1” // 这段代码
},
11、然后执行npm run dev
12、cnpm i html-webpack-plugin -D // 在内存中自动生成 index 页面的插件
注意：以上webpack不能全局安装，不然安装12之后，配置完13步骤后，再npm run dev（Error: Cannot find module ‘webpack/lib/node/NodeTemplatePlugin’）会报错
13、在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’,
entry:’./src/main.js’,
plugins:[
HtmlPlugin
]
}
14、npm run dev即可运行直接进入index.html文件
15、
在项目中使用React
运行 cnpm i react react-dom -S
react:专门用于创建组件和虚拟DOM的，同事组件的生命周期都在这个包中
react-dom：专门进行DOM操作的，最主要的应用场景，就是ReactDom.render()
16、使用 babel 来转换 这些JS中的混入写入类似于HTML的语法
安装babel插件
运行 cnpm i babel-core babel-loader babel-plugin-transform-runtime -D （包）
cnpm i babel-preset-env babel-preset-stage-0 babel-preset-react -D （语法）
babel-preset-react 是识别转换jsx语法的包
但是安装之后会报错：原因可能是
babel-loader版本太高

所以需要降低到7.0（明天继续）
参考网上的配置
安装：cnpm install --save-dev babel-core babel-loader babel-preset-react babel-preset-env
配置 webpack.config,js
新建文件