webpack打包其他资源

转载请注明 来源:http://www.eword.name/
Author：eword
Email:eword@eword.name

webpack打包其他资源

其他资源：可以定位为“不需要做任务处理，只要直接打包输出就可以的资源”，比如icon图标资源、字体资源等

打包其他资源只需要使用到 file-loader

一、打包其他资源的核心配置

// webpack.config.js webpack的配置文件
// 路径： ./webpack.config.js
…………
	// loader的配置
    module: {
        rules: [
            ……
            // 由于引用了 css，这里还需要添加 css 打包配置，详见相关章节
            ……
            {
                //打包其他资源(除了css、js、html、less、jpg、png、gif)资源以外的资源)
                //排除css、js、html、less、jpg、png、gif资源
                exclude: /\.(css|js|html|less|jpg|png|gif)$/,
                loader: 'file-loader',
                options:
                {
                    // 给资源进行重命名
                    //[hash:10]取资源的hash的前10位
                    // [ext]取文件原来扩展名
                    name: '[hash:10].[ext]',
                    //设置输出目录，将打包的其他资源放到media 文件夹
                    outputPath: './media'
                }
            },
            
            ……
            
        ]
    },

二、自定义资源名称和路径

// 注意loader中以下的配置
        // 给资源进行重命名
        //[hash:10]取资源的hash的前10位
        // [ext]取文件原来扩展名
        name: '[hash:10].[ext]',
        //设置输出目录，将打包的其他资源放到media 文件夹
        outputPath: './media'

三、安装 loader

# 安装  file-loader 
> npm i  file-loader  -D

四、运行

> webpack