react创建基本的webpack4项目

我会带着你远行 2021-12-14 01:45 269阅读 0赞

目录结构：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80Mjg0NzYyNg_size_16_color_FFFFFF_t_70]

步骤：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80Mjg0NzYyNg_size_16_color_FFFFFF_t_70 1]  
第五步时，运行webpack,可以发生一下的错误。  
警告：  
![在这里插入图片描述][2019070714273151.png]  
解决方法：在webpack.config.js写  
//向外面暴露一个配置对象  
module.exports=\{  
mode:“development” //development 或者 production  
\}  
打包就完成了，但是每次都要自己手动打开浏览器，

运行cnpm i webpack-dev-server -D  
在package.json配置一下"dev":“webpack-dev-server --open --port 3030 --hot”  
![在这里插入图片描述][20190707150919893.png]

自动打开浏览器和页面  
运行：cnpm i html-webpack-plugin -D  
在webpakc.config.js配置一下

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80Mjg0NzYyNg_size_16_color_FFFFFF_t_70 2]  
再在module.exports=\{ mode:“development”\}添加红圈的代码  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80Mjg0NzYyNg_size_16_color_FFFFFF_t_70 3]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80Mjg0NzYyNg_size_16_color_FFFFFF_t_70]: /images/20211213/169d584360874462b0664963669d96ae.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80Mjg0NzYyNg_size_16_color_FFFFFF_t_70 1]: /images/20211213/c1543856026c48589953f2eae1383970.png
[2019070714273151.png]: /images/20211213/df78de04c0104e8d89dc9ba33f5fc180.png
[20190707150919893.png]: /images/20211213/43d22d4cb6cf423894d622e3b34e71b4.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80Mjg0NzYyNg_size_16_color_FFFFFF_t_70 2]: /images/20211213/95a87679c89d42f3884a8ab41a4b6fa5.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80Mjg0NzYyNg_size_16_color_FFFFFF_t_70 3]: /images/20211213/55f439c3c6aa4d17af13ce5579fc4c1f.png