/*
* @Author: HuangBingQuan bingquan111@qq.com
* @Date: 2022-11-25 17:42:05
* @LastEditors: HuangBingQuan bingquan111@qq.com
* @LastEditTime: 2022-11-26 17:05:29
* @FilePath: /webpack/02-setup-app/webpack.config.js
* @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
*/
const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin') // 自动生成html和引用js文件
module.exports = {
// 打包的入口
entry: './src/index.js',
output: {
// 输出文件的名字
filename: 'bundle.js',
// 输出的位置(绝对路径)
path: path.resolve(__dirname, './dist'),
clean: true, // 每次打包后清理dist文件夹
assetModuleFilename: 'images/[contenthash][ext]' // 打包图片资源后存放的位置
},
mode: 'development', // mode 模式 变为开发模式
devtool: 'inline-source-map', // 精准定位代码的行数
plugins: [ // 插件
new HtmlWebpackPlugin({ // 自动化生成html并自动引入打包后的js
// template: path.resolve(__dirname, './src/index.html'),
template: './index.html', // 文件路径
filename: 'app.html', // 输出的文件
inject: 'body' // 自动生成的script标签 在什么位置
})
],
devServer: { // 装完webpack-dev-server后配置devServer检测文件的变化 从而重新编译
static: './dist', // 创建服务指向./dist文件夹
open: true
},
// 配置文件资源
module: {
rules: [
{
test: /\.png$/,
type: 'asset/resource', // 可以生成一个单独的文件并导出url url是一个资源路径
generator: {
filename: 'images/[contenthash][ext]' // contenthash 生成一个随机hash作为资源文件名 ext 扩展名
}
},
{
test: /\.svg$/,
type: 'asset/inline', // 可以导出一个资源的dataUrl 例如把.svg转成base64位的字符串
},
{
test: /\.txt$/,
type: 'asset/source', // 可以导出资源的源代码
},
{
test: /\.jpg$/,
type: 'asset', // 通用类型 自动选择
parser: {
dataUrlCondition: {
maxSize: 4 * 1024 * 1024 // 当图片大小大于4MB则生成一个资源文件否则生成base64
}
}
}
]
}
}
原文地址:http://www.cnblogs.com/bingquan1/p/16927770.html
1. 本站所有资源来源于用户上传和网络,如有侵权请邮件联系站长!
2. 分享目的仅供大家学习和交流,请务用于商业用途!
3. 如果你也有好源码或者教程,可以到用户中心发布,分享有积分奖励和额外收入!
4. 本站提供的源码、模板、插件等等其他资源,都不包含技术服务请大家谅解!
5. 如有链接无法下载、失效或广告,请联系管理员处理!
6. 本站资源售价只是赞助,收取费用仅维持本站的日常运营所需!
7. 如遇到加密压缩包,默认解压密码为"gltf",如遇到无法解压的请联系管理员!
8. 因为资源和程序源码均为可复制品,所以不支持任何理由的退款兑现,请斟酌后支付下载
声明:如果标题没有注明"已测试"或者"测试可用"等字样的资源源码均未经过站长测试.特别注意没有标注的源码不保证任何可用性