当前位置: 首页 > news >正文

添加webpack.config.js配置

webpack 命令默认会去根目录查找webpack.config.js配置文件,如果没有,则会使用webpack默认的零配置打包规则进行打包,默认的零配置打包规则主要包括下面这几点:

1. 默认入口文件:Webpack 默认会将 ./src/index.js 作为入口文件进行打包。

2. 默认输出文件:Webpack 默认会将打包后的文件输出到 ./dist/main.js。

3. 默认加载器:Webpack 默认只能处理 JavaScript 和 JSON 文件,对于其他类型的文件(如 CSS、图片等),需要使用对应的加载器(loader)进行处理。

4. 默认插件:Webpack 默认没有启用任何插件,如果需要使用插件(如进行代码压缩、生成 source map 等),需要手动配置。

5. 默认模式:Webpack 默认的模式是 production,在这种模式下,Webpack 会自动进行代码压缩和优化。如果需要在开发环境下使用 Webpack,可以将模式设置为 development。

所以,在前面的博客中,我们初始化了一个空的项目,当执行webpack打包时,需要先手动在src目录下创建一个index.js文件,这样在执行npm run build后,在dist的目录下生成了一个main.js文件,这个也验证了上面零配置打包规则的第1点和第2点。

在根目录下,新建webpack.config.js文件,编辑如下内容:

const path = require('path');module.exports = {entry: './src/index.js',output: {path: path.resolve(__dirname, 'dist'),filename: 'bundle.js'}
}

上述配置,指定了入口文件,同时指定了dist文件夹下输出的文件名为bundle.js,执行npm run build,会看到在dist文件下多了一个bundle.js文件

因为我们之前在没有新增webpack.config.js文件之前,执行过npm run build,所以dist目录下也存在之前按照零配置规则生成的main.js文件,我们需要在webpack每次打包前,都清空下dist,再生成打包后的文件,只需要在output的配置中新增一行clean: true即可

const path = require('path');module.exports = {entry: './src/index.js',output: {path: path.resolve(__dirname, 'dist'),filename: 'bundle.js',clean: true,}
}

相关文章:

  • 三分钟学会视频号卖货,真的太简单了!
  • webgl three 模型操作
  • 【C++】特殊类设计 | 单例设计模式
  • 一、QGroundControl地面站使用介绍
  • 【python】使用函数名而不加括号是什么情况?
  • LeetCode刷题之HOT100之比特位计数
  • PHP在线制作表白网源码
  • 电脑usb数据线共享网络给手机
  • 必应崩了?
  • 高校网络安全管理运维赛WP
  • Springboot+Vue项目-基于Java+MySQL的游戏交易系统(附源码+演示视频+LW)
  • JVM(7):虚拟机性能分析和故障解决工具之jstat工具
  • 五步定位性能瓶颈
  • 第13章 Python建模库介绍
  • 提权方式及原理汇总
  • (十五)java多线程之并发集合ArrayBlockingQueue
  • 2017届校招提前批面试回顾
  • express如何解决request entity too large问题
  • Fastjson的基本使用方法大全
  • JS 面试题总结
  • Rancher-k8s加速安装文档
  • Spring Cloud Alibaba迁移指南(一):一行代码从 Hystrix 迁移到 Sentinel
  • Vue UI框架库开发介绍
  • 开源中国专访:Chameleon原理首发,其它跨多端统一框架都是假的?
  • 猫头鹰的深夜翻译:Java 2D Graphics, 简单的仿射变换
  • 前端代码风格自动化系列(二)之Commitlint
  • 使用Maven插件构建SpringBoot项目,生成Docker镜像push到DockerHub上
  • 双管齐下,VMware的容器新战略
  • 腾讯优测优分享 | 你是否体验过Android手机插入耳机后仍外放的尴尬?
  • 在Docker Swarm上部署Apache Storm:第1部分
  • 怎么把视频里的音乐提取出来
  • 从如何停掉 Promise 链说起
  • 关于Kubernetes Dashboard漏洞CVE-2018-18264的修复公告
  • 哈罗单车融资几十亿元,蚂蚁金服与春华资本加持 ...
  • ​MySQL主从复制一致性检测
  • #宝哥教你#查看jquery绑定的事件函数
  • #每天一道面试题# 什么是MySQL的回表查询
  • (java版)排序算法----【冒泡,选择,插入,希尔,快速排序,归并排序,基数排序】超详细~~
  • (附源码)ssm航空客运订票系统 毕业设计 141612
  • (附源码)ssm教师工作量核算统计系统 毕业设计 162307
  • (教学思路 C#之类三)方法参数类型(ref、out、parmas)
  • (免费领源码)python#django#mysql校园校园宿舍管理系统84831-计算机毕业设计项目选题推荐
  • (原創) 人會胖會瘦,都是自我要求的結果 (日記)
  • (转载)hibernate缓存
  • .bat批处理(五):遍历指定目录下资源文件并更新
  • .mysql secret在哪_MYSQL基本操作(上)
  • .net 4.0发布后不能正常显示图片问题
  • .NET 材料检测系统崩溃分析
  • .NET(C#) Internals: as a developer, .net framework in my eyes
  • .net利用SQLBulkCopy进行数据库之间的大批量数据传递
  • .net流程开发平台的一些难点(1)
  • .NET使用HttpClient以multipart/form-data形式post上传文件及其相关参数
  • .NET中的Exception处理(C#)
  • ??eclipse的安装配置问题!??
  • @LoadBalanced 和 @RefreshScope 同时使用,负载均衡失效分析