專案有十幾個頁面,頂部導航欄是相同的,頁面一多,修改起來就很麻煩,因此,需要使用類似於php裡面include的功能,實現複用,但是專案沒有後臺,是靜態頁面,因此使用了webpack裡面的依賴.

webpack裡面有個html-loader有這樣的功能

因此在webpack-config.js中新增如下程式碼:

        {
          test: /\.(html)$/,
            use: {
              loader: 'html-loader'
            }
         }

然後抽取公共部分的html程式碼,新建新的html檔案common.html,
在每個頁面對應的部分引入:
<%= require(./common.html') %>

結果webpack報錯了,頁面載入不出來,不僅僅如此,把html程式碼還原後依舊報錯,
而且是webpack-html-plugin報錯
網上查了是webpack-html-plugin跟html-loader衝突,我把webpack-html-plugin的模板設定成html,
就不能使用html-loader解析html檔案.
於是刪除了webpack.config.js裡的html-loader相關的配置,在對應頁面的程式碼修改如下:
<%= require('html-loader!./common.html') %>
‘html-loader!’表示僅僅在這串程式碼使用html-loader解析.
達成了理想中的效果