webpack笔记05 -- 打包其他资源
程序员文章站
2022-03-21 18:46:02
webpack 打包 其他 资源 (GitHub)1、下载npm i file-loader -D2、使用webpack.config.jsmodule.exports = { module: { rules: [{ test: /\.css$/, use: ['style-loader', 'css-loader'] }, { test: /\....
webpack 打包 其他 资源 (GitHub)
1、下载
npm i file-loader -D
2、使用
- webpack.config.js
module.exports = {
module: {
rules: [{
test: /\.css$/,
use: ['style-loader', 'css-loader']
}, {
test: /\.less$/,
use: ['style-loader', 'css-loader', 'less-loader'],
},
{
test: /\.(jpg|png|gif|jpeg)$/,
loader: 'url-loader',
options: {
limit: 8 * 1024,
},
},
{
test: /\.html$/,
// 处理html文件的img图片(负责引入img,从而能被url-loader进行处理)
loader: 'html-loader',
}, {
// 打包其他资源 (除了html、css、less、js资源以外的资源)
exclude: /\.(css|less|js|html)$/,
loader: 'file-loader'
},
]
},
}
GitHub源代码:https://github.com/GYQ-LQ/webpack-actual/tree/master/05-other_source
本文地址:https://blog.csdn.net/GYQ1547426970/article/details/107857511
下一篇: python集合使用范例的代码
推荐阅读
-
详谈vue+webpack解决css引用图片打包后找不到资源文件的问题
-
解决vue-cli webpack打包后加载资源的路径问题
-
【webpack脱坑指南】打包之后css中资源文件路径不正确
-
【SSM_SpringMVC】学习笔记05拦截器、静态资源放行、RESTFUL风格
-
webpack+vuecli打包生成资源相对引用路径与背景图片的正确引用
-
webpack4 打包静态资源
-
webpack vue 项目打包生成的文件,资源文件报404问题的修复方法(总结篇)
-
vue-cli与webpack处理静态资源的方法及webpack打包的坑
-
webpack这样打包图片资源,你会吗?webpack打包图片资源
-
webpack笔记05 -- 打包其他资源