1. 程式人生 > >實戰踩坑筆記-手把手從0打造電商平臺-前端-慕課網

實戰踩坑筆記-手把手從0打造電商平臺-前端-慕課網

 

webpack 公共模組函式未定義

忘了加

module.exports = xx;

Fiddler | Charles 抓取不到chrome  

chrome外掛Proxy SwitchyOmega 新建代理127.0.0.1:8888


Fiddler | Charles 抓取不到localhost

webpack配置加上

devServer: { disableHostCheck: true },

localhost加個.

localhost.:8080


Fiddler 規則不生效

換用charles


 

<%= require('html-loader!./layout/html-head.html')%> 不起作用,在網頁中顯示的是字串

解決方案:

方案一:去掉webpack.config.js檔案中配置的全域性html-loader(更方便,使用較多)

這樣html模版檔案就不會被html-loader解析,我們可以使用ejs語法嵌入其他html頁面和圖片資源。因為沒了全域性的html-loader解析html檔案,使用ejs語法嵌入的資源返回的是ejs程式碼,還需要使用html-loader來解析成html程式碼。

(html-loader!)表示引用html-loader這個載入器來解析

<%= require('html-loader!../layout/left.html') %>

直接可以使用require來嵌入圖片

<img src=<%= require( '../img/test.jpg') %> />

方案二:將模版檔案全部替換成ejs檔案(預設模版,官方推薦)

這樣做的原因是即使使用了全域性的html-loader來載入html檔案,但是它也載入不到.ejs結尾的ejs檔案。這樣有效避免了html-loader對ejs fallback的影響。

因為有全域性html-loader的存在,所以不需要加(html-loader!)字首

<%= require('../layout/left.html') %> //如果嵌入檔案是html檔案

因為是ejs檔案不會被全域性html-loader載入,所以要加字首

<%= require('html-loader!../layout/left.html') %> //如果嵌入檔案是ejs檔案

直接可以使用require來嵌入圖片

<img src=<%= require( '../img/test.jpg') %> />


作者:littlesummer的夏天
連結:http://www.imooc.com/article/18513?block_id=tuijian_wz%EF%BC%8C
來源:慕課網
本文原創釋出於慕課網 ,轉載請註明出處,謝謝合作


 

Module parse failed: Unexpected character '�' (1:6)

配置上url和file loader

https://www.npmjs.com/package/url-loader

https://www.npmjs.com/package/file-loader


 

css中引用路徑圖片不顯示

file-loader和url-loader對圖片的處理重複了,用url-loader處理就行


 

 front-awesome Module parse failed: Unexpected character ' ' (1:4)  Module parse failed: Unexpected character '�' (1:6)

url-loader加上

|woff|svg|ttf|eot|woff2這些型別