js中如何引入js html的script标签如何引入js文件

说到JavaScript怎么引入，那可真有三种“绝活”——内联引入、内嵌引入和外部引入，听起来是不是有点专业？别急，我给你慢慢道来！

内联引入：就是直接把JS代码写在HTML标签里，比如按钮的onclick事件里写个alert("hello")，那种超简单，适合写点小功能，方便得不要不要的。
内嵌引入：把JS代码直接写在HTML的<script>标签里，比如你在网页里加个<script>console.log("HI!")</script>，这样就能让页面加载时运行JS代码。
外部引入：最给力的一招，就是把JS代码写在单独的.js文件里，然后用<script src="yourfile.js"></script>加载进来，这样代码不但整洁而且好维护，大家公认最推荐的方法！

总结一下就是，这三种方法中，外部引入最为实用和专业，尤其是项目变大以后，绝对离不开它。

vue项目和webpack环境中怎么引入外部js文件和模块

接下来说说咱们前端大热门Vue项目里怎么搞定外部JS，一点都不难噢！这里有多种招式，给你排排坐：

直接在Vue项目的index.html里用<script>标签挂载外部JS文件。简单粗暴，不过有个小缺点，所有组件都会加载这个JS文件，要是这个JS只为了某个组件服务，那可就不划算啦。
用import语法引入本地静态JS文件。比如，你有一个叫utils.js的模块，直接在单文件组件里写import {someFunc} from './utils.js'，接着就能在组件里直接用someFunc()。超级方便！
动态插入script标签。有时候你得动态加载JS，比如第三方库或者某些临时功能，这时候可以用document.createElement('script')创建标签，设置src，然后挂到页面上，等它加载完成再用，灵活得很！
使用第三方模块加载器如RequireJS。这玩意儿挺酷，帮你管理JS模块的依赖关系，运行时自动加载模块，解放双手。不过现在ES6的import两头火，RequireJS用得少啦。
webpack打包后怎么用？简单！打包生成的bundle.js文件，咱们直接用<script src="bundle.js"></script>就行了，不管是在HTML里还是Node.js环境，都能顺利加载执行。这一步是让咱们写的模块化代码成真，大功告成！