webpack—url-loader 解決項目中圖片打包路徑問題

時間 2020-01-06

標籤 webpack url loader 解決項目圖片打包路徑問題欄目 HTTP/TCP 简体版

原文原文鏈接

剛開始用webpack的同窗很容易掉進圖片打包這個坑裏，好比打包出來的圖片地址不對或者有的圖片並不能打包進咱們的目標文件夾裏。
下面咱們就來分析下在webpack項目中圖片的應用場景。
1.CSS文件中的背景圖等設置
項目目錄圖：

如下以我項目中的test.css爲例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.htmlhtml

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

3.js中引入圖片node

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 這個加載器。
在 webpack.config.js 文件中配置以下：webpack

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

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

loader 後面 limit 字段表明圖片打包限制，這個限制並非說超過了就不能打包，而是指當圖片大小小於限制時會自動轉成 base64 碼引用。上例中大於8192字節的圖片正常打包，小於8192字節的圖片以 base64 的方式引用。sass

url-loader 後面除了 limit 字段，還能夠經過 name 字段來指定圖片打包的目錄與文件名babel

而使用extractTextPlugin插件時，須要配置publicPath: "../", 不配置時css文件中背景圖默認地址會在css文件夾下查找圖片資源，致使項目圖片路徑不正確app

webpack.config.js 配置文件以下：ui

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') //排除打包的文件，加速打包時間
      },
      //處理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後綴結尾的
      {
        test: /\.tpl$/,
        loader: 'ejs-loader'
      },
      //處理圖片中的loader,file-loader,url-loader,image-webpack-loader相互配合(圖片格式轉換base64 圖片壓縮)
      {
        test:/\.(jpg|png|gif|bmp|jpeg)$/,
        loader: 'url-loader?limit=8192&name=img/[hash:8].[name].[ext]'
      }
      ]
  }
};

處理scss的webpack完整配置文件url

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') //排除打包的文件，加速打包時間
      },
      {
        test: /\.scss$/,
        use: [ 'style-loader', 'css-loader', 'sass-loader' ]
      },
      //處理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後綴結尾的
      {
        test: /\.tpl$/,
        loader: 'ejs-loader'
      },
      //處理圖片中的loader,file-loader,url-loader,image-webpack-loader相互配合(圖片格式轉換base64 圖片壓縮)
      {
        test:/\.(jpg|png|gif|bmp|jpeg)$/,
        loader: 'url-loader?limit=8192&name=img/[hash:8].[name].[ext]'
      }
      ]
  }
};

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。