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

Posted ghostwu

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了[js高手之路]深入浅出webpack教程系列9-打包图片(file-loader)用法相关的知识，希望对你有一定的参考价值。

[js高手之路]深入浅出webpack教程系列索引目录：

我们还是接着上文继续，本文我们要讲的是图片资源的打包，图片在静态排版中，经常出现的两个位置是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)用法的主要内容，如果未能解决你的问题，请参考以下文章

[js高手之路]深入浅出webpack教程系列2-配置文件webpack.config.js详解

[js高手之路]深入浅出webpack教程系列5-插件使用之html-webpack-plugin配置(中)

[js高手之路]深入浅出webpack教程系列4-插件使用之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)用法