轉載請注明 來源: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