- Pulled out of the picture file package to the specified path
- Compress Pictures pulled out of resources
- Configured to generate image path in html
First, prepare the test environment
// workspace src // folder index.js // entry file index.css // style file index.html // structure file Image // Pictures folder package.json // configuration package environmental information webpack.config. JS // packaged profiles
First of all need to prepare packaged plug-ins (here is not packed files used to process image files):
1 "Clean-WebPACK-plugin": "^ 3.0.0", // clear the build folder 2 "css-Loader": "^ 3.0.0", // used to load the css file 3 "HTML-WebPACK-plugin ":" ^ 3.2.0 ", // used pulled html file . 4 " style-Loader ":" ^ 0.23.1 ", // used to convert between rows css style pattern . 5 " WebPACK ":" ^ 4.35 .2 ", // strapping tool . 6 " WebPACK-CLI ":" ^ 3.3.5 " // packed instruction set of tools
Through the above comments, you can see the above configuration can not be packaged with pictures resources, so the above test package plug-in configuration and not to appear in the reference style pictures css path in case of success, the image path in the html introduced in extract html file path will not have time for processing, after packaging (path inconsistent packaging) may not find the pictures.
1 var path = require('path'); 2 var {CleanWebpackPlugin} = require('clean-webpack-plugin'); 3 var HtmlWebpackPlugin = require('html-webpack-plugin'); 4 module.exports = { 5 entry:{ 6 index:'./src/index.js' 7 }, 8 output:{ 9 path:path.resolve(__dirname,'dist'), 10 filename:'[name][hash:5].bundle.js' 11 }, 12 module:{ 13 rules:[ 14 { 15 test:/\.css$/, 16 use:[ 17 {loader:'style-loader'}, 18 {loader:'css-loader'} 19 ] 20 } 21 ] 22 }, 23 plugins:[ 24 new CleanWebpackPlugin(), 25 new HtmlWebpackPlugin({ 26 template:'./src/index.html' 27 }) 28 ], 29 mode:'development' 30 }
The case of the above test environment packed unmistakable officially entered webpack extract picture file operations.
Second, pulled out a picture file package to the specified path
In the package configuration on the basis of the above-prepared to add two loader plug-ins:
npm install url-loader --save-dev
npm install file-loader --save-dev
Then, this step can add pictures to a path css code, add the following config.js this configuration file:
. 1 Module1: { 2 the rules: [ . 3 { . 4 Test:. / \ (PNG | JPG | JPEG | GIF) $ / , . 5 use: [ . 6 { . 7 Loader: 'URL-Loader' , . 8 Options: { . 9 name: '[name] [the hash:. 5] [EXT].', // set the name pulled packed images - [ext] is used to obtain images of the suffix 10 limit: 100000, // image sizes <= 100kb be base64 encoding (js less than 100kb packaged into files) - when tested in accordance with the size of the image is adjusted . 11 OutputPath: 'image' // set the output folder name, folder and the file in the same main entrance path 12 } 13 } 14 ] 15 } 16 ] 17 }
This configuration can also be configured in the picture pulled css files, but also just pulled out, not the picture compression process, then see how to configure the compressed image file.
Third, pulled out of the compressed image resources
Continuing with the previous steps, download and install the required picture compression loader:
npm install img-loader --save-dev npm install imagemin-loader --save-dev npm install imagemin-pngquant --save-dev
It was then added image resources (regular suffix matching images) of the loader module to load the related view of the compression and plug, in order to better show the code structure of the code and the sample code section will overlap the previous step:
. 1 Module1: { 2 the rules: [ . 3 { . 4 Test:. / \ CSS $ / , . 5 use: [ . 6 {Loader: 'style-Loader' }, . 7 {Loader: 'CSS-Loader' } . 8 ] . 9 }, 10 { . 11 Test:. / \ (PNG | JPG | JPEG | GIF) $ / , 12 is use: [ 13 is { 14 Loader: 'URL-Loader', // to picture resources path loader for the file pulled 15 Options: { 16 name: '[name] [the hash:. 5] [EXT].', // Set the name of the packaged image detached - [ext] suffix used to acquire images . 17 limit: 100000, // restricted image when tested according to the adjustment of image size - size <= 100kb base64-encoded (js packaged into files under 100kb) 18 is 'image': OutputPath // will be provided at the main entry file output folder name, folder path in the same . 19 } 20 is }, 21 is { 22 is Loader: 'IMG-Loader', // images for the resource loader for compressing image 23 is Options: { 24 plugins: [ //Resource loading configuration to an image widget 25 the require ( 'imagemin-pngquant') ({ // for image compression imagemin-pngquant, there is an implicit call-Loader loader imagemin 26 is Quality: [0.3, 0.5] // image compression 30% 50% 27 }) 28 ] 29 } 30 } 31 ] 32 } 33 ] 34 }
Finally, leaving the html file no reference picture processing.
Fourth, configured to generate image path in html
By configuring the loader html file, and then configure the application image tag and attribute names, html resource pictures will be added to the application loader for processing (including compression and pulled out the picture above), first download resolve loader html file:
npm install html-loader --save-dev
config configuration (following configurations):
. 1 Module1: { 2 the rules: [ . 3 { . 4 Test:. / \ HTML $ / , . 5 use: [ . 6 { . 7 Loader: 'HTML-Loader' , . 8 Options: { . 9 attrs: [ 'IMG: the src'] / / configuration file src attribute value img html tag 10 } 11 } 12 ] 13 is 14 } 15 ] 16 }
Finally, it should be noted that the configuration for each picture compression formats are not the same, that there are different compression plug-in, plug-npm detailed reference manual: https://www.npmjs.com/package/img-loader
