引入js的方法：

一、在调用文件的顶部加入下例代码

    document.write("<script language=javascript src="+url+"></script>");
} 
// 当需要引入多个js文件时，可以采用同样的方法

二、利用document.createElement(”script”)生成了一个script的标签，设置其 type属性为text/javascript。

function addScript(url){
    var script = document.createElement('script');
    script.setAttribute('type','text/javascript');
    script.setAttribute('src',url);
    document.getElementsByTagName('head')[0].appendChild(script);
}

三、利用es6中export和import实现模块化

1.导入外部的变量或函数等；

import {firstName, lastName} from './test';

2.导入外部的模块，并立即执行

import './test'
//执行test.js，但不导入任何变量

引入css

一、内联方式

<div style="color:red"></div>

二、嵌入方式

就是使用style标签的方式写到head标签下

三、链接方式

  <link rel="stylesheet" href="../css/header.css">

这种引入的方式是最常见的，优点不仅在于 与其它页面进行共享相同的css代码，节省后期的维护成本，而且当浏览器第二次访问到相同的资源，就可以直接从本地获取资源，减少带宽。提升用户体验。但是，如果在开发过程中这样书写的话，就不利于我们后期的维护，当找寻其中一处代码进行修改的话，就相对比较麻烦。

四、导入方式

@import '../swiper/swiper.css';

利用css规则引入外部的css。
（1）因为是导入外部的css所以 导入的部分必须写在最前面。否则报错
（2）@import带来了一个明显的影响，就是增加了请求数，加大了浏览器的开销。
（3）@import是 css2.1的产物。所以低版本浏览器将会不支持。
（4）当HTML加载的时候，link引用的文件会同时加载。@import是等页面内容全部下载下来，再下载@import后面的文件。 如果文件内容过大的话，页面就会出现无样式的页面,闪烁一下之后才能正常显示，这样的话，不利于用户体验。

五、webpack相关

之前维护一官网项目，webpack是手动配置的，如果引入外部文件，需要在webpack中配置编译路径等，而之前维护的编译路径与维护路径不同，导致代码路径是正确的，而使用node运行的代码其实是经过预编译的，路径应该与编译后生成的路径一致，而不是本地代码路径，如遇到本地代码路径正确，但是运行显示文件找不到应注意webpack配置路径