[js高手之路]深刻淺出webpack教程系列9-打包圖片(file-loader)用法

時間 2019-11-09

標籤高手之路深刻 webpack 教程系列打包圖片 file loader 用法欄目 JavaScript 简体版

原文原文鏈接

[js高手之路]深刻淺出webpack教程系列索引目錄：css

咱們仍是接着上文繼續，本文咱們要講的是圖片資源的打包，圖片在靜態排版中，常常出現的兩個位置是css經過background引入背景，還有一種就是在html模板文件中用img標籤引入的方式，若是要在webpack使用圖片資源，咱們須要用file-loader來處理.html

安裝file-loader: npm install file-loader --save-devnode

在src目錄下面新建一個文件夾( img ) 存儲圖片webpack

1、demo3目錄下面的index.html文件引入圖片web

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

2、style.css文件引入圖片npm

 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 }

3、modal.ejs文件引入圖片babel

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(圖片的相對路徑)}，不然打包路徑會出現問題app

4、webpack.config.js配置file-loaderless

 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 }