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

[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文件引入图片

 <body>
    <div id="app"></div>
    <img src="./src/img/dm.jpg" alt="">
 </body>

二、style.css文件引入图片

 html,body{
     margin:;
     padding:;
 }
 body {
     background:url('../img/dm.jpg');
 }
 ul,li {
     list-style-type:none;
 }
 div {
     transition: all ease 1s;
 }

三、modal.ejs文件引入图片

 <div class="modal">
     <div>这个组件的名字是:<%= name %></div>
     <% for( var i = 0; i < arr.length; i++ ){ %>
         <%= arr[i]%>
     <% } %>
 </div>
 <img src="${ require('../img/dm.jpg') }" alt="">
 <img src="${ require('../img/dm.jpg') }" alt="">
 <img src="../img/dm.jpg" alt="">

注意：在模板中引入图片路径，如果是相对路径要这样引入${require(图片的相对路径)}，否则打包路径会出现问题

四、webpack.config.js配置file-loader

 var htmlWebpackPlugin = require('html-webpack-plugin');
 let path = require('path');
 module.exports = {
     entry: './src/main.js',
     output: {
         path: __dirname + '/dist',
         filename: 'js/[name].bundle.js',
     },
     plugins: [
         new htmlWebpackPlugin({
             filename: 'index.html',
             template: 'index.html',
             inject: true
         })
     ],
     module: {
         rules: [
             {
                 test: /\.js$/,
                 exclude: /(node_modules)/,
                 include: [
                     path.resolve(__dirname, "src"),
                 ],
                 use: {
                     loader: 'babel-loader',
                     options: {
                         presets: ['env']
                     }
                 }
             },
             {
                 test: /\.css$/,
                 exclude: /(node_modules)/,
                 use: [
                     'style-loader', {
                         loader : 'css-loader',
                         options : {
                             importLoaders : 1
                         },
                     },
                     'postcss-loader'
                 ]
             },
             {
                 test: /\.less$/,
                 use: [
                     {
                         loader: "style-loader"
                     }, {
                         loader: "css-loader"
                     }, {
                         loader: "less-loader"
                     }
                 ]
             },
             {
                 test: /\.(html)$/,
                 use: {
                     loader: 'html-loader',
                 }
             },
             {
                 test: /\.(ejs)$/,
                 use: {
                     loader: 'ejs-loader',
                 }
             },
             {
                 test: /\.(png|gif|jpg|svg|jpeg)$/i,
                 use: {
                     loader: 'file-loader',
                     query : {
                         name : 'assets/[hash].[ext]'
                     }
                 }
             }
         ]
     }
 }

query部分的配置，是为打包的图片设置一个自定义的存储路径和文件名称。执行webpack打包，就可以看到打包之后的效果了

还有一种处理图片的loader，叫url-loader，把会把图片通过base64编码直接插入img标签后面，用法跟其他的loader处理都差不多