webpack基础打包命令_webpack打包原理

webpack基础打包命令_webpack打包原理没有配置文件的打包如果我们没有使用配置文件webpack.config.js,那么我们就需要通过命令来打包案例我们首先创建一个webpackTest文件夹,然后在文件夹中再创建2个子文件夹dis

大家好,又见面了,我是你们的朋友全栈君。如果您正在找激活码,请点击查看最新教程,关注关注公众号 “全栈程序员社区” 获取激活教程,可能之前旧版本教程已经失效.最新Idea2022.1教程亲测有效,一键激活。

Jetbrains全系列IDE使用 1年只要46元 售后保障 童叟无欺

没有配置文件的打包

如果我们没有使用配置文件webpack.config.js,那么我们就需要通过命令来打包
 

案例

我们首先创建一个webpackTest文件夹,然后在文件夹中再创建2个子文件夹distsrc

  • dist:打包后的文件夹
  • src:源代码文件夹

接着在src文件夹中创建4个文件,分别是info.jsmain.jsmathUtils.jsindex.html
infomathUtils是模块化的js文件,main是主入口,index是首页,整体项目结构如下
webpack基础打包命令_webpack打包原理
代码内容如下:

// info.js
const height = 180;
const weight = 180

export {height, weight}
// mathUtils.js
function add(num1, num2) {
  return num1 + num2
}

function mul(num1, num2) {
  return num1 * num2
}

module.exports = {
  add, mul
}
//main.js
// 1.CommonJS模块化
const {add, mul} = require('./mathUtils')

console.log(add(20, 30))
console.log(mul(50, 80))


// 2.es6模块化
import {height, weight} from "./info";

console.log(height)
console.log(weight)

最后我们来到webpackTest目录下,输入以下命令:

webpack ./src/main.js -o ./dist/bundle.js --mode development
  • ./src/main.js:需要打包的文件路径
  • ./dist/bundle.js:需要打包到哪个文件夹下
  • --mode development:打包的模式是开发者环境

结果如下
webpack基础打包命令_webpack打包原理
我们会发现webpack会将打包的文件放到了我们指定的dist目录下
webpack基础打包命令_webpack打包原理
最后只需要在index.html中引入打包后的main.js即可

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
</head>
<body>
<script src="./dist/bundle.js/main.js"></script>
</body>
</html>

我们访问index首页,查看控制台,就能看到我们源代码main.js中写的打印日志了
webpack基础打包命令_webpack打包原理
说明使用webpack打包成功了

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。

发布者:全栈程序员-用户IM,转载请注明出处:https://javaforall.cn/165733.html原文链接:https://javaforall.cn

【正版授权,激活自己账号】: Jetbrains全家桶Ide使用,1年售后保障,每天仅需1毛

【官方授权 正版激活】: 官方授权 正版激活 支持Jetbrains家族下所有IDE 使用个人JB账号...

(0)
blank

相关推荐

  • H3C交换机常用命令汇总

    H3C交换机常用命令汇总H3C交换机常用命令1.查看Linux下查看端口状态 root@root:~# netstat -an|grep -E “6002|6003″2.H3C交换机显示当前配置 [H3C]display current-configuration3.H3C交换机显示arp信息 [H3C]dis arp4.H3C交换机显示mac列表信息 [H3C]dis mac-address5.H3C交换机显示端口信息

  • 机器学习——决策树模型:Python实现

    机器学习——决策树模型:Python实现机器学习——决策树模型:Python实现欢迎使用Markdown编辑器新的改变功能快捷键合理的创建标题,有助于目录的生成如何改变文本的样式插入链接与图片如何插入一段漂亮的代码片生成一个适合你的列表创建一个表格设定内容居中、居左、居右SmartyPants创建一个自定义列表如何创建一个注脚注释也是必不可少的KaTeX数学公式新的甘特图功能,丰富你的文章UML图表FLowchart流程图导出与导入导出导入欢迎使用Markdown编辑器你好!这是你第一次使用Markdown编辑器所展示的欢迎页。如果你

    2022年10月19日
  • idea 2021 3 激活码【在线破解激活】

    idea 2021 3 激活码【在线破解激活】,https://javaforall.cn/100143.html。详细ieda激活码不妨到全栈程序员必看教程网一起来了解一下吧!

  • journalctl工具基础介绍

    journalctl工具基础介绍journalctl工具是CentOS-7才有的工具Systemd统一管理所有Unit的启动日志。带来的好处就是,可以只用journalctl一个命令,查看所有日志(内核日志和应用日志)。日志的配置文件/etc/systemd/journald.confjournalctl用法查看所有日志(默认情况下,只保存本次启动的日志)journalctl查看内核日志(不显示应用日志)journalctl-k查看系统本次启动的日志

  • 笛卡尔心形函数表达式_笛卡尔心形曲线[通俗易懂]

    笛卡尔心形函数表达式_笛卡尔心形曲线[通俗易懂]1650年,斯德哥尔摩的街头,52岁的笛卡尔邂逅了18岁的瑞典公主克里斯汀。那时,落魄、一文不名的笛卡尔过着乞讨的生活,全部的财产只有身上穿的破破烂烂的衣服和随身所带的几本数学书籍。生性清高的笛卡尔从来不开口请求路人施舍,他只是默默地低头在纸上写写画画,潜心于他的数学世界。一个宁静的午后,笛卡尔照例坐在街头,沐浴在阳光中研究数学问题。他如此沉溺于数学世界,身边过往的人群,喧闹的车马队伍。都无法对他…

    2022年10月17日
  • kfold_机器学习gridsearchcv(网格搜索)和kfold validation(k折验证)

    kfold_机器学习gridsearchcv(网格搜索)和kfold validation(k折验证)网格搜索算法是一种通过遍历给定的参数组合来优化模型表现的方法。以决策树为例,当我们确定了要使用决策树算法的时候,为了能够更好地拟合和预测,我们需要调整它的参数。在决策树算法中,我们通常选择的参数是决策树的最大深度。于是我们会给出一系列的最大深度的值,比如{‘max_depth’:[1,2,3,4,5]},我们会尽可能包含最优最大深度。不过,我们如何知道哪一个最大深度的模型是最好的呢?我们需要一…

发表回复

您的电子邮箱地址不会被公开。

关注全栈程序员社区公众号