webpack 中常用的插件

本文介绍了webpack-dev-server的安装、配置及其如何自动打包,并解释了内存中文件的访问方式。同时,讲解了html-webpack-plugin的使用,通过这个插件可以自定义index.html内容并自动注入bundle.js。此外,还提到了devServer配置项,允许更精细地调整webpack-dev-server的行为。最后,强调了修改配置后需重启服务器以应用最新设置。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

1、webpack-dev-server

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

1.3配置 webpack-dev-server

        ① 修改 package.json -> scripts 中的 dev 命令如下:
"scripts":{
    "dev":"webpack serve"    //script 节点下的脚本,可以通过 npm run 执行
}
        ② 再次运行 npm run dev 命令,重新进行项目的打包
        ③ 在浏览器中访问 http://localhost:8080 地址,查看自动打包效果
1.4 打包生成的文件哪儿去了?
        ① 不配置 webpack-dev-server 的情况下,webpack 打包生成的文件,会存放到实际的物理磁盘上
                ⚫ 严格遵守开发者在 webpack.config.js 中指定配置
                ⚫ 根据 output 节点指定路径进行存放
        ② 配置了 webpack-dev-server 之后,打包生成的文件存放到了内存中
                ⚫ 不再根据 output 节点指定的路径,存放到实际的物理磁盘上
                ⚫ 提高了实时打包输出的性能,因为内存比物理磁盘速度快很多
1.5 生成到内存中的文件该如何访问?
        webpack-dev-server 生成到内存中的文件,默认放到了项目的根目录中,而且是虚拟的、不可见的。
        ⚫ 可以直接用 / 表示项目根目录,后面跟上要访问的文件名称,即可访问内存中的文件
        ⚫ 例如 /bundle.js 就表示要访问 webpack-dev-server 生成到内存中的 bundle.js 文件

2、html-webpack-plugin

        html-webpack-plugin 是 webpack 中的 HTML 插件,可以通过此插件自定制 index.html 页面的内容。
        需求:通过 html-webpack-plugin 插件,将 src 目录下的 index.html 首页,复制到项目根目录中一份
2.1 安装 html-webpack-plugin  运行如下的命令,即可在项目中安装此插件:
npm install html-webpack-plugin@5.3.2 -D
2.2 配置 html-webpack-plugin
//1、导入 HTML 插件, 得到一个函数
const HtmlPlugin = require('html-webpack-plugin');

//2、创建 HTML 插件的实例对象
const htmlPlugin = new HtmlPlugin({
    template:'./src/index.html',    //指定源文件的存放路径
    filename:'./index.html',        //指定生成的文件的存放路径
})

module.exports = {
    mode:'development',
    plugins:[htmlPlugin]            //通过 plugins 节点,使用htmlPlugin插件生效
}
2.3解惑 html-webpack-plugin
        ① 通过 HTML 插件复制到项目根目录中的 index.html 页面,也被放到了内存中
        ② HTML 插件在生成的 index.html 页面,自动注入了打包的 bundle.js 文件

3、 devServer 节点

在 webpack.config.js 配置文件中,可以通过 devServer 节点对 webpack-dev-server 插件进行更多的配置,
        示例代码如下:
        
devServer:{
    open:true,            //初次打包完成后,自动打开浏览器
    host:'127.0.0.1',     //实时打包所使用的主机地址
    port:80,              //实时打包所使用的端口号
}

注意:凡是修改了 webpack.config.js 配置文件,或修改了 package.json 配置文件,必须重启实时打包的服 务器,否则最新的配置文件无法生效!
常用webpack插件有以下几个: 1. 热更新插件(HotModuleReplacementPlugin):该插件可以实现在开发过程中,无需刷新页面即可实时更新修改的代码,提高开发效率。\[1\] 2. 提取文本插件(ExtractTextWebpackPlugin):该插件可以将CSS样式从JavaScript文件中提取出来,单独生成一个CSS文件,以减小文件体积并提高加载速度。\[2\] 3. 代码压缩插件(UglifyJsPlugin):该插件可以对JavaScript代码进行压缩和混淆,减小文件体积,提高加载速度。\[2\] 4. HTML插件(HtmlWebpackPlugin):该插件可以根据模板生成HTML文件,并自动引入打包后的JavaScript和CSS文件,简化HTML文件的创建和维护工作。\[1\] 这些插件可以通过在webpack配置文件中的plugins选项中进行配置和使用。同时,还有许多其他的插件可供选择,根据具体需求选择合适的插件来优化和增强webpack的功能。\[3\] #### 引用[.reference_title] - *1* *3* [webpack--总结18个webpack插件,总会有你想要的](https://blog.youkuaiyun.com/wenmin1987/article/details/107013532)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^insert_down28v1,239^v3^insert_chatgpt"}} ] [.reference_item] - *2* [Webpack常用插件总结](https://blog.youkuaiyun.com/qq_39040042/article/details/88019723)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^insert_down28v1,239^v3^insert_chatgpt"}} ] [.reference_item] [ .reference_list ]
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值