很多人應該像我一樣，對於webpack的require.context都是一知半解吧。網上很多關於require.context的使用案例，但是我沒找到可以幫助我理解這個知識點的，於是也決定自己來探索一下，下麵以網上流行的svg圖標方案為例說明。對了，本文的重點是require.context，並不... ...
很多人應該像我一樣，對於webpack的require.context都是一知半解吧。網上很多關於require.context的使用案例，但是我沒找到可以幫助我理解這個知識點的，於是也決定自己來探索一下，下麵以網上流行的svg圖標方案為例說明。對了，本文的重點是require.context，並不會去解釋svg symbol方案svg-sprite-loader。
關鍵代碼
src/icons/index.js
const context = require.context("./svg", true, /\.svg$/)
context.keys().map(context)main.js
import '@/icons'webpack.base.config.js
{
test: /\.svg$/,
loader: "svg-sprite-loader",
include: [resolve("src/icons")],
options: {
symbolId: "icon-[name]"
}
},
{
test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,
loader: "url-loader",
exclude: [resolve("src/icons")],
options: {
limit: 10000,
name: utils.assetsPath("img/[name].[hash:7].[ext]")
}
},why?
很多人跟我一樣，一開始只想說，為什麼這樣就可以，why???
要知道是什麼，就上列印大法。
const context = require.context("./svg", true, /\.svg$/)
// 看看你是何方神聖
console.log(context)
context.keys().map(context)下麵就真的以一張圖進行解釋，有問題的歡迎留言交流呀！
