转载请注明 来源: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