[JS Master's Road] Webpack Tutorial Series 9-Package picture (File-loader) usage

[JS Master Road] in layman Webpack Tutorial Series Index Directory:

• [JS Master's Road] Webpack Tutorial Series 1-Installation and basic packaging usage and command parameters
• [JS Master Road] in Webpack Tutorial Series 2-Configuration file Webpack.config.js detailed (UP)
• [JS Master's Road] Webpack Tutorial Series 3-configuration file webpack.config.js details (bottom)
• [JS Master Road] Webpack Tutorial Series 4-Plug-in use of the Html-webpack-plugin configuration (top)
• [JS Master Road] Webpack Tutorial Series 5-Plug-in use of the Html-webpack-plugin configuration (medium)
• [JS Master Road] Webpack Tutorial Series 6-Plug-in use of the Html-webpack-plugin configuration (bottom)
• [JS Master of the road] in layman Webpack Tutorial series 7-(Babel-loader,css-loader,style-loader) usage
• [JS Master of the road] in layman Webpack Tutorial series 8-(Postcss-loader,autoprefixer,html-loader,less-loader,ejs-loader) usage
• [JS Master's Road] Webpack Tutorial Series 9-Package picture (File-loader) usage

We still continue, this article is to talk about the packaging of picture resources, images in static layout, often appear in two places CSS through the background introduction of the background, but also in the HTML template file with an IMG tag introduced in the way, If you want to use a picture resource in webpack, we need to work with File-loader.

Installation File-loader: npm install File-loader--save-dev

Create a new Folder (IMG) to store pictures under the SRC directory

First, the DEMO3 directory below the index.html file introduces the picture

 1  <  body  >  2  <  div  id  = "app"  ></ div  >  3  <  img  src  = "./src/img/dm.jpg"   alt  = ""  >  4  </ body  >  

Ii.. style.css File Introduction Picture

1 Html,body{2 margin:0;3 padding:0;4}5 Body{6 background:url ('.. /img/dm.jpg ');7}8 Ul,li{9 List-style-type:None;Ten} One Div{ A transition:All ease 1s; -}

Iii. Modal.ejs File Introduction picture

1 <Divclass= "Modal">2     <Div>The name of this component is:<%=name%></Div>3     <%  for(var i= 0; I<arr.length; I++ ){ %>4         <%=Arr[i]%>5     <% } %>6 </Div>7 <imgsrc= "${require ('. /img/dm.jpg ')} "alt="">8 <imgsrc= "${require ('. /img/dm.jpg ')} "alt="">9 <imgsrc=".. /img/dm.jpg "alt="">

Note: Introduce the picture path in the template, if it is relative path to introduce ${require (relative path of picture)}, otherwise the packaging path will be problematic

Four, webpack.config.js configuration File-loader

1 varHtmlwebpackplugin = require (' Html-webpack-plugin '));2Let path = require (' path ');3Module.exports = {4Entry: './src/main.js ',5 output: {6Path: __dirname + '/dist ',7FileName: ' Js/[name].bundle.js ',8     },9 plugins: [Ten         NewHtmlwebpackplugin ({ OneFileName: ' index.html ', ATemplate: ' index.html ', -Injecttrue -         }) the     ], - module: { - rules: [ -             { +Test:/\.js$/, -Exclude:/(Node_modules)/, + include: [ APath.resolve (__dirname, "src"), at                 ], - Use : { -Loader: ' Babel-loader ', - options: { -Presets: [' env '] -                     } in                 } -             }, to             { +Test:/\.css$/, -Exclude:/(Node_modules)/, the Use : [ *' Style-loader ', { $Loader: ' Css-loader ',Panax Notoginseng options: { -Importloaders:1 the                         }, +                     }, A' Postcss-loader ' the                 ] +             }, -             { $Test:/\.less$/, $ Use : [ -                     { -Loader: "Style-loader" the                     }, { -Loader: "Css-loader"Wuyi                     }, { theLoader: "Less-loader" -                     } Wu                 ] -             }, About             { $Test:/\. (HTML) $/, - Use : { -Loader: ' Html-loader ', -                 } A             }, +             { theTest:/\. (Ejs) $/, - Use : { $Loader: ' Ejs-loader ', the                 } the             }, the             { theTest:/\. (png|gif|jpg|svg|jpeg) $/I, - Use : { inLoader: ' File-loader ', the query: { theName: ' Assets/[hash]. [ext] ' About                     } the                 } the             } the         ] +     } -}

The query section is configured to set a custom storage path and file name for the packaged picture. Perform webpack packaging, you can see the effect after packaging

There is also a processing picture of the loader, called Url-loader, will be the image through the Base64 code directly into the IMG tag, usage and other loader processing is similar

[JS Master's Road] Webpack Tutorial Series 9-Package picture (File-loader) usage