webpack 中常用的插件

最新推荐文章于 2024-07-28 01:07:00 发布

原创最新推荐文章于 2024-07-28 01:07:00 发布 · 330 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#webpack

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

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 配置文件，必须重启实时打包的服务器，否则最新的配置文件无法生效！