webpack 打包图片资源

/**

 * loader: 1. 下载 2. 使用（配置）

 * plugins：1. 下载 2. 引入 3.使用

 */

// 用来拼接绝对路径的方法

const {resolve} = require('path')

const HtmlWebpackPlugin = require('html-webpack-plugin')

module.exports = {

    // webpack 配置

    // 入口起点

    entry : './src/index.js',

    // 输出

    output : {

        // 输出文件名

        filename : 'built.js',

        // 输出路径

        path : resolve(__dirname, 'dist')

    },

    // loader 配置

    module : {

        rules : [

            // 详细 loader 配置

            {

                // 问题：默认处理不了 html 中 img 图片

                // 处理图片资源

                test : /\.(jpg | png | gif)$/,

                // 使用一个 loader， 可以不要use数组，可以直接指定

                // 除了要下载 url-loader 还要下载 file-loader

                loader : 'url-loader',

                options : {

                    // 图片大小小于 8kb ， 就会被base64 处理

                    // 优点：减少请求数量（减轻服务器压力）

                    // 缺点：图片体积会更大（文件请求速度更慢）

                    limit : 8 * 1024,

                    // 问题：因为url-loader 默认使用es6模块化解析，而html-loader引入图片是commonjs

                    // 解析是会出现问题：[object Module]

                    // 解决：关闭 url-loader 的es6模块化，使用commonjs解析

                    esModule : false,

                    // 给图片进行重命名

                    // [hash:10]取图片的hash的前10位

                    // [ext] 取文件原来拓展名

                    name : '[hash:10].[ext]'

                }

            },

            {

                test : /\.html$/,

                // 处理 html 文件的img图片（负责引入img，从而能被url-loader进行处理）

                loader : 'html-loader'

            }

        ]

    },

    // plugins 的配置

    plugins : [

        // 详细 plugins 的配置

        // html-webpack-plugin

        // 功能：默认会创建一个空的html文件，自动引入打包输出的所有资源（js/css）

        new HtmlWebpackPlugin({

            // 增加一个配置

            // 复制 './src/index.html' 文件，并自动引入打包输出的所有资源（js/css）

            template : './src/index.html'

        })

    ],

    //模式

    mode : 'development', // 生产模式

    // mode : 'production' // 开发模式

}
巴特西

webpack 打包图片资源

webpack 打包图片资源

最新文章

热门文章
