blocks|key|1706178|text|Webpack是个模组打手。根据webpack的配置，它将将整个SPA捆绑在一个或多个javascript包中。现在，我们需要在HTML代码中导入这些js包，在HTML中插入这些东西的唯一方法是使用脚本标记。所以您可以在html中导入它们，如下所示：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1706179|<script+src="bundle.js"></script>|code-block|syntax|javascript|1706180|所以是的，这是最好的做法。|1706181|entityMap^0|0|0|0^^$0|@$1|2|3|4|5|6|7|K|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|L|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|M|8|@]|9|@]|A|$]]|$1|I|3|-4|5|6|7|N|8|@]|9|@]|A|$]]]|J|$]]

<p>Webpack is a module bundler. It will bundle your entire SPA in a single or multiple javascript bundles according to your webpack configuration. Now we need to import these js bundles inside our HTML code and the only way to insert those things in our HTML is to use script tag. So you import them in your html like this : </p>

<pre><code>&lt;script src="bundle.js"&gt;&lt;/script&gt;
</code></pre>

<p>So yes, this is the best practice.</p>


blocks|key|1508675|text|您可以使用JavaScript自动包含所有的HTML+Webpack插件和CSS包。|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|1508676|示例|1508677|要安装插件，需要在项目目录中运行npm+install+html-webpack-plugin+--save-dev。|style|CODE|1508678|在下面的示例中，插件将读取源HTML文件，并在head和所有JavaScript包中的body结束之前自动追加可用的CSS文件。它和ExtractTextPlugin玩得很好。如果您有更多的包块，它们也会被适当地追加。|1508679|另外，如果您想动态地更改或生成任何模板文件的一部分，您可以使用HTML。它支持EJS模板引擎，并可能使用任何其他通过装载机。|1508680|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
++++++++}),
++++]
};|code-block|syntax|javascript|1508681|值得注意的是HTML插件有许多特性可供使用，包括缩小、过滤块、向URL添加文件哈希以防止缓存.您可以在文档中了解这些以及更多的信息。|BOLD|1508682|entityMap|0|LINK|mutability|MUTABLE|url|https://nodei.co/npm/html-webpack-plugin/|1|https://www.npmjs.com/package/extract-text-webpack-plugin|2|https://www.npmjs.com/package/html-webpack-plugin#writing-your-own-templates|3|https://github.com/ampedandwired/html-webpack-plugin/blob/master/docs/template-option.md|4^0|M|E|0|0|0|G|16|0|N|4|17|4|1U|H|1|0|F|4|2|1K|5|3|0|0|O|2|1F|2|4|0^^$0|@$1|2|3|4|5|6|7|1A|8|@]|9|@$A|1B|B|1C|1|1D]]|C|$]]|$1|D|3|E|5|6|7|1E|8|@]|9|@]|C|$]]|$1|F|3|G|5|6|7|1F|8|@$A|1G|B|1H|H|I]]|9|@]|C|$]]|$1|J|3|K|5|6|7|1I|8|@$A|1J|B|1K|H|I]|$A|1L|B|1M|H|I]]|9|@$A|1N|B|1O|1|1P]]|C|$]]|$1|L|3|M|5|6|7|1Q|8|@]|9|@$A|1R|B|1S|1|1T]|$A|1U|B|1V|1|1W]]|C|$]]|$1|N|3|O|5|P|7|1X|8|@]|9|@]|C|$Q|R]]|$1|S|3|T|5|6|7|1Y|8|@$A|1Z|B|20|H|U]]|9|@$A|21|B|22|1|23]]|C|$]]|$1|V|3|-4|5|6|7|24|8|@]|9|@]|C|$]]]|W|$X|$5|Y|Z|10|C|$11|12]]|13|$5|Y|Z|10|C|$11|14]]|15|$5|Y|Z|10|C|$11|16]]|17|$5|Y|Z|10|C|$11|18]]|19|$5|Y|Z|10|C|$11|18]]]]

<p>You can automatically include all JavaScript and CSS bundles using <a href="https://nodei.co/npm/html-webpack-plugin/" rel="nofollow noreferrer">HTML Webpack Plugin</a>.</p>
<h1>Example</h1>
<p>To install the plugin you need to run <code>npm install html-webpack-plugin --save-dev</code> in your project directory.</p>
<p>In the following example plugin will read source HTML file and automatically append available CSS files in <code>head</code> and all JavaScript bundles just before the end of <code>body</code>. It plays nicely with <a href="https://www.npmjs.com/package/extract-text-webpack-plugin" rel="nofollow noreferrer">ExtractTextPlugin</a>. If you have more bundle chunks, they'll be appended appropriately as well.</p>
<p>As a bonus you can use <a href="https://www.npmjs.com/package/html-webpack-plugin#writing-your-own-templates" rel="nofollow noreferrer">any template</a> engine if you want to dynamically change or generate parts of your HTML file. Out of the box it supports EJS template engine with possibility to use any other <a href="https://github.com/ampedandwired/html-webpack-plugin/blob/master/docs/template-option.md" rel="nofollow noreferrer">via loaders</a>.</p>
<pre class="lang-js prettyprint-override"><code>var webpack = require(&quot;webpack&quot;);
var HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
    entry: './src/js/entry',                   // Source JavaScript file
    output: {
        path: './bin/',                        // Output directory
        filename: &quot;./js/bundle.js&quot;             // Result JavaScript file
    },
    plugins: [
        new HtmlWebpackPlugin({
            template: './src/index.html',      // Source HTML file
            filename: './index.html'           // Result HTML file
        }),
    ]
};
</code></pre>
<p>It's worth noting that HTML Webpack Plugin have a lot of features to play with, including <strong>minifying</strong>, filtering chunks, adding file hash to URLs to prevent caching... You can learn about those and many more in <a href="https://github.com/ampedandwired/html-webpack-plugin/blob/master/docs/template-option.md" rel="nofollow noreferrer">documentation</a>.</p>


<p>I just started using Webpack for my SPA and I have a question. How do I require the result bundle/file in my HTML? Should I just use the  tag or is there a better practice for this?</p>


Webpack - How to require result file in base html (best practice)

翻译质量差，导致语言生硬或混乱。

没有提供实际的解决方法或示例。

解答不清晰，无法理解或解决问题。

页面排版不美观，阅读体验差。

文章

问答

视频

学习中心

腾讯云实验室

直播

竞赛

腾讯云代码分析专区

腾讯iOA零信任安全管理系统专区

腾讯云架构师技术同盟交流圈

腾讯云数据库专区

腾讯云顾问专区

腾讯云原生专区

腾讯混元专区

腾讯云TCE专区

腾讯云Lighthouse专区

腾讯云HAI专区

腾讯云Edgeone专区

腾讯云存储专区

腾讯云智能专区

腾讯轻联专区 

腾讯云开发专区

TAPD专区

腾讯轻量云游戏服专区

腾讯云最具价值专家

腾讯云架构师技术同盟

腾讯云创作之星

腾讯云开发者先锋

腾讯云代码助手

云原生构建

TAPD 敏捷项目管理

Cloud Studio

SDK中心

API中心

命令行工具

涵盖代码开发、场景应用、自动测试全流程，助你从零构建专属AI助手

一站式MCP教程库，解锁AI应用新玩法

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

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

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

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