开发者社区

文档建议反馈控制台

最新优惠活动

文章/答案/技术大牛

发布

如何在VUE JS WEBPACK项目中通过<script>标签自动将NPM的依赖项包含到index.html中？

在Vue.js Webpack项目中，可以通过使用html-webpack-plugin插件来自动将NPM的依赖项包含到index.html中。下面是详细的步骤：

首先，确保你已经在项目中安装了html-webpack-plugin插件。可以使用以下命令进行安装：

npm install html-webpack-plugin --save-dev

在webpack配置文件中，找到plugins部分，并添加以下代码：

const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
  // 其他配置项...
  plugins: [
    new HtmlWebpackPlugin({
      template: 'index.html',
      inject: true
    })
  ]
}

在项目根目录下创建一个index.html文件，作为模板文件。可以将现有的index.html文件作为模板，或者创建一个新的。
在index.html文件中，使用以下标记来指定将依赖项注入到哪个位置：

<!DOCTYPE html>
<html>
  <head>
    <!-- 其他头部内容 -->
    <!-- inject:css -->
    <!-- 所有的CSS依赖项将被注入到这里 -->
    <!-- endinject -->
  </head>
  <body>
    <!-- 页面内容 -->
    <!-- inject:js -->
    <!-- 所有的JS依赖项将被注入到这里 -->
    <!-- endinject -->
  </body>
</html>

运行webpack构建命令，依赖项将会自动注入到生成的index.html文件中。

这样，通过以上步骤，你就可以在Vue.js Webpack项目中通过<script>标签自动将NPM的依赖项包含到index.html中了。

推荐的腾讯云相关产品：腾讯云云服务器（CVM）、腾讯云对象存储（COS）、腾讯云云数据库MySQL版（CDB）、腾讯云人工智能（AI）等。你可以在腾讯云官网上找到更多关于这些产品的详细介绍和文档。

腾讯云官网链接：https://cloud.tencent.com/

页面内容是否对你有帮助？

有帮助

没帮助

相关·内容

Vue学习-Webpack

从本质上来讲，webpack是一个现代的JavaScript应用的静态模块打包工具。

01

ES6语法处理

如果你仔细阅读webpack打包的js文件，发现写的ES6语法并没有转成ES5，那么就意味着可能一些对ES6还不支持的浏览器没有办法很好的运行我们的代码。

01

Vue笔记(8)

后续项目中,我们会使用Vuejs进行开发,而且会以特殊的文件来组织Vue的组件

02

Vue2+VueRouter2+Webpack+Axios 构建项目实战2017重制版（十四）在项目中使用 jQuery

摘要总结：本文介绍了如何在 Vue 2 项目中引入 jQuery，并提供了两种方法来引入，一种是直接引入静态文件，另一种是在项目中使用 NPM 安装。同时，还提供了一种用于测试 jQuery 是否可以正常运行的简单方法。

07

使用vue-cli搭建spa项目

目录 1. vue-cli安装 1.1 安装前提 1.2 什么是vue-cli 1.3 安装vue-cli 2. 使用vue-cli构建项目 2.1 使用脚手架创建项目骨架 2.2 到新建项目目录，安装需要的模块 2.3 如何修改端口号 2.4 添加element-ui模块 2.5 package.json详解 3. install命令中的-g, -S, -D参数 4. vue项目结构说明 5.什么是*.vue文件 6. 启动过程 7. 开发示例 7.1 做一个自定义组件Welcome 7.2 增加“用户管

01

vue06安装vue-cli+使用vue-cli搭建项目+什么是*.vue文件+开发示例+必问面试知识点

安装成功后会在配置的node_global\node_modules目录下会看到vue-cli目录。

01

手把手教你写一个Vue组件发布到npm且可外链引入使用

前言我们为什么要写个组件上传到npm镜像上呢，我们肯定遇到过这样一个场景，项目中有很多地方与某个功能相似，你想到的肯定是把该功能封装成Component组件，后续方便我们调用。但是过了一段时间，你

