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" >
    <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>