首页技术文章正文

webpack插件的作用是什么?怎样安装webpack插件

更新时间:2021-11-15 来源:黑马程序员 浏览量:

IT培训班

webpack 插件的作用的作用是什么?

通过安装和配置第三方的插件,可以拓展 webpack 的能力,从而让 webpack 用起来更方便。最常用的webpack 插件有如下两个:

① webpack-dev-server

    类似于 node.js 阶段用到的 nodemon 工具

    每当修改了源代码,webpack 会自动进行项目的打包和构建

② html-webpack-plugin

    webpack 中的 HTML 插件(类似于一个模板引擎插件)

    可以通过此插件自定制 index.html 页面的内容

webpack-dev-server 可以让 webpack 监听项目源代码的变化,从而进行自动打包构建。
运行如下的命令,即可在项目中安装webpack插件:

npm install webpack-dev-server@3.11.0 -D

下面进行webpack-dev-server配置,修改package.json -> scripts中的dev命令:

"scripts":{
"dev":"webpack serve",// script 节点下的脚本,可以通过 npm run 执行

}

再次运行npm run dev 命令,重新进行项目的打包,在浏览器中访问http://localhost:8080 地址,查看自动打包效果,注意webpack-dev-server 会启动一个实时打包的http 服务器。


多学一招:
打包生成的文件哪儿去了?
①不配置webpack-dev-server 的情况下,webpack 打包生成的文件,会存放到实际的物理磁盘上:
    严格遵守开发者在webpack.config.js 中指定配置
    根据output 节点指定路径进行存放
②配置了webpack-dev-server 之后,打包生成的文件存放到了内存中:
    不再根据output 节点指定的路径,存放到实际的物理磁盘上
    提高了实时打包输出的性能,因为内存比物理磁盘速度快很多
生成到内存中的文件该如何访问?
webpack-dev-server 生成到内存中的文件,默认放到了项目的根目录中,而且是虚拟的、不可见的。
可以直接用/ 表示项目根目录,后面跟上要访问的文件名称,即可访问内存中的文件,例如 /bundle.js 就表示要访问webpack-dev-server 生成到内存中的bundle.js 文件。






猜你喜欢:

webpack体积怎么优化?有哪些方法?

怎样配置 webpack 的打包发布?

VUE是什么意思?【web前端开发培训】

黑马程序员web前端开发开发工程师培训

分享到:
在线咨询 我要报名
和我们在线交谈!