01

抛开vue-cli，一步步搭建vue+webpack环境

敲代码没有高亮简直蛋疼，简单带过下 sublime打开 —→ 点击Preferences下的Package Control —→ 输入install package回车过一会儿 —→ 再输入vue syntax highlight回车，安装完毕 —→ 点击sublime选择vue component，即高亮

01

vue.js 三种方式安装(vue-cli)

Vue.js（读音 /vjuː/, 类似于 view）是一个构建数据驱动的 web 界面的渐进式框架。Vue.js 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件。它不仅易于上手，还便于与第三方库或既有项目整合。

02

webpack 构建脚手架

本文记录 webpack 的安装和使用，并且使用 webpack 搭建 vue 简易脚手架的过程

02

从零开始学VUE之Webpack(集成VueJS)

大概解释一下就是现在使用的是runtime-only,代码中不能存在模板代码,如果想运行代码中有模板代码的环境,请使用runtime-compiler

01

SpreadJS使用进阶指南 - 使用 NPM 管理你的项目

前言 SpreadJS作为一款性能出众的纯前端电子表格控件，自2015年发布以来，已经被广泛应用于各领域“在线Excel”数据管理项目中。NPM，作为管理Node.js库最有力的手段，解决了很多NodeJS代码部署的问题。如今，为让您更方便的使用产品和更好地管理项目中的SpreadJS代码，我们已将SpreadJS应用打包发布到了NPM服务器。如您需要，请点击查看（需要FQ） NPM简介也许您刚刚接触前端开发，或者刚刚使用NodeJS。NPM对于您来说，可能会感到些许陌生。这里，是NPM的简单介绍，希望

02

从零开始学VUE之Webpack(Html打包插件的使用)

看到的错误大概是不能读取属性中的 initialize方法,是一个没有定义的,经过查看源码,发现在最新的版本中确实没有这个方法了,后来看了下老师的版本是3.2.0,我的是5.3.1

02

59.Vue 使用webpack构建vue项目

在前面的篇章中，已经说明了 webpack4 的基本使用，那么本章节开始在 webpack4 中构建vue项目，同时对比看看这种构建方式，与在网页script导入 vue.js 中的区别。

03

一小时的时间，上手 Webpack

为什么要用构建工具？如果你只会js+css+html，最多再加上jquery，那么当你听到构建工具这个说法是不是蒙的？这种情况下我不建议你学习webpack，建议你学下 vue 或者 react 框架，这两个框架都有自己的脚手架，所谓脚手架就是别人用构建工具帮你搭好了原始项目，你可以在不懂构建工具的情况下进行前端开发。不过这就是初级前端的基本工作，给我一个环境，让我安心的写业务代码。

02

vue 学习笔记第四弹 - Webpack

webpack 是前端的一个项目构建工具，它是基于 Node.js 开发出来的一个前端工具；

02

Vue-cli4.5 脚手架学习/超详细

前言/脚手架的介绍与作用： Vue-cli脚手架官方中文文档：cli.vuejs.org/zh/guide/ 1. vue脚手架是什么？它是一个专门为单页面（SPA）应用快速搭建繁杂的脚手架，它是基于webpack的基础开发出来的一款能够快速的帮助我们构建一个用来开发vue的项目目录、结构（vue和webpack的项目模板）。 vue脚手架通常使用在大型项目中，能够加快我们的开发速度。而小型项目不推荐使用脚手架，因为反而会拖慢我们项目的开发速度。 2. 为什么会有vue脚手架？因为 we

04

Vue 07.webpack

webpack 是前端的一个项目构建工具，它是基于 Node.js 开发出来的一个前端工具；

02

一步一步创建vue2.0项目（一）

新建一个文件夹 vue2.0-learn 。_前提是默认已经安装了nodejs和npm_

03

VUE-webpack

