[js高手之路]深入淺出webpack教程系列9-打包圖片(file-loader)用法
阿新 • • 發佈：2017-09-12
圖片 css 文件 alt entry 處理 lan gin style
[js高手之路]深入淺出webpack教程系列索引目錄：
- [js高手之路]深入淺出webpack教程系列1-安裝與基本打包用法和命令參數
- [js高手之路]深入淺出webpack教程系列2-配置文件webpack.config.js詳解(上)
- [js高手之路]深入淺出webpack教程系列3-配置文件webpack.config.js詳解(下)
- [js高手之路]深入淺出webpack教程系列4-插件使用之html-webpack-plugin配置(上)
- [js高手之路]深入淺出webpack教程系列5-插件使用之html-webpack-plugin配置(中)
- [js高手之路]深入淺出webpack教程系列6-插件使用之html-webpack-plugin配置(下)
- [js高手之路]深入淺出webpack教程系列7-( babel-loader,css-loader,style-loader)的用法
- [js高手之路]深入淺出webpack教程系列8-(postcss-loader,autoprefixer,html-loader,less-loader,ejs-loader)用法
- [js高手之路]深入淺出webpack教程系列9-打包圖片(file-loader)用法
我們還是接著上文繼續，本文我們要講的是圖片資源的打包，圖片在靜態排版中，經常出現的兩個位置是css通過background引入背景，還有一種就是在html模板文件中用img標簽引入的方式，如果要在webpack使用圖片資源，我們需要用file-loader來處理.
安裝file-loader: npm install file-loader --save-dev
在src目錄下面新建一個文件夾( img ) 存儲圖片
一、demo3目錄下面的index.html文件引入圖片
1 <body> 2 <div id="app"></div> 3 <img src="./src/img/dm.jpg" alt=""> 4 </body>
二、style.css文件引入圖片
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; 10 } 11 div { 12 transition: all ease 1s; 13 }
三、modal.ejs文件引入圖片
1 <div class="modal"> 2 <div>這個組件的名字是:<%= name %></div> 3 <% for( var i = 0; i < arr.length; i++ ){ %> 4 <%= arr[i]%> 5 <% } %> 6 </div> 7 <img src="${ require(‘../img/dm.jpg‘) }" alt=""> 8 <img src="${ require(‘../img/dm.jpg‘) }" alt=""> 9 <img src="../img/dm.jpg" alt="">
註意：在模板中引入圖片路徑，如果是相對路徑要這樣引入${require(圖片的相對路徑)}，否則打包路徑會出現問題
四、webpack.config.js配置file-loader
1 var htmlWebpackPlugin = require(‘html-webpack-plugin‘); 2 let path = require(‘path‘); 3 module.exports = { 4 entry: ‘./src/main.js‘, 5 output: { 6 path: __dirname + ‘/dist‘, 7 filename: ‘js/[name].bundle.js‘, 8 }, 9 plugins: [ 10 new htmlWebpackPlugin({ 11 filename: ‘index.html‘, 12 template: ‘index.html‘, 13 inject: true 14 }) 15 ], 16 module: { 17 rules: [ 18 { 19 test: /\.js$/, 20 exclude: /(node_modules)/, 21 include: [ 22 path.resolve(__dirname, "src"), 23 ], 24 use: { 25 loader: ‘babel-loader‘, 26 options: { 27 presets: [‘env‘] 28 } 29 } 30 }, 31 { 32 test: /\.css$/, 33 exclude: /(node_modules)/, 34 use: [ 35 ‘style-loader‘, { 36 loader : ‘css-loader‘, 37 options : { 38 importLoaders : 1 39 }, 40 }, 41 ‘postcss-loader‘ 42 ] 43 }, 44 { 45 test: /\.less$/, 46 use: [ 47 { 48 loader: "style-loader" 49 }, { 50 loader: "css-loader" 51 }, { 52 loader: "less-loader" 53 } 54 ] 55 }, 56 { 57 test: /\.(html)$/, 58 use: { 59 loader: ‘html-loader‘, 60 } 61 }, 62 { 63 test: /\.(ejs)$/, 64 use: { 65 loader: ‘ejs-loader‘, 66 } 67 }, 68 { 69 test: /\.(png|gif|jpg|svg|jpeg)$/i, 70 use: { 71 loader: ‘file-loader‘, 72 query : { 73 name : ‘assets/[hash].[ext]‘ 74 } 75 } 76 } 77 ] 78 } 79 }
query部分的配置，是為打包的圖片設置一個自定義的存儲路徑和文件名稱。執行webpack打包，就可以看到打包之後的效果了
還有一種處理圖片的loader，叫url-loader，把會把圖片通過base64編碼直接插入img標簽後面，用法跟其他的loader處理都差不多
[js高手之路]深入淺出webpack教程系列9-打包圖片(file-loader)用法