webpack如何打包图片文件

罗健
  • 34

目录结构是这样的,dist里面的文件是打包过后的文件

图片描述

现在html,js,css都顺利打包,唯有src下的img不知道如何打包到dist/img下。

我希望的是在src/css/index.css下 写background:url(../img/head.jpg),通过打包后会在dist下自动生成img文件夹,里面放着打包过后的图片,并且路径引用全都是对的。我大概知道要用到url-loader,但是网上看了很多教程,我的问题并没有的到解决

webpack.config.js配置下

var path = require('path');
var  webpack = require('webpack');
var  HtmlWebpackPlugin = require('html-webpack-plugin');


var  ExtractTextPlugin = require("extract-text-webpack-plugin");   



module.exports={
        entry:{

        'app/dist/js/index':'./app/src/js/index.js'

        },

        module: {

            rules: [
                {
                test: /\.css$/,
                use: ExtractTextPlugin.extract({
                    fallback: "style-loader", 
                    use: "css-loader"
                })
                },
                //es6
                {
                    test:/\.js$/, //匹配.js文件
                    //排除也就是不转换node_modules下面的.js文件
                    exclude: /(node_modules|bower_components)/,
                //加载器  webpack2需要loader写完整 不能写babel 要写 bable-loader
                    use:[{loader:"babel-loader"}]
                }
            ]

        },

        output: {
            filename: '[name].[chunkHash:5].js',
        },
        plugins:[


            new HtmlWebpackPlugin({
                filename: './app/dist/index.html',
                chunks: ['app/dist/js/index'],
                template: './app/src/page/index.html',
            }),

            new ExtractTextPlugin({
                filename: (getPath)=>{
                    return getPath('[name].[contenthash:5].css').replace('js','css')
                }
            })


        ]

}
回复
阅读 2.1k
3 个回答

可使用html-loader依赖:

安装:npm i -D html-loader

添加配置使用:

module: {
  rules: [{
    test: /\.html$/,
    use: [ {
      loader: 'html-loader',
    }],
  }]
}

然后,就可以在html文件中正常使用src了

如果配置不太会,可以看下自写的一篇webpack简易教程

      {
        test: /\.jpg$/,
        use:[{loader:'url-loader?limit=1024&publicPath=dist/js/'}]
      }

首先安装url-loader。这个配置文件中url-loader后面的publicPath参数是打包后静态文件的路径前缀。你可以去看看这个文章 传送门

最终还是解决了,贴一下解决方案
先看一下目录
图片描述

我们的多页面项目会有很多模块,比如app和back,里面有对应的html,css,js,img(中规中矩)
之前的解决方案是在每个模块下生成dist文件,里面有对应打包好的html,css,js,打包不出img,
那么这是不对的,这时候如果在css里写图片的绝对路径时打包是会出错的,(background:url()这样的东西无法使用),也是因为这个原因在这里寻找答案,

图片描述

最后重新配置,在根目录生成build文件,里面包含自己的各个模块,

你知道吗?

宣传栏