首页 > 代码库 > webpack2使用ch10-处理图片(png jpg svg 等) 限制图片 压缩图片
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="http://www.mamicode.com/src/assets/girl1.jpg" > <div id="app"></div></body></html>
没什么好设置的 可以自动转换
4 组件中插入图片
4.1 layer.tpl---引入路径是绝对路径不会出问题；相对路径需要用 ${require(‘xxx‘)}
<div class="layer"> <img src="http://www.mamicode.com/assets/girl1.jpg‘)}"/> <div>this is <%= name %></div> <% for(let i=0;i<arr.length;i++){ %> <%= arr[i] %> <% } %></div>
webpack2使用ch10-处理图片(png jpg svg 等) 限制图片 压缩图片
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。