webpack5和4的区别 webpack使用教程( 二 )

默认值：如果mode为’production’则为true，否则为false
描述：控制是否以及以何种方式压缩输出。
hash类型：Boolean
默认值：false
描述：如果为true，则附加一个唯一的webpack编译哈希到所有包含的脚本和CSS文件。这对于缓存销毁是很有用的
cache类型：Boolean
默认值：true
描述：只有当文件被更改时，才会删除它。
showErrors类型：Boolean
默认值：true
描述：错误的详细信息将写入HTML页面。
chunks类型：?
默认值：?
描述：只允许添加一些chunk(例如：只添加unit-test 的chunk)
chunksSortMode类型：String|Function
默认值：auto
描述：允许控制块在包含到HTML之前应该如何排序。允许的值是’none’ | ‘auto’ | ‘manual’ | {Function} 。
excludeChunks类型：Array.<string>
默认值：空
描述：允许你跳过一些chunk(例如不添加unit-test 的chunk) 。
xhtml类型：Boolean
默认值：false
描述：如果为true，则将link标签呈现为自动关闭(XHTML兼容)
下面是一个webpack配置示例，演示了如何使用这些选项：
{entry: 'index.js',output: {path: __dirname + '/dist',filename: 'index_bundle.js'},plugins: [new HtmlWebpackPlugin({title: 'My App',filename: 'assets/admin.html'})]}生成多个HTML文件要生成多个HTML文件，请在插件数组中多次声明插件。
配置示例：
{entry: 'index.js',output: {path: __dirname + '/dist',filename: 'index_bundle.js'},plugins: [new HtmlWebpackPlugin(), // Generates default index.htmlnew HtmlWebpackPlugin({// Also generate a test.htmlfilename: 'test.html',template: 'src/assets/test.html'})]}编写模板如果默认生成的HTML不能满足您的需要，您可以提供自己的模板。最简单的方法是使用template选项并传递一个定制的HTML文件。html-webpack-plugin会自动将所有必需的CSS, JS, manifest和favicon文件注入到标记中。
配置文件的部分内容：
plugins: [new HtmlWebpackPlugin({title: 'Custom template',// Load a custom template (lodash by default)template: 'index.html'})]模板文件index.html的内容：
<!DOCTYPE html><html><head><meta charset="utf-8"/><title><%= htmlWebpackPlugin.options.title %></title></head><body></body></html>如果您已经有一个模板加载器，您可以使用它来解析模板。请注意，如果您指定了html加载器并使用.html文件作为模板，也会发生这种情况。
module: {loaders: [{ test: /\.hbs$/, loader: "handlebars-loader" }]},plugins: [new HtmlWebpackPlugin({title: 'Custom template using Handlebars',template: 'index.hbs'})]您可以使用现成的lodash语法。如果inject特性不适合你的需要，而你又想完全控制资产的位置，可以使用html-webpack-template项目的默认模板作为你自己编写模板的起点。

以上关于本文的内容，仅作参考！温馨提示：如遇健康、疾病相关的问题，请您及时就医或请专业人士给予相关指导!

「四川龙网」www.sichuanlong.com小编还为您精选了以下内容，希望对您有所帮助：