[js高手之路]深入浅出webpack教程系列索引目录:[js高手之路]深入浅出webpack教程系列1-安装与基本打包用法和命令参数[js高手之路]深入浅出webpack教程系列2-配置文件webpack.config.js详解(上)[js高手之路]深入浅出webpack教程系 ...
[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='/images/loading.gif' data-original="./src/img/dm.jpg" >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='/images/loading.gif' data-original="${ require('../img/dm.jpg') }" >8 <img src='/images/loading.gif' data-original="${ require('../img/dm.jpg') }" >9 <img src='/images/loading.gif' data-original="../img/dm.jpg" >
注意:在模板中引入图片路径,如果是相对路径要这样引入${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: true14 })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 : 139 },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
关键词:JS
*特别声明:以上内容来自于网络收集,著作权属原作者所有,如有侵权,请联系我们:
admin#shaoqun.com
(#换成@)。