Webpack配置详解：entry与output的多入口及动态文件名处理

本文主要介绍Webpack配置文件中的entry与output配置项。

Webpack入口配置entry详解

在webpack.config.js配置文件中，entry属性用于指定打包的唯一入口文件。

entry属性的值也可以是一个数组。

当entry为数组时，Webpack会将数组中列出的所有文件一起打包生成bundle.js。

此外，entry还可以配置为一个对象。

输出文件名output占位符与版本管理

如果output配置中的filename包含以下三种占位符：

./[name]表示文件名将使用entry对象中对应键的值。

./[hash]代表文件内容的MD5加密值。

./[chunkhash]则通常用作版本号标识。

每次修改文件并重新运行打包后，都会生成不同的hash和chunkhash值，这有助于上线时对静态资源进行版本管理。

使用html-webpack-plugin动态注入资源

由于每次运行的文件名都会发生变化，直接引用会导致文件引入路径失效。因此，需要安装html-webpack-plugin插件，执行命令npm install html-webpack-plugin --save-dev。

安装完成后，在webpack.config.js文件中添加plugins配置项。

plugins的值是一个数组，其中的元素均为new HtmlWebpackPlugin()实例，其参数配置如下：

• title：用于生成页面中的title元素。
• filename：指定输出的HTML文件名，默认为index.html，也可配置包含子目录的路径。
• template：指定模板文件路径，支持加载器语法，例如html!./index.html。
• inject：可选值为true、'head'、'body'或false。若设为true或body，所有JavaScript资源将注入到body元素底部；若设为'head'，则注入到head元素中。
• favicon：指定特定favicon的路径，并将其添加到输出的HTML文件中。
• minify：值为对象或false，用于向html-minifier传递压缩选项。
• hash：值为true或false。若为true，将在所有包含的脚本和CSS文件中添加唯一的webpack编译hash，有助于解决缓存问题。
• cache：值为true或false，默认为true。仅当文件修改后才会发布文件。
• showErrors：值为true或false，默认为true。若为true，错误信息将写入HTML页面中。
• chunks：允许指定只添加某些特定的块，例如仅包含单元测试块。
• chunksSortMode：允许控制块在添加到页面之前的排序方式，支持的值包括'none'、'default'或自定义函数，默认为'auto'。
• excludeChunks：允许跳过某些特定的块，例如跳过单元测试相关的块。

最终生成的HTML文件将自动包含上述配置生成的资源引用。

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持本站。