資訊專欄INFORMATION COLUMN
摘要：配置圖片路徑出錯問題項目在開發(fā)環(huán)境下工作正常，當打包后圖片不見了，檢查元素后發(fā)現(xiàn)路徑出錯了。打包后文件目錄如下可以看到背景圖片的路徑應(yīng)該是而實際卻是，找到原因后就好解決了方法一查看目錄下的配置，圖片文件會經(jīng)過處理。
webpack配置-圖片路徑出錯 問題
項目在開發(fā)環(huán)境下工作正常，當打包后圖片不見了，檢查元素后發(fā)現(xiàn)路徑出錯了。
圖片路徑是這樣：background: url(/static/img/bg_camera_tip.bd37151.png)，但該路徑下文件并不存在。
打包后文件目錄如下：
可以看到背景圖片的路徑應(yīng)該是../../static而實際卻是/static，找到原因后就好解決了
查看build目錄下webpack.base.conf.js的配置，圖片文件會經(jīng)過url-loader處理。
module: {
rules: [
...
{
test: /.(png|jpe?g|gif|svg)(?.*)?$/,
loader: "url-loader",
options: {
limit: 10000,
name: utils.assetsPath("img/[name].[hash:7].[ext]")
}
},
...
]
}
它的作用是當文件大小小于limit限制時會返回一個base64串，其實就是把圖片資源編碼為base64串放在CSS文件里，這樣就可以減少一次網(wǎng)絡(luò)請求，因為每一張圖片都是需要從服務(wù)端去下載的。但是如果文件太大了就會導(dǎo)致base64串很長，那放在CSS文件里面就會導(dǎo)致文件很大，CSS的文件下載時間變長，就得不償失了，所以會有一個limit參數(shù)，在這個范圍內(nèi)的才會被轉(zhuǎn)成base64串，它的單位是字節(jié)。對于這個問題，該loader還提供了一個publicPath參數(shù)，目的是修改引用的圖片地址，默認是當前路徑，那直接改它就可以了，即在options節(jié)點下添加一個參數(shù)publicPath: "../../"。
module: {
rules: [
...
{
test: /.(png|jpe?g|gif|svg)(?.*)?$/,
loader: "url-loader",
options: {
limit: 10000,
publicPath: "../../", //你實際項目的引用地址前綴
name: utils.assetsPath("img/[name].[hash:7].[ext]")
}
},
...
]
}
方法二
webpack.base.conf.js里還有一條規(guī)則，每一個vue文件都會經(jīng)過vueLoaderConfig處理
module: {
rules: [
{
test: /.vue$/,
loader: "vue-loader",
options: vueLoaderConfig
},
...
]
}
vueLoaderConfig位于build/vue-loader.conf.js，它又調(diào)用了build/utils.js的cssLoaders的方法。
if (options.extract) {
return ExtractTextPlugin.extract({
use: loaders,
fallback: "vue-style-loader"
})
}
如果是生產(chǎn)環(huán)境options.extract值為true，會調(diào)用這個ExtractTextPlugin插件做處理，它的作用是抽離項目中引用的樣式文件到一個獨立的CSS文件中，這樣就可以一次加載所有的CSS文件，相當于CSS文件并行加載，可以減少網(wǎng)絡(luò)請求次數(shù)，更多優(yōu)點及使用可以查看ExtractTextWebpackPlugin?；氐竭@個問題，它還有一個參數(shù)就是publicPath，可以覆蓋所指定的loader的publicPath配置，那么就跟前面的配置一樣，可以給所有的loader統(tǒng)一配置引用文件的路徑地址。
另外這里的user:loader實際上是返回一系列的loader的集合，cssLoaders的返回是
return {
css: generateLoaders(),
postcss: generateLoaders(),
less: generateLoaders("less"),
sass: generateLoaders("sass", { indentedSyntax: true }),
scss: generateLoaders("sass"),
stylus: generateLoaders("stylus"),
styl: generateLoaders("stylus")
}
這也就是即便你沒有在webpack.base.conf.js中配置sass-loader也能使用SASS語法的原因。
文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/94605.html
摘要：了解什么是官方文檔是這樣介紹的點我了解官方文檔簡單的來說，可以看做是模塊打包機它做的事情是，分析你的項目結(jié)構(gòu)，找到模塊以及其它的一些瀏覽器不能直接運行的拓展語言，等，并將其轉(zhuǎn)換和打包為合適的格式供瀏覽器使用。 了解webpack 什么是webpack 官方文檔是這樣介紹的：點我了解官方文檔 簡單的來說，WebPack可以看做是模塊打包機：它做的事情是，分析你的項目結(jié)構(gòu)，找到JavaSc...
摘要：徹底分離源文件目錄和生成文件目錄使用生成出來的頁面可以很安心地跟打包好的其它資源放到一起，相對于另起一個目錄專門存放頁面文件來說，整個文件目錄結(jié)構(gòu)更加合理如何利用生成頁面生成頁面主要是通過來實現(xiàn)的，下面來介紹如何實現(xiàn)。 本文首發(fā)于Array_Huang的技術(shù)博客——實用至上，非經(jīng)作者同意，請勿轉(zhuǎn)載。原文地址：https://segmentfault.com/a/119000000712...
摘要：構(gòu)建構(gòu)建就是把源代碼轉(zhuǎn)換成發(fā)布到線上的可執(zhí)行代碼，包括如下內(nèi)容。自動刷新監(jiān)聽本地源代碼的變化，自動重新構(gòu)建刷新瀏覽器。自動發(fā)布更新完代碼后，自動構(gòu)建出線上發(fā)布代碼并傳輸給發(fā)布系統(tǒng)。將文件放入到項目中，在中新建一個放字體圖標的文件夾。 項目地址 github.com/wudiufo/Web… 知識點概覽： Loader，HMR ,Create React App, Caching, Plug...
webpack基于node，因此想要學(xué)習(xí)webpack首先要安裝node。webpack4要安裝node8.2以上版本。 1、安裝webpack 為什么選擇本地安裝，主要是由于以后介紹熱更新這一部分不會報錯，如果全局安裝熱更新就會報錯，以本部分為基礎(chǔ)依次介紹，保證各部分不會出錯。 mkdir webpack-test cd webpack-test npm init //初始化npm，都選擇默認，...
摘要：配置完成后就可以使用來打包代碼了。值得注意的是會刪除所有無作用代碼也就是說那些包裹在這些全局變量下的代碼塊都會被刪除這樣就能保證這些代碼不會因發(fā)布上線而泄露。默認會從項目的根目錄下引入這些文件。 命令使用 npm install webpack -g 作為全局安裝, 在任意目錄使用 npm install webpack --save-dev 作為項目依賴安裝 np...
閱讀 4627·2021-09-26 09:55
閱讀 1369·2019-12-27 12:16
閱讀 890·2019-08-30 15:56
閱讀 1908·2019-08-30 14:05
閱讀 995·2019-08-30 13:05
閱讀 1271·2019-08-30 10:59
閱讀 1447·2019-08-26 16:19
閱讀 1889·2019-08-26 13:47
