webpack-dev-server 安装中出现的问题

偏执的太偏执、 2022-11-21 14:41 425阅读 0赞

webpack-dev-server 依赖于webpack，所以安装的时候对webpack和webpack-cli版本有一定要求
    1， cnpm i webpack-dev-server -D
    2， 查看warning提示，指定的webpack版本进行安装 cnpm i webpack@XXXX -D
    3， 在 webpack.json scripts中添加 scripts:{ "dev": "webpack-dev-server"}
    4， 执行 npm run dev
    
    可能出现的错误：解决：1，删除node_modules 重新下载：cnpm i
                        2，查看 webpack，webpack-cli，webpack-dev-server 之间的版本是否兼容
                        如图为 兼容版本：
    【备注】： webpack-dev-server打包好的文件就不在本地dist磁盘中了，而是在内存中形成了个看不见的文件，这样做也是为了提高访问速率。
              项目的访问路径就是 npm run dev后面的location:xxxxx路径，所以将../dist/bundle.js 改成根目录下的 /bundle.js  ， 打包好内存直接访问根目录下的文件而不去访问dist磁盘里面的文件了

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDY4NDM1Nw_size_16_color_FFFFFF_t_70_pic_center]

--open : npm run dev 后自动打开后台资源管理
    --port : 制定端口号
    --contentBase src : npm run dev 后自动打开src目录
    --hot : 改变main.js里面的内容后页面不用手动刷新，为异步刷新

![在这里插入图片描述][20201102215757965.jpg_pic_center]

cnpm i html-webpack-plugin -D  下载 html-webpack-plugin 将html加载打包到内存中去
    之后在webpackage.config.json中添加配置项，如图 先require 之后在 plugin中构造对象，以及生成新的文件的名称。

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDY4NDM1Nw_size_16_color_FFFFFF_t_70_pic_center 1]

在生成好的新的html中会出现两个bundle.js 底部的是html-webpackage-plugin 生成的新的js（上面的可注释）
    由此得出结论 html-webpackage-plugin 的两个作用：
    1，自动在内存中根据指定的页面去生成一个内存的页面
    2，将我们的scr 或 link 的文件自动打包加载到 dom 中去，省去手动添加的环节

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDY4NDM1Nw_size_16_color_FFFFFF_t_70_pic_center 2]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDY4NDM1Nw_size_16_color_FFFFFF_t_70_pic_center]: /images/20221120/c38fc3f45adc4c148d5deed0d615cd42.png
[20201102215757965.jpg_pic_center]: https://img-blog.csdnimg.cn/20201102215757965.jpg#pic_center
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDY4NDM1Nw_size_16_color_FFFFFF_t_70_pic_center 1]: https://img-blog.csdnimg.cn/20201102223656803.jpg?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDY4NDM1Nw==,size_16,color_FFFFFF,t_70#pic_center
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDY4NDM1Nw_size_16_color_FFFFFF_t_70_pic_center 2]: https://img-blog.csdnimg.cn/20201102224220813.jpg?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDY4NDM1Nw==,size_16,color_FFFFFF,t_70#pic_center