webapck4图片引入打包

webapck4打包图片

在webpack中loader通常会被用来打包一些webpack不能识别的非js文件，像图片这样的文件就需要借助一些特定的loader来实现打包上线运行，对于打包图片这样的文件

其中涉及到的loader：

• url-loader
• file-loader

loader	作用	是否发送http请求	适用的图片
url-loader	url-loader 会将引入的图片以 base64编码并打包到文件中，最终只需要引入这个dataURL就能访问图片了。当然，如果图片较大，编码会消耗性能。因此 url-loader 提供了一个 limit参数，小于 limit字节的文件会被转为 base64，大于 limit的会使用file-loader 的参数进行命名，并把图片 copy到指定文件夹内。	否	1. 如果页面图片较多，发很多 http请求，会降低页面性能。这个问题可以通过 url-loader 解决。2. 小于2mb(图片太大转化base64时候要丢信息)
file-loader	直接打包成相应的图片文件，比如：xxxx.png	是	1.一个图片好几次或大量使用时。2.图片太大

注意：由于url-loader 是file-loader的升级版，所以，file-loader内的option 在url-loader中均能使用。

配置步骤：

1. 单纯使用url-loader

// webpack.config.dev.js 
{
     test:/\.(png|jpg|gif)$/,
     use: [
         {
            loader:  "url-loader",
         }
     ]
 }

打包出来就是一串base64字符串

页面效果

2. 添加url-loader的limit

// webpack.config.dev.js 
{
     test:/\.(png|jpg|gif)$/,
         use: [
             {
                 loader:  "url-loader",
                 options: {
                     // 超过2048字节走file-loader（解决图片路径问题看步骤3）
                     // 没超过`limit`同步骤1效果
                     limit: 2048
                 }
             }
         ]
 }

当图片大小在limit范围之内时，打包结果和页面效果同步骤1
当图片大小超出limit时候页面效果：页面的背景图加载失败，原因是url不正确导致的

3. 由于css文件里面使用了background-image:url()属性，css文件又是单独抽离的，所以这里需要给css文件配置一个publicPath：'../'

 rules:[
     {
         test:/\.css$/,
         use: [
             {
                 loader: MiniCssExtractPlugin.loader,
                 // 添加的publicPath
                 options: {
                     publicPath: '../'
                 }
             },
             'css-loader',
             'postcss-loader',
             'less-loader'
         ]
     },
     {
         test:/\.(png|jpg|gif)$/,
         use: [
             {
                 loader:  "url-loader",
                 options: {
                     // 如果大于或等于2048Byte，则按照相应的文件名和路径打包图片.
                     // 如果小于2048Byte，则将图片转成base64格式的字符串。
                     limit: 2048,
                     name:'[name]_[hash:8].[ext]',
                     outputPath:'image'
                 }
             }
         ]
     },
 ]

配置完成后，页面效果

总的配置：

const path = require('path');
const HtmlWebpackPlugin  = require('html-webpack-plugin');
const { CleanWebpackPlugin } = require('clean-webpack-plugin');
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
const OptimizeCssAssetsPlugin = require('optimize-css-assets-webpack-plugin');
const TerserJSPlugin = require('terser-webpack-plugin');
const Webpackbar = require('webpackbar');
module.exports = {
    mode: 'development',
    entry: {
        main: './src/index.js'
    },
    output: {
        filename: '[name]_[hash:8].js',
        path: path.resolve(__dirname,'../build'),
        publicPath: './'
    },
    plugins:[
        new HtmlWebpackPlugin({
            filename: 'index.html',
            template: './src/index.html'
        }),
        new CleanWebpackPlugin(),
        new Webpackbar({color: 'purple'}),
        new MiniCssExtractPlugin({
            filename: "css/[name]_[hash:8].css",
            chunkFilename: "[id].css"
        }),
        new OptimizeCssAssetsPlugin(),
        new TerserJSPlugin(),
    ],
    module: {
        rules:[
            {
                test:/\.css$/,
                use: [
                    {
                        loader: MiniCssExtractPlugin.loader,
                        // 添加的publicPath
                         options: {
                             publicPath: '../'
                         }
                    },
                    'css-loader',
                    'postcss-loader',
                    'less-loader'
                ]
            },
            {
                 test:/\.(png|jpg|gif)$/,
                 use: [
                     {
                         loader:  "url-loader",
                         options: {
                              //如果大于或等于2048Byte，则按照相应的文件名和路径打包图片；如果小于2048Byte，则将图片转成base64格式的字符串。
                             limit: 2048,
                             name:'[name]_[hash:8].[ext]',
                             outputPath:'image'
                         }
                     }
                 ]
             },
        ]
    }
}

总结：打包图片运行不能正常显示一般都是路径问题，这个时候需要仔细检查配置的publicPath，以及一些图片输出文件所在路径