webpack之url-loader
一.用file-loader编译不同后缀的图片
1.配置webpeck.config.js文件
const path = require('path'); const htmlWebpackPlugin = require('html-webpack-plugin'); module.exports={//node.js语法导出一个对象 entry:'./src/app.js', output:{ path:path.resolve(__dirname,'dist'),//绝对路径 filename:'main.js', }, plugins:[//生成html new htmlWebpackPlugin({ filename:'index.html', template:'src/index.html' }) ], module:{ rules:[{ test:/\.js$/, use:[{ loader:'babel-loader', options:{ presets:['react'] } },]}, { test:/\.css$/, use:['style-loader','css-loader'] }, { test:/\.(jpg|png|gif|jpeg)$/, use:['file-loader'] }, ] }, devServer:{ open:true,//自动打开服务器首页 port:9000, inline:true, } }
2.在app.js文件中引入
import React from 'React'; import ReactDOM from 'react-dom'; import './common/css/style.css'; import './common/css/app.css'; import tu from './common/img/11.jpg'; const tu2 = require('./common/img/1.png');//全局方式引用 ReactDOM.render( <div className='rea'> <img src={tu} alt=""/> <img src={tu2} /> <img src={require('./common/img/1.png')} />//直接使用 </div>, document.getElementById('cdd') );
二、用url-loader编译不同后缀的文件
1.配置url-loader,url-loader会将引入的图片编码,生成dataURl,小于约20Kb的图片生成打他URL
const path = require('path'); const htmlWebpackPlugin = require('html-webpack-plugin'); module.exports={//node.js语法导出一个对象 entry:'./src/app.js', output:{ path:path.resolve(__dirname,'dist'),//绝对路径 filename:'main.js', }, plugins:[//生成html new htmlWebpackPlugin({ filename:'index.html', template:'src/index.html' }) ], module:{ rules:[{ test:/\.js$/, use:[{ loader:'babel-loader', options:{ presets:['react'] } },]}, { test:/\.css$/, use:['style-loader','css-loader'] }, { test:/\.(jpg|png|gif|jpeg)$/, use:[{ loader:'url-loader', options:{ limit:20000 } }] }, ] }, devServer:{ open:true,//自动打开服务器首页 port:9000, inline:true, } }
2.引入图片
import React from 'React'; import ReactDOM from 'react-dom'; import './common/css/style.css'; import './common/css/app.css'; import tu from './common/img/11.jpg'; import img2 from './common/img/2.jpg'; const tu2 = require('./common/img/1.png'); ReactDOM.render( <div className='rea'> <img src={tu} alt=""/> <img src={tu2} /> <img src={img2}/> <img src={require('./common/img/1.png')} /> </div>, document.getElementById('cdd') );
3. 运行 cnpm run dev,展示图片使用状况
posted on 2018-01-24 09:55 running-fly 阅读(266) 评论(0) 编辑 收藏 举报