创建跟目录reactDemo1
mkdir reactDemo1
在reactDemo1中创建目录src和目录dist。
在src目录里新建index.js文件
//初始化文件reactDemo1，生成package.json文件
npm init -y
在reactDemo1中新建webpack.config.js文件
控制台
//安装webpack webpack-cli
npm install --save-dev webpack webpack-cli
//安装lodash，暂时不知道干啥用
npm install lodash --save
//加载css
npm install style-loader css-loader --save-dev
//加载图片等任意文件？
npm install --save-dev file-loader
//加载html-webpack-plugin.实时更新dist里的index.html引入的有关webpack.config.js的entry里的文件？
//须在webpack.config.js里配置
npm install --save-dev html-webpack-plugin
//安装clean-webpack-plugin.用于 清除 构建前 dist目录 里生成的 无用 的文件。须在webpack.config.js里配置
npm install --save-dev clean-webpack-plugin
//安装webpack-dev-server。
//自动编译构建文件，不再需要手动npm run build。文件更改后，浏览器自动刷新
//webpack.config.js内需配置devServer
npm install --save-dev webpack-dev-server
//json数据是内置的
//--save 用于生产环境 --save-dev用于开发环境
//安装babel相关
npm install --save-dev
package.json配置
//删除"main":"index.js"，设置安装包是私有的"private":true
//在"scripts"里添加"build":"webpack"。可以手动构建编译运行npm run build直接打包js(不再用npx)。build的名字好像是随意的。
//scripts里面加入“start":"webpack-dev-server --open"。
//相当于webpack+apache?npm start 后，自动打包，在localhost:8080打开文件，浏览器自动更新
//里面含有hmr
如下：
webpack.config.js配置
//source map 文件打包后，报错时，可以找到出错的具体文件及位置
//dev-tool:'inline-source-map',
//配置webpack-dev-server devServer
//hot:true 人更新hmr
如下：
babel
npm install --save-dev babel-core babel-loader babel-preset-react babel-preset-env
/*
babel-core为babel核心包
babel-loader为babel的loader包
babel-preset-react为解析 React的JSX包
babel-preset-env为解析es6的包
*/
新建.babelrc文件，与webpack.config.js在同一目录级
{
"presets": ["es2015", "react","stage-2" ],
"plugins": []
}————————————————
版权声明：本文为CSDN博主「amy_000_」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。
原文链接：https://blog.csdn.net/amy_000_/article/details/93485706
