webpack插件

原创已于 2022-03-15 16:52:02 修改 · 2.3k 阅读

4 ·

CC 4.0 BY-SA版权

文章标签：

#webpack #javascript #前端 #插件

于 2022-03-15 16:51:12 首次发布

webpack 专栏收录该内容

2 篇文章

订阅专栏

在上篇文章中，我们学习了webpack入门，学会了如何安装、配置和使用webpack，在上篇文章中，我们使用webpack时有个小缺陷，就是当js代码发生改变时，webpack打包形成的js文件没有实时发生对应的改变，必须重新启动webpack进行项目的打包构建。

在这篇文章我们来学习webpack的插件，通过webpack的插件来实现对js代码发生改变时，实时改变webpack打包形成的js文件。

webpack插件

通过安装和配置第三方的插件，可以拓展webpack的能力，从而让webpack用起来更方便。

最常用的webpack插件有：webpack-dev-server和html-webpack-plugin。

这里我们使用上篇文章的change-div项目进行演示，其项目目录如下图所示：

运行index.html文件，如下图所示：

webpack-dev-server

webpack-dev-server插件：

类似于node.js阶段用到的nodemon工具；
每当修改了源代码，webpack会自动进行项目的打包和构建。

安装

安装方式很简单，执行如下代码即可在项目中安装该插件：

npm install webpack-dev-server@3.11.2 -D

这里我们下载的webpack-dev-server版本为3.11.2，当不加后面的@3.11.2时就会安装最新版本的插件

配置

首先修改package.json文件中scripts的dev命令，如下所示：

    "dev":"webpack serve",

也就是说把package.json文件中的scripts节点的webpack改为webpack server。

再在webpack.config.js配置文件中module.exports添加如下代码：

    devServer:{
        static:'.',
    }

该代码作用是告诉webpack-dev-server服务器在哪里找项目文件。

启动

通过执行如下命令来启动webpack-dev-server服务：

npm run dev

如下图所示：

执行代码后，webpack-dev-server会启动一个实时打包的http服务器，终端会一直检测代码是否发生改变，当我们的代码发生改变时，就会webpack serve就会自动打包构建，例如当我们把change-div项目中的index.js代码的red改为blue并保存，webpack serve就会自动打包构建，如下图所示：

这样就成功自动打包构建了。

注意：自动生成的打包是生成在内存中，而我们index.html读出的是物理磁盘中的main.js，所以是没效果的。

需要修改index.html对main.js的引用，index.html代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <!-- 物理磁盘引入 -->
    <!-- <script src="../dist/main.js"></script> -->
    <!-- 内存引入 -->
    <script src="/main.js"></script>
</head>
<body>
    <div>这是div标签</div>
</body>
</html>

修改index.js文件后，接下来我们访问http://localhost:8080/，如下图所示：

可以发现，页面的内容就是我们项目目录，点击src文件就会显示index.html页面，如下图所示：

html-webpack-plugin

html-webpack-plugin插件：

webpack中的HTML插件（一个类似模板引擎插件）；
可以通过该插件自定制index.html页面的内容。

简单来说就是访问http://localhost:8080/时，直接展示你想展示的html页面。

安装

执行如下代码即可在项目中安装该插件：

npm install html-webpack-plugin@5.3.2 -D

这里我们下载的html-webpack-plugin版本为5.3.2，当不加后面的@5.3.2时就会安装最新版本的插件。

配置

在webpack-config.js文件加入以下代码：

const HtmlPlugin=require('html-webpack-plugin')     //导入HTML插件，获取构造函数
const htmlPlugin=new HtmlPlugin({
    template:'./src/index.html',    //指定原文件的存放路径
    filename:'./index.html',        //指定生成的文件存放路径
})

添加后，还需要在webpack.config.js文件的module.exports节点添加如下代码：

plugins:[htmlPlugin]

该代码的作用是通过plugins节点，使HTMLPlugin插件生效。

启动

通过执行如下命令来启动webpack-dev-server服务：

npm run dev

启动成功后，我们直接访问http://localhost:8080/就会出现index.html的页面，如下图所示：

注意：

通过HTML插件复制到项目根目录中的index.html页面，也被放到了内存中；

HTML插件在生成的index.html页面，自动注入了打包的main.js文件。

devServer节点

在webpack.config.js配置文件配置webpack-dev-server时，我们添加了devServer节点，节点里面配置了static:'.',代码，该代码告诉webpack-dev-server服务器在哪里找项目静态文件文件。

通过devServer节点对webpack-dev-server插件进行更多的配置。

除了该配置，我们还可以在devServer节点下添加以下配置：

open:true,			//初次打包完成后，自动打开浏览器
host:'127.0.0.1',	//实时打包所使用的主机地址
port:80,			//实时打包所使用的端口号

注意：只要修改了webpack.config.js配置文件或修改了package.json配置文件，必须重启webpack-dev-server服务器，否则最新的配置文件无法生效。

好了，webpack插件就学到这里了，感谢观看！！！