javascript - Webpack - 如何在基本 html 中要求结果文件(最佳实践)

Question

我刚开始为我的 SPA 使用 Webpack，我有一个问题。我如何在我的 HTML 中要求结果包/文件？我应该只使用标签还是对此有更好的做法？

Answer 1

您可以使用 HTML Webpack Plugin 自动包含所有 JavaScript 和 CSS 包.

例子

要安装插件，您需要在项目目录中运行 npm install html-webpack-plugin --save-dev。

在下面的示例中，插件将读取源 HTML 文件并自动将可用的 CSS 文件附加到 head 和所有 JavaScript 包中，紧接在 body 结束之前。它与 ExtractTextPlugin 配合得很好.如果您有更多 bundle block ，它们也会被适本地附加。

作为奖励，您可以使用 any template如果您想动态更改或生成 HTML 文件的一部分，请使用引擎。开箱即用，它支持 EJS 模板引擎，可以使用任何其他模板引擎 via loaders .

var webpack = require("webpack");
var HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
    entry: './src/js/entry',                   // Source JavaScript file
    output: {
        path: './bin/',                        // Output directory
        filename: "./js/bundle.js"             // Result JavaScript file
    },
    plugins: [
        new HtmlWebpackPlugin({
            template: './src/index.html',      // Source HTML file
            filename: './index.html'           // Result HTML file
        }),
    ]
};

值得注意的是，HTML Webpack 插件有很多功能可供使用，包括缩小、过滤 block 、向 URL 添加文件哈希以防止缓存......您可以了解这些以及许多更多信息 documentation .