Webpack 是一个前端资源的打包工具，它可以将js、image、css等资源当成一个模块进行打包。

01

Vue的安装及使用快速入门

1、下载地址为：https://nodejs.org/en/ 　　2、检查是否安装成功：如果输出版本号，说明我们安装node环境成功

02

10天从入门到精通Vue(五)Webpack打包

webpack 是前端的一个项目构建工具，它是基于 Node.js 开发出来的一个前端工具；

03

18款Webpack插件，总会有你想要的！

这篇文章整理了18个Webpack插件，分享给Web开发的小伙伴。Plugin是一个扩展器，它丰富了webpack本身，针对的是loader结束后，webpack打包的整个过程，它并不直接操作文件，而是基于事件机制工作，会监听webpack打包过程中的某些分段，执行广泛的任务。

04

面试官常问的那些webpack插件-超详细总结

模块热更新插件。Hot-Module-Replacement 的热更新是依赖于 webpack-dev-server，后者是在打包文件改变时更新打包文件或者 reload 刷新整个页面，HRM 是只更新修改的部分。

01

Migrate From Vue-cli to Vite

[译] 原文地址：https://medium.com/nerd-for-tech/from-vue-cli-to-vitejs-648d2f5e031d

03

使用Webpack5创建Vue2项目及优化

之前我们大多都是用Vue-Cli来创建项目，但是Vue-Cli已经停止更新了，并且Vue-Cli相当于一堆插件的集合体，我们想替换以下，或者想根据我们的项目优化以下，提升编译的性能，这时候可以自己用Webpack来配置项目。

01

webpack超详细教程！入门一篇就够了

webpack 是前端的一个项目构建工具，它是基于 Node.js 开发出来的一个前端工具；

05

【愚公系列】2022年04月 Python教学课程 79-VUE组件中的单文件组件模块安装

组件是Vue中的一个重要概念，是一个可以重复使用的Vue实例，它拥有独一无二的组件名称，它可以扩展HTML元素，以组件名称的方式作为自定义的HTML标签。因为组件是可复用的Vue实例，所以它们与new Vue（）接收相同的选项，例如data，computed、watch、methods以及生命周期钩子等。仅有的例外是像el这样根实例特有的选项。

02

Vite前端项目搭建从0到1

其次是安装 Node.js，如果你的系统中还没有安装 Node.js ，可以进入 Nodejs 官网下载相应的安装包进行手动安装；如果已经安装了 Node.js，你可以使用这个命令检查一下 Node.js 版本:

08

Vue 08.webpack中使用.vue组件

注意：不能使用npm下载，需要从 github 上下载现成的包并解压，然后拷贝到项目中使用

01

Vue CLI 3搭建vue+vuex 最全分析

CLI：@vue/cli 全局安装的 npm 包，提供了终端里的vue命令（如：vue create 、vue serve 、vue ui 等命令）

01

npm 及vue，router，webpack安装快速起步

版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。

03

Vue+tp6 php框架如何快速建立一个前后端分离项目

作者主要是写后端的，所以本文主要以后端的角度，讲如何使用Vue+Tp框架结合，快速打通一个前后端分离的项目部署，可以作为后端学习Vue的入门步骤，通过此教程，你可以学到在生产环境和本地环境中，vue+tp 等框架是如何结合以及部署的。

03

webpack配置完全指南

首先webpack是一个静态模块打包器，所谓的静态模块，包括脚本、样式表和图片等等；webpack打包时首先遍历所有的静态资源，根据资源的引用，构建出一个依赖关系图，然后再将模块划分，打包出一个或多个bundle。再次白piao一下官网的图，生动的描述了这个过程：

02

当webpack有了vite的速度

是的，这就是webpack慢的原因，由于webpack对于所有运行资源进行了提前编译处理，对依赖模块进行了语法分析转义，最终的结果就是模块被打包到内存中。

04

vue项目搭建及基本配置

