第3集丨webpack 江湖 —— 插件(plugin)的安装和使用

这篇具有很好参考价值的文章主要介绍了第3集丨webpack 江湖 —— 插件(plugin)的安装和使用。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

webpack plugins 插件可以完成更多 loader 不能完成的功能。插件(plugin)的使用一般是在 webpack 的配置信息 plugins 选项中指定。Webpack 本身内置了一些常用的插件,还可以通过 npm 安装第三方插件。

一、webpack-dev-server 安装和使用

webpack-dev-server 可用于快速开发应用程序。类似于node.js 阶段用到的 nodemon 工具,每当修改了源代码,webpack 会自动进行项目的打包构建。

参考网址:DevServer 中文文档

1.1 安装

  • 不指定版本安装
    npm install webpack-dev-server -D
  • 指定版本安装
    npm install webpack-dev-server@4.15.1 -D
D:\A_MyWork\M05.MYCode\vscode\javascript\webpack>npm install webpack-dev-server -D

added 192 packages in 12s

D:\A_MyWork\M05.MYCode\vscode\javascript\webpack>

1.2 配置

  • 修改 package.json下的scriptsdev命令如下:
"scripts": {
	// scripts 节点下的脚本,可通过 npm run 执行
    "dev": "webpack serve" 
  },
  • 修改 webpack.config.js ,增加devServer节点信息,如下所示:
// 导入node.js中专门操作路径的模块
const path = require("path")    
module.exports = {
    mode:'development',
    // 打包入口的文件路径,__dirname表示当前文件的存放路径,即工程路径
    entry:path.join(__dirname,'./src/index.js'),
    output: {
        // 输出文件的存放路径
        path: path.join(__dirname,'./dist'),
        // 输出文件的名称
        filename: 'bundle.js'
    },
    devServer: {
        static: {
          directory: path.join(__dirname, "/"),
        },
        // compress: true,
        port: 8080,
        host:'127.0.0.1',
        open:true
      }
}

1.3 测试查看效果

1.3.1 执行打包

  • 执行命令:npm run dev,进行项目打包
D:\A_MyWork\M05.MYCode\vscode\javascript\webpack>npm run dev

> webpack@1.0.0 dev
> webpack serve

