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

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

我们还是接着上文继续，本文我们要讲的是图片资源的打包，图片在静态排版中，经常出现的两个位置是css通过background引入背景，还有一种就是在html模板文件中用img标签引入的方式，如果要在webpack使用图片资源，我们需要用file-loader来处理.

安装file-loader: npm install file-loader --save-dev

在src目录下面新建一个文件夹( img ) 存储图片

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

一、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打包，就可以看到打包之后的效果了

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

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

秒客网

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

相关文章