准备阶段会将项目环境配置完毕,包含 node、 npm、 webpack和 vue-cli。已经完成的小伙伴可以跳过此步骤看第二阶段。

03

轻量级工具Vite到底牛在哪, 一文全知道

时下大热的vue框架又来了新开发环境构建工具——Vite,今天我们一起来了解一下这个新成员。

04

Cesium入门之四：基于Vue3+Vite+Cesium构建三维地球场景

Cesium官网中提供了基于webpack配置Cesium的方法，但是这种方法太繁琐，而且使用webpack时程序启动没有Vite启动快，因此，这里选择vite创建vue3+cesium构建项目，先看下完成后的效果

02

十七.Webpack的使用

webpack 是前端的一个项目构建工具，它是基于 Node.js 开发出来的一个前端工具；

02

1、webpack从0到1-开始

这系列文章就是手把手教你如何从零构建一个webpack项目。目的就是为了了解webpack打包怎么玩的，平常项目开发中所用如ES6语法、less、vue是如何被打包的，是一个比较基础的内容，我也是为了总结一下这方面的知识点，梳理一下个人的知识体系而写下这些文字。工具及版本：vscode、webpack(v4.41.5)、node(v10.16.0) git仓库：webpack-demo 1、什么是webpack？ “webpack is a module bundler.”—webpack官网

01

js打包时间缩短90%，bundleless生产环境实践总结

最近尝试将bundleless的构建结果直接用到了线上生产环境，因为bundleless只会编译代码，不会打包，因此构建速度极快，同比bundle模式时间缩短了90%以上。得益于大部分浏览器都已经支持了http2和浏览器的es module,对于我们没有强兼容场景的中后台系统，将bundleless构建结果应用于线上是有可能的。本文主要介绍一下，本人在使用bundleless构建工具实践中遇到的问题。

00

用Vue.js在浏览器中裁剪图像[每日前端夜话0x86]

Cropping Images In The Browser With Vue.js

03

用Single-spa 创建基于 React 和 Vue 的微型前端

它使你可以在单页应用中使用多个框架，这样就可以按功能拆分代码，并能使 Angular、React、Vue.js 程序一起运行。

02

懒人Parcel

横空出世的Parcel，这几个月来成为了前端圈的又一大热点，github短短几个月就获得了上万的star.

01

工作笔记——使用Jest时遇到的一些问题

最近公司想要从mocha+karma的前端单元测试方式转换到Jest，然后任务就分配给我了，好吧，在这之前连单元测试是什么都不知道。硬生生的开始写单元测试了，写这篇文章的初衷是因为在配置Jest的过程中有好多问题，百度几乎搜索不到，无奈本人英文太差，却又不得不去看英文文档。然后，想要写篇文章，记录下其中遇到的一些问题以及解决问题的方法，当然，现在还有不少问题没有解决，等到解决了之后再来更新...orz。

03

Vue框架快速入门

Vue是现在最流行的前端框架之一，而且相对于其他两个框架React和Angular来说也更加易学，而且它的作者是国人，中文文档也很完善。当然Vue框架算是比较高级的框架，所以在使用过程中还需要JavaScript、JavaScript 2015、WebPack、NodeJS、npm、ESLint、JavaScript单元测试框架等其他知识和框架的使用方法。在学习Vue之前，最好先学习一下这些知识。由于Vue的中文文档比较完善，所以这里只介绍Vue框架的一些核心概念，详细的使用方法还得查看官方文档。

02

总结vue3 的一些知识点：Vue.js 安装

我们可以在 Vue.js 的官网上直接下载 vue.min.js 并用 <script> 标签引入。

02

用 vite 2 平滑升级 vue 2 + webpack 项目实战

之前的 webpack 命令加前缀（如："webpack:build"），继续可用

07

扫码

添加站长进交流群

领取专属 10元无门槛券

手把手带您无忧上云

扫码加入开发者社群

相关资讯

热门标签

活动推荐

运营活动

活动名称

广告关闭