How to use the sample code of the snow map in WebPack

One, what is the snow map?

CSS Sprite, CSS Sprite, also called it CSS Elf, is a CSS image merge technology that combines small icons and background images to a picture, then Use the CSS background positioning to display the part of the picture that needs to be displayed.

II: Why use the snow map

Because of the needs of our company, because there are many components, there are about 50 pictures under each component. Each picture is a request, that is, it has sent more than 300 requests, which is terrible, so in order to optimize performance, reduce HTTP requests, decide to use the form of Xuebi.

The snow map is to organize a lot of pictures you want into a picture, then make pictures and positioning through Background- * to achieve the previous effect.

3: How to use Xuebi Chao

There are many ways before, such as PS, now the best program is still in WebPack-Spritesmith .

I am actually not very understanding for WebPack, I now listed usage methods and I have encountered when using WebPack.

1. Install


Execute the command line:

npm install –save-dev webpack-spritesmith

2. In WebPack.config


VAR PATH = Require (‘PATH’) VAR SPRITESMITHPLUGIN = Require (‘WebPack-Spritesmith’) // Custom Style Var TemplateFunction = function (data) {var shareD = ‘.ico {background-size: twpx thpx}’ .replace (‘TW’, DATA.SPRITES [0] .total_width / 2) .Replace (‘th’, data.sprites [0] .total_height / 2) Var persprite = data.sprites.map (function (sprite) {return ‘& .Element-n {\ n width: wpx; \ n height: hpx; \ n background-position: xpx ypx; \ n}’ .replace ‘N’, sprite.name) .Replace (‘w’, sprite.width / 2) .replace (‘h’, sprite.height / 2) .replace (‘x’, sprite.offset_x / 2) .replace ( ‘Y’, sprite.offset_y / 2) .replace (‘tw’, sprite.total_width / 2) .replace (‘th’, sprite.total_height / 2)}). Join (‘\ n’) returnid + ‘ \ n ‘+ persprite} module.exports = {… module: {rules: [{test: /\.styl), use: [‘ style-loader ‘,’ css-loader ‘,’ stylus-loadinger ” ]}, {test: /\.png most //, use: [‘file-loader? name = I / [hash]. [ext]’]}]}, resolve: {modules: [‘Node_Modules’,’ Spritesmith- Generated ‘]}, Plugins: [New Sritesmithplugin ({src: {// Introduction Path CWD: path.resolve (__ DIRNAME,’ SRC / IMAGES / IOS / ‘), GLOB:’ * .png ‘}, Target: {/ / Output path image: path.resolve (__ dirname, ‘src / spritesmith-generated / ios.png’), CSS:[[[Path.Resolve (__ DIRNAME, ‘SRC / SPRITESMITH-GENERATED / SPRITE-1.CSS’), { format: ‘function_based_template’}], [path.resolve (__ dirname, ‘src / spritesmith-generated / sprite-2.css’), {format:’ handlebars_based_template ‘}]]}, customTemplates: {‘ function_based_Template ‘: TemplateFunction, // Custom output What kind of CSS style}, ApiOptions: {CSSIMageRef:’ ios.png ‘}}]}

  3. After the address change, execute the command  
Wbpack


It has been satisfied with most requirements, and the input and output addresses can be changed as needed. You can set the CSS (Style-Components, Styl et al. You want to set, and then copy directly in your own project CSS file, very flexible.

I sometimes specify a picture of the picture under different files, how is it?

, for example, my demand is:

iOS

iMages

    • Ant
      iOS
    iMages
    Translation: There are several folders (IOS, ANT, IOS) under resources, and the corresponding pictures are placed below the image folder.
    • Need to pay attention toIt is support for Glob
    • SRC: {// Introduction Path CWD: Path.Resolve (__ DIRNAME, ‘SRC / IMAGES / IOS /’), GLOB: ‘* .png ‘// here to change},
  • Here you can refer to the settings here: http: //www.globtenster.com/
  • Change Glob to

@ (Wechat | Element | iOS) / Images / *. PNG

effect
   

I actually want to generate pictures under their respective folders and CSS under the respective folders. , How should I achieve it, I wrote a part, I haven’t worried, I feel the technical difficulties, I present the code, will continue to optimize

 Var path = Require ('Path') Var spritesmithplugin = Require ('WebPack-Spritesmith') Var Platforms = ['Android', 'Ant', 'Element', 'IOS', 'Wechat'] //, 'Windows'] / / VAR URL = 'ant'Env.target = process.env.targetconsole.log ({target}) module.exports = [target] .map (l => {console.log (l) const url = l const fn = DATA) =>{Console.log (URL) VAR Shared = 'Background-Size: Twpx THPX \ n' .replace ('TW', DATA.SPRITES [0] .total_width / 2) .Replace ('th', data.sprites [0 ]. Total_Height / 2) Var persprite = data.sprites.map (Function (sprite) {return `&. $ {url} -n {\ n width: wpx; \ n height: hpx; \ n background-position: xpx Ypx; \ n} \ n`replace ('n', sprite.name) .Replace ('w', sprite.width / 2) .replace ('h', sprite.Height / 2) .replace ('X ', sprite.offset_x / 2) .replace (' y ', sprite.offset_y / 2) .Replace (' TW ', Sprite.total_Width / 2) .Replace (' th ', sprite.total_height / 2)}). Join ('\ n') Return Shared + '\ n' + persprite} Return {Module: {Rules: [{Test: /\.Styl), Use: ['Style-Loader', 'CSS-Loader', 'Stylus-loader']}, {test: /\.png most /, us: ['file-loader? name = I / [hash]. [ext]']}]}, entry: {[URL]: path.join (__ DIRNAME , URL),}, Output: {path: path.join (__ dirname, '../parsed/', url), filename: '[name] .css'}, resolve: {modules: [' Node_Modules', ' Spritesmith-generated ']}, plugins: [new spritesmithplugin ({src: {cwd: path.resolve (__ DIRNAME,' Images / '+ URL +' / '), GLOB:' * .png '//' @ (Android | Ant | Element | IOS | WeChat | Windows / *. PNG '}, target: {image: path.resolve (__ dirname,' ../parsed/'+URL +'/'+URL +'.PNG '), CSS:[[path.resolve (__ DIRNAME, '../parsed/'+URL +'/'+URL +'.css'), {Format:' Function_Based_Template '}]}, CustomTemplates: {' fUnction_based_template ': fn}})]}}   The above is all the contents of this article, I hope that everyone's learning is helpful, and I hope that you will support Tumi Clouds. 
© Copyright Notice
THE END
Just support it if you like
like0
share
comment Grab the couch

Please log in to comment