<i> [webpack-dev-server] Project is running at:
<i> [webpack-dev-server] Loopback: http://localhost:8080/
<i> [webpack-dev-server] On Your Network (IPv4): http://192.168.1.19:8080/
<i> [webpack-dev-server] Content not from webpack is served from 'D:\A_MyWork\M05.MYCode\vscode\javascript\webpack\' directory
asset bundle.js 581 KiB [emitted] (name: main)
runtime modules 27.3 KiB 12 modules
modules by path ./node_modules/ 456 KiB
  modules by path ./node_modules/webpack-dev-server/client/ 71.8 KiB 16 modules
  modules by path ./node_modules/webpack/hot/*.js 5.3 KiB
    ./node_modules/webpack/hot/dev-server.js 1.94 KiB [built] [code generated]
    ./node_modules/webpack/hot/log.js 1.86 KiB [built] [code generated]
    + 2 modules
  modules by path ./node_modules/html-entities/lib/*.js 81.8 KiB
    ./node_modules/html-entities/lib/index.js 7.91 KiB [built] [code generated]
    ./node_modules/html-entities/lib/named-references.js 73 KiB [built] [code generated]
    + 2 modules
  ./node_modules/jquery/dist/jquery.js 278 KiB [built] [code generated]
  ./node_modules/ansi-html-community/index.js 4.16 KiB [built] [code generated]
  ./node_modules/events/events.js 14.5 KiB [built] [code generated]
./src/index.js 396 bytes [built] [code generated]
webpack 5.88.2 compiled successfully in 3693 ms

1.3.2 注意点

  • 在浏览器中访问:http://127.0.0.1:8080/src/,查看效果。观察发现:一旦我们修改index.js 源代码,按下保存,就会进行自动打包构建
  • 另外一个测试问题是:修改源代码后,页面不生效。原因是:生成的文件没有存在物理磁盘,而在内存上。所以在磁盘上看不到生成的文件,但是在浏览器中却可以访问该文件http://127.0.0.1:8080/bundle.js
  • 此时,需要修改index.html文件,引用内存里的bundle.js即可。
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <!-- <script src="./index.js"></script> -->
    <!-- 引用内存里的bundle.js -->
    <script src="/bundle.js"></script>
</head>
<body>
    <ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <li>5</li>
        <li>6</li>
        <li>7</li>
        <li>8</li>
        <li>9</li>
    </ul>
</body>
</html>

二、html-webpack-plugin 插件安装和使用

HtmlWebpackPlugin 简化了 HTML 文件的创建,可以通过此插件自定义index.html页面的内容 。该插件将为你生成一个 HTML5 文件, 并自动会使用 script 标签引入你所有 webpack 生成的 bundle.js

参考网址:HtmlWebpackPlugin中文文档文章来源地址https://www.toymoban.com/news/detail-611778.html

2.1 安装

  • 不指定版本安装:npm install html-webpack-plugin -D
  • 指定版本安装:npm install html-webpack-plugin@5.5.3 -D
D:\A_MyWork\M05.MYCode\vscode\javascript\webpack>npm install html-webpack-plugin -D

added 31 packages in 4s

D:\A_MyWork\M05.MYCode\vscode\javascript\webpack>

2.2 配置

  • 修改 webpack.config.js ,增加plugins节点信息,如下所示:
// 导入node.js中专门操作路径的模块
const path = require("path")    
const HtmlWebpackPlugin = require('html-webpack-plugin')
// 创建插件的实例对象
const htmlPlugin = new HtmlWebpackPlugin({
    // 指定复制源文件的路径
    template:'./src/index.html',
    // 指定创建文件的生成路径
    filename:'./index.html'
})
module.exports = {
    mode:'development',
    // 打包入口的文件路径,__dirname表示当前文件的存放路径,即工程路径
    entry:path.join(__dirname,'./src/index.js'),
    output: {
        // 输出文件的存放路径
        path: path.join(__dirname,'./dist'),
        // 输出文件的名称
        filename: 'bundle.js'
    },
    devServer: {
        static: {
          directory: path.join(__dirname, "/"),
        },
        // compress: true,
        port: 8080,
        host:'127.0.0.1',
        open:true
      },
    plugins:[htmlPlugin]
}

2.3 修改index.html

  • 去掉引用的bundle.js,因为插件会自动引入
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <!-- <script src="./index.js"></script> -->
    <!-- 加载和引用内存里的bundle.js -->
    <!-- <script src="/bundle.js"></script> -->
</head>
<body>
    <ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <li>5</li>
        <li>6</li>
        <li>7</li>
        <li>8</li>
        <li>9</li>
    </ul>
</body>
</html>

2.4 测试

  • 执行命令:npm run dev,进行项目打包,查看页面源代码会发现,页面自动引入了 bundle.js
<script defer src="bundle.js"></script></head>

到了这里,关于第3集丨webpack 江湖 —— 插件(plugin)的安装和使用的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • 清理构建目标文件夹的两种方式:webpack配置选项 VS clean-webpack-plugin插件

    92. 清理构建目标文件夹的两种方式:webpack配置选项 VS clean-webpack-plugin插件 在 webpack 中, clean: true 是一项配置选项,而 clean-webpack-plugin 是一个插件。它们的作用是清理(删除)构建目标文件夹中的旧文件。 1. clean: true 配置选项: 在 webpack 的配置文件中,你可以使用 clean 配

    2024年02月11日
    浏览(45)
  • 初识webpack(二)解析resolve、插件plugins、dev-server

    目录 (一)webpack的解析(resolve) 1.resovle.alias 2.resolve.extensions 3.resolve.mainFiles (二) plugin插件 1.CleanWebpackPlugin 2.HtmlWebpackPlugin 3.DefinePlugin  (三)webpack-dev-server 1.开启本地服务器 2.HMR模块热替换 3.devServer的更多配置项  解析(Resolve) | webpack 中文文档 | webpack中文文档 | webpack中文网 resolve

    2024年02月19日
    浏览(44)
  • 新安webpack插件后编译报错compiler.plugin is not a function

            安装使用generate-asset-webpack-plugin时报错 TypeError:compiler.plugin is not a function ,网上搜索了一下大概就是webpack5与这些插件不匹配。推荐的方法几乎都是换一个适配的插件版本,但我所需要的这个插件在npm上最近更新时间是7年前💔。等不着作者适配于是决定自己改。

    2023年04月24日
    浏览(41)
  • 04-webpack中使用plugin

    loader是用于特定的模块的类型转换,plugin用于执行更加广泛的任务,比如打包优化、资源管理、环境变量注入等。 CleanWebpackPlugin 用于清除之前打包的文件。npm install clean-webpack-plugin DefinePlugin DefinePlugin允许在编译时创建配置的全局常量,是一个webpack内置的插件(不需要单独安

    2024年02月09日
    浏览(42)
  • Webpack中的Loader和Plugin:理解与使用

    🤍 前端开发工程师、技术日更博主、已过CET6 🍨 阿珊和她的猫_ CSDN 博客专家、23年度博客之星前端领域TOP1 🕠 牛客 高级专题作者、打造专栏《前端面试必备》 、《2024面试高频手撕题》 🍚 蓝桥云课 签约作者、上架课程《Vue.js 和 Egg.js 开发企业级健康管理项目》、《带你

    2024年03月10日
    浏览(66)
  • 前端工程化之:webpack4-1(babel的安装和使用)

    官网:https://babeljs.io/ 民间中文网:https://www.babeljs.cn/  babel一词来自于希伯来语,直译为巴别塔。 巴别塔象征的统一的国度、统一的语言 而今天的 JS 世界缺少一座巴别塔,不同版本的浏览器能识别的 ES 标准并不相同,就导致了开发者面对不同版本的浏览器要使用不同的语言

    2024年02月21日
    浏览(43)
  • 使用html-webpack-plugin对HTML文件进行预处理

    原文地址:https://segmentfault.com/a/1190000021518323 作者:Fw恶龙 本文首发于:思否 先整理一波之前和webpack相关的文章: 使用Webpack对CSS文件进行后处理 基于Webpack的CSS Sprites实现方案 Stylus系列——webpack-spritesmith配合stylus使用示例 继以上第三篇文章后很大程度上提高了CSS的开发效率

    2024年02月20日
    浏览(41)
  • webpack打包之 copy-webpack-plugin

    copy-webpack-plugin 打包复制文件插件。 1、什么时候要使用? 在离线应用中,前端所有文件都需在在本地,有些文件(比如iconFont以及一些静态img)需要转为离线文件,这些文件可以直接引用更方便些,这就需要在打包时直接复制到打包文件下。 2、安装依赖 3、配置webpack 4、打包

    2024年02月17日
    浏览(41)
  • 【前端工程化面试题】使用 webpack 来优化前端性能/ webpack的功能

    这个题目实际上就是来回答 webpack 是干啥的,你对webpack的理解,都是一个问题。 (1)对 webpack 的理解 webpack 为啥提出 + webpack 是啥 + webpack 的主要功能 前端开发通常是基于模块化的,为了提高开发效率,webpack 是一个基于模块的构建工具,是一个用于 js 应用程序的静态模块

    2024年02月20日
    浏览(51)
  • 使用webpack插件webpack-dev-server 出现Cannot GET/的解决办法

    文档地址深入浅出webpack 使用 DevServer运行webpack,跑起来之后提示 Cannot GET/ : 查阅官方文档 根据目录结构修改对应的配置: 然后就可以成功访问:

    2024年02月14日
    浏览(37)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包