[js高手之路]深入浅出webpack教程系列索引目录:
我们还是接着上文继续,本文我们要讲的是图片资源的打包,图片在静态排版中,经常出现的两个位置是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: 0;
- padding: 0;
- }
- 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处理都差不多
来源: http://www.cnblogs.com/ghostwu/p/7508938.html