webpack-url-loader如何解決項(xiàng)目中圖片打包路徑問題-創(chuàng)新互聯(lián)

這篇文章給大家分享的是有關(guān)webpack-url-loader如何解決項(xiàng)目中圖片打包路徑問題的內(nèi)容。小編覺得挺實(shí)用的，因此分享給大家做個(gè)參考，一起跟隨小編過來看看吧。

成都創(chuàng)新互聯(lián)公司專注于企業(yè)營(yíng)銷型網(wǎng)站、網(wǎng)站重做改版、安順網(wǎng)站定制設(shè)計(jì)、自適應(yīng)品牌網(wǎng)站建設(shè)、H5場(chǎng)景定制、商城系統(tǒng)網(wǎng)站開發(fā)、集團(tuán)公司官網(wǎng)建設(shè)、外貿(mào)營(yíng)銷網(wǎng)站建設(shè)、高端網(wǎng)站制作、響應(yīng)式網(wǎng)頁設(shè)計(jì)等建站業(yè)務(wù)，價(jià)格優(yōu)惠性價(jià)比高，為安順等各大城市提供網(wǎng)站開發(fā)制作服務(wù)。

剛開始用webpack的同學(xué)很容易掉進(jìn)圖片打包這個(gè)坑里，比如打包出來的圖片地址不對(duì)或者有的圖片并不能打包進(jìn)我們的目標(biāo)文件夾里。

下面我們就來分析下在webpack項(xiàng)目中圖片的應(yīng)用場(chǎng)景。

1.CSS文件中的背景圖等設(shè)置

項(xiàng)目目錄圖：

webpack-url-loader如何解決項(xiàng)目中圖片打包路徑問題

以下以我項(xiàng)目中的test.css為例

.test{
  color: red;
  width: 150px;
  height: 100px;
  overflow: hidden;
  background: url("../img/box@2x.png") no-repeat;
  background-size: 150px auto;
}
.img-base64{
  color: red;
  width: 150px;
  height: 100px;
  overflow: hidden;
  background: url("../img/media1.png") no-repeat;
  background-size: 100px auto;
}
#img-e {
  width:100px;
}

2.html文件中引入圖片，下面為模板文件index.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>webpack-img</title>
</head>
<body>
1.css背景圖 圖片格式
<div class="test"></div>
2.css背景圖 轉(zhuǎn)化為base64
<div class="img-base64"></div>
3.html里引入圖片
<div><img src="img/media4.png" ></div>
4.js里引入圖片
</body>
</html>

3.js中引入圖片

require('../css/test.css');
var imgSrc = require('../img/do.gif');

var img = new Image();
img.id = 'img-e';
img.src = imgSrc;
document.body.appendChild(img);

url-loader

在 webpack 中引入圖片需要依賴 url-loader 這個(gè)加載器。

在 webpack.config.js 文件中配置如下：

{
    test:/\.(jpg|png|gif|bmp|jpeg)$/,
    loader: 'url-loader?limit=8192&name=img/[hash:8].[name].[ext]'
   }

test 屬性代表可以匹配的圖片類型，除了 png、jpg 之外也可以添加 gif 等，以豎線隔開即開。

loader 后面 limit 字段代表圖片打包限制，這個(gè)限制并不是說超過了就不能打包，而是指當(dāng)圖片大小小于限制時(shí)會(huì)自動(dòng)轉(zhuǎn)成 base64 碼引用。上例中大于8192字節(jié)的圖片正常打包，小于8192字節(jié)的圖片以 base64 的方式引用。

url-loader 后面除了 limit 字段，還可以通過 name 字段來指定圖片打包的目錄與文件名

而使用extractTextPlugin插件時(shí)，需要配置publicPath: "../", 不配置時(shí)css文件中背景圖默認(rèn)地址會(huì)在css文件夾下查找圖片資源，導(dǎo)致項(xiàng)目圖片路徑不正確

webpack.config.js 配置文件如下：

const webpack = require("webpack")
const HtmlWebpackPlugin = require('html-webpack-plugin')
const extractTextPlugin = require("extract-text-webpack-plugin")

const path = require('path')
const extractCSS = new extractTextPlugin("css/[name].[hash:6].css")//
const OptimizeCssAssetsPlugin = require('optimize-css-assets-webpack-plugin');//壓縮css插件
module.exports = {
 //注意這里是exports不是
 entry: './src/js/main.js',
 output: {
  publicPath:"./",
  path: path.resolve(__dirname + "/dist"),
  //打包后的js文件存放的地方
  filename: "js/[name].[hash:6].js" //打包后的js文件名
 },
 plugins: [
  extractCSS,
  new OptimizeCssAssetsPlugin(),//壓縮css
  new webpack.optimize.UglifyJsPlugin(),//new uglify(),//壓縮js
  new HtmlWebpackPlugin({
   filename: 'index.html',
   template:'src/index.html'
  })
 ],
 module: {
  rules: [ //1.0的是loaders
   //處理js中的loader
   {
    test: /\.js$/,
    loader: 'babel-loader',
    include: path.resolve(__dirname, '/src'),
    //指定打包的文件
    exclude: path.resolve(__dirname, '/node_modules') //排除打包的文件，加速打包時(shí)間
   },
   //處理css中的loader
   {
    test: /\.css$/,
    use: extractTextPlugin.extract({
     fallback: "style-loader",
     publicPath: "../",
     use: [
      {
       loader: 'css-loader',
       options:{
        minimize: true //css壓縮
       }
      }
     ]
    })
   },
   //處理html模板中的loader
   {
    test: /\.html$/,
    loader: 'html-loader'
   },
   //處理ejs模板中的loader,以.tpl后綴結(jié)尾的
   {
    test: /\.tpl$/,
    loader: 'ejs-loader'
   },
   //處理圖片中的loader,file-loader,url-loader,image-webpack-loader相互配合(圖片格式轉(zhuǎn)換base64 圖片壓縮)
   {
    test:/\.(jpg|png|gif|bmp|jpeg)$/,
    loader: 'url-loader?limit=8192&name=img/[hash:8].[name].[ext]'
   }
   ]
 }
};

感謝各位的閱讀！關(guān)于“webpack-url-loader如何解決項(xiàng)目中圖片打包路徑問題”這篇文章就分享到這里了，希望以上內(nèi)容可以對(duì)大家有一定的幫助，讓大家可以學(xué)到更多知識(shí)，如果覺得文章不錯(cuò)，可以把它分享出去讓更多的人看到吧！

文章名稱：webpack-url-loader如何解決項(xiàng)目中圖片打包路徑問題-創(chuàng)新互聯(lián)
本文URL：http://jinyejixie.com/article20/ccspco.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供靜態(tài)網(wǎng)站、ChatGPT、用戶體驗(yàn)、做網(wǎng)站、品牌網(wǎng)站建設(shè)、手機(jī)網(wǎng)站建設(shè)

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來源：創(chuàng)新互聯(lián)

猜你還喜歡下面的內(nèi)容

成人午夜视频全免费观看高清-秋霞福利视频一区二区三区-国产精品久久久久电影小说-亚洲不卡区三一区三区一区

webpack-url-loader如何解決項(xiàng)目中圖片打包路徑問題-創(chuàng)新互聯(lián)