The Url-loader of Webpack

I. Compiling a picture of a different suffix with file-loader

1. Configuring the Webpeck.config.js File

ConstPath = require ('Path');ConstHtmlwebpackplugin = require ('Html-webpack-plugin'); Module.exports={//node. JS syntax exports an objectEntry'./src/app.js', output:{path:path.resolve (__dirname,'Dist'),//Absolute PathFileName'Main.js',}, plugins:[//Generate HTML        Newhtmlwebpackplugin ({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,//automatically open the Server home pagePort9000, inline:true,    }}

2. Introducing in the App.js file

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';ConstTU2 = require ('./common/img/1.png');//Global Reference Reactdom.render (<div classname='Rea'> ""/>  './common/img/1.png')}/>//Direct use of </div>, document.getElementById ('CDD'));

Second, compile different suffix files with Url-loader.

1. Configuration url-loader,url-loader will introduce the image encoding, generate dataurl, less than about 20Kb image generated hit him URL

Const PATH = require (' path '); const Htmlwebpackplugin = require (' Html-webpack-plugin '); module.exports={// node. JS syntax exports an object entry: './src/app.js ', output:{path:path.resolve (__dirname, ' dist '),//absolute path filename: ' ma In.js ',}, plugins:[//generates HTML new Htmlwebpackplugin ({filename: ' index.html ', Template: ' s                    Rc/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,//automatically opens the Server home page port:9000, Inline:true,}}

2. Introduction of images

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={img2}/>        </div>    document.getElementById (' CDD '));

3. Running cnpm run dev to show picture usage

Webpack Url-loader