引入js的方法：

一、在調(diào)用文件的頂部加入下例代碼

    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實現(xiàn)模塊化

1.導入外部的變量或函數(shù)等；

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

2.導入外部的模塊，并立即執(zhí)行

import './test'
//執(zhí)行test.js，但不導入任何變量

引入css

一、內(nèi)聯(lián)方式

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

二、嵌入方式

就是使用style標簽的方式寫到head標簽下

三、鏈接方式

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

這種引入的方式是最常見的，優(yōu)點不僅在于 與其它頁面進行共享相同的css代碼，節(jié)省后期的維護成本，而且當瀏覽器第二次訪問到相同的資源，就可以直接從本地獲取資源，減少帶寬。提升用戶體驗。但是，如果在開發(fā)過程中這樣書寫的話，就不利于我們后期的維護，當找尋其中一處代碼進行修改的話，就相對比較麻煩。

四、導入方式

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

利用css規(guī)則引入外部的css。
（1）因為是導入外部的css所以 導入的部分必須寫在最前面。否則報錯
（2）@import帶來了一個明顯的影響，就是增加了請求數(shù)，加大了瀏覽器的開銷。
（3）@import是 css2.1的產(chǎn)物。所以低版本瀏覽器將會不支持。
（4）當HTML加載的時候，link引用的文件會同時加載。@import是等頁面內(nèi)容全部下載下來，再下載@import后面的文件。 如果文件內(nèi)容過大的話，頁面就會出現(xiàn)無樣式的頁面,閃爍一下之后才能正常顯示，這樣的話，不利于用戶體驗。

五、webpack相關

之前維護一官網(wǎng)項目，webpack是手動配置的，如果引入外部文件，需要在webpack中配置編譯路徑等，而之前維護的編譯路徑與維護路徑不同，導致代碼路徑是正確的，而使用node運行的代碼其實是經(jīng)過預編譯的，路徑應該與編譯后生成的路徑一致，而不是本地代碼路徑，如遇到本地代碼路徑正確，但是運行顯示文件找不到應注意webpack配置路徑