粗略从0搭建react webpack框架

第一步 在新目录里用npm init命令生成一个package.json 写一些基础的配置

第二步 安装webpack 我用webpack5， 注意webpack5和webpack-cli搭配时 后者需要指定在3.3.12版本，不然会有报错

npm i webpack webpack-cli@3.3.12 -D

第三步 根目录下建立src 在src下建立index.js  在根目录下建立webpack.config.js

配置webpack.config.js  针对入口 打包出口进行配置

在index.js中随便写点js ，然后根目录下运行webpack 看是否生成dist/index.js 由于打包的文件用了hash 每次打包都会生成一个新的文件  所以需要在package.json中配置脚本

rm -rf dist && webpack //或者直接运行这个

第四步 将打包生成的js自动注入到html中  需要htmlWebpackPlugin插件 记得5版本安装包是 html-webpack-plugin

在webpack.config.js中require 然后在plugins属性中new 配置title template（模板 一般是src下的index.html）filename

第五步 配置一些loader

由于浏览器有些不支持es6 还有react的jsx语法 所以需要用babel-loader支持一下  还有css文件以及图片资源 webpack不能直接支持针对他们的打包，所以也需要配置相应的loader。loader是在module属性下配置的

针对js和jsx文件 需要安装babel-loader @babel/core @babel/preset-env @bebel/preset-react

另外还需要在根目录下建立一个babel.config.js文件进行配置，preset是自下向上的

{
  "presets": [
    "@babel/preset-env",
    "@babel/preset-react"
  ]
}

针对scss css style css 需要安装css-loader style-loader sass-loader

{
    test: /\.(scss|css)$/,
    use: ['style-loader', 'css-loader', 'sass-loader'],
 },

第六步 HRM 热加载 有三种方式（webpack-dev-server是一种）

第七步 启动本地服务器 安装webpack-dev-server

第七步 挂在组件  安装react react-dom

ReactDOM.render(<App/>, document.getElementById('root'))

第一阶段到此结束

关于第一阶段中第六步的HRM 搞了接近一天 在网上各种百度加问大佬  后来莫名其妙又可以了， 热加载有三种方式  我用的是webpack-dev-server这种进行浏览器刷新 然后搭配热加载插件 总共三步

第一步 安装webpack-dev-server依赖 之前使用本地服务器时已经安装好了

第二步 在webpack.config.js中添加一点配置 引入热加载插件，开启热加载， webpack-dev-server开启inline模式

此时 启动命令需要进行相应的改变 open参数是默认启动自动帮你打开浏览器（就是没有加这个参数  导致我热加载一直没有效果）
 

"start": "webpack-dev-server --hot --inline --open"

第三步 在入口文件进行热加载的监听