标签：modules top png sse images har pack img tle
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>
webpack2使用ch10-处理图片(png jpg svg 等) 限制图片 压缩图片
标签：modules top png sse images har pack img tle
原文地址：http://www.cnblogs.com/easyweb/p/6674759.html
