webpack2使用ch10-處理圖片(png jpg svg 等) 限制圖片 壓縮圖片

1 目錄展現 安裝依賴

 

"file-loader": "^0.11.1",

"image-webpack-loader": "^3.3.0",

"url-loader": "^0.5.8",

 

2 css中使用圖片 

2.1  webpack.config.js

const webpack = require('webpack'),
      htmlWebpackPlugin = require('html-webpack-plugin'),
      path = require('path');

module.exports = {
    entry: './src/app.js',
    output: {
        path: path.resolve(__dirname, './dist'),
        filename: 'js/[name]-[chunkhash].js',
    },
    module: { //loader第三種使用方式 配置項設置 其餘1引入 2cli
      loaders: [
          {   //解析.js
              test: '/\.js$/',  //正則匹配.js文件
              loader: 'babel',  //使用babel 要先安裝 cnpm install --save-dev babel-loader babel-core
              exclude: path.resolve(__dirname, 'node_modules'), //優化babel 排除
              include: path.resolve(__dirname, 'src'),//優化babel 打包範圍
              query: {
                  presets: ['env'] //使用方式之1 cnpm install --save-dev babel-preset-env 告訴babel如何處理
              }
          },
          {   //解析 .css
              test: /\.css$/,
              loader: 'style-loader!css-loader!postcss-loader' //style-loader!css-loader 解析使用
                                                               // css postcss-loader後端瀏覽器優化（加前綴）
                                                               //要先加載 postcss-loader寫在後面
                                                               //?importLoaders=1 css import 'xxx.css'
          },
          { //解析 .less
              test: /\.less$/,
              loader: 'style-loader!css-loader!postcss-loader!less-loader'
          },{ //解析 .html
              test: /\.html$/,
              loader: 'html-loader'
          },{ //解析 .tpl
              test: /\.tpl$/,
              loader: 'ejs-loader'
          },{ //解析 圖片
              test: /\.(png|jpg|gif|svg)$/,
              loader: 'file-loader',
              query: {
                  name: 'assets/[name]-[hash:5].[ext]'
              },
          }
      ]
    },
    plugins: [
        new htmlWebpackPlugin({
            filename: 'index.html',
            template: 'index.html',
            inject: 'body'
        }),
        new webpack.LoaderOptionsPlugin({ //瀏覽器加前綴
            options: {
                postcss: [require('autoprefixer')({browsers:['last 5 versions']})]
            }
        }),
    ]
};

2.2 app.js

import Layer from './components/layer/layer.js';
import './style/common.css';


const  App = function () {
    const dom = document.getElementById('app');
    let layer = new Layer();
    dom.innerHTML = layer.tpl({
        name: 'jeson',
        arr: ['張三', '李四', '王五', '趙六']
    });
}

new App();

2.3 layer.js

import tpl from './layer.tpl';
import './layer.less';

function layer() {
    return {
        name: 'layer',
        tpl: tpl
    }
};

export default layer;

2.4 layer.less

.layer{
  @w:100px;
  @h:200px;

  width:@w;
  height:@h;
  background-color:blue;

  div{
    width:@w - 50;
    hieght:@h - 100;
    background-color:red;
    display: flex;
    background:url('../../assets/girl1.jpg');
  }
}

2.5 打包

2.6 效果

2.7 使用 url-loader

--url-loader 對圖片大小進行限制 知足條件的轉換爲base64格式，大於limit 交給file-loader處理

2.7.1 webpack.config.js 修改

{ //解析 圖片
              test: /\.(png|jpg|gif|svg)$/,
              loader: 'url-loader',
              query: {
                  limit: 20000, //20k 
                  name: 'assets/[name]-[hash:5].[ext]' //圖片編譯後放置在文件夾assets下 [name]圖片原名 [hase:5]5位的hash值 [ext]圖片原類型

              }
 }

2.7.2 打包

2.7.3 查看

原圖片 19.1k 小於20k

2.7.4 修改限制

 

{ //解析 圖片
              test: /\.(png|jpg|gif|svg)$/,
              loader: 'url-loader',
              query: {
                  limit: 10000, //10k 
                  name: 'assets/[name]-[hash:5].[ext]' //圖片編譯後放置在文件夾assets下 [name]圖片原名 [hase:5]5位的hash值 [ext]圖片原類型
              }
 }

2.7.5 再次打包

2.7.6 再次查看

 

 

2.8 壓縮圖片 image-webpack-loader

2.8.1 修改webpack.config.js

{ //解析 圖片
              test: /\.(png|jpg|gif|svg)$/,
              /*loader: 'url-loader',
              query: {
                  limit: 10000, //20k
                  name: 'assets/[name]-[hash:5].[ext]'
              }*/
              loaders: [ //寫成loaders數組集合形式
                  'url-loader?limit=10000&name=assets/[name]-[hash:5].[ext]',
                  'image-webpack-loader?bypassOnDebug&optimizationLevel=7&interlaced=false'
              ]
          }

2.8.2 打包

2.8.3 查看

未壓縮前 與源圖片大小相同；

此時

 

3 項目根目錄文件，index.html插入圖片

 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>

</head>

<body>
    <img src="src/assets/girl1.jpg" alt="">
    <div id="app"></div>
</body>
</html>

 

 沒什麼好設置的 能夠自動轉換

 

 4 組件中插入圖片

 4.1 layer.tpl---引入路徑是絕對路徑不會出問題；相對路徑須要用 ${require('xxx')}

<div class="layer">
    <img src="${require('../../assets/girl1.jpg')}"/>
    <div>this is <%= name %></div>
    <% for(let i=0;i<arr.length;i++){ %>

        <%= arr[i]  %>

    <% } %>
</div>