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)


相关推荐

  • spark报错OutOfMemory「建议收藏」

    最近在使用spark进行分析的时候几千万的数据量感觉不多但是跑起来非常慢内存溢出OutOfMemory1.然后在有使用map的地方在map之前进行分区repartition2.join会有shuffle产生shuffle也会产生数据溢出3.map也可以换成 mapPartitions并且适当调整分区数200400 其他的还有很多我用的就这些然后任务可以跑出来。…

  • linux中setfacl命令,Linux 中的Setfacl命令

    linux中setfacl命令,Linux 中的Setfacl命令setfacl命令是用来在命令行里设置ACL(访问控制列表)。在命令行里,一系列的命令跟随以一系列的文件名。选项-b,–remove-all:删除所有扩展的acl规则,基本的acl规则(所有者,群组,其他)将被保留。-k,–remove-default:删除缺省的acl规则。如果没有缺省规则,将不提示。-n,–no-mask:不要重新计算有效权限。setfacl默认会重新计算ACLmask…

  • 阿里矢量图标_ui矢量图

    阿里矢量图标_ui矢量图阿里iconfunt官网对于图标的调用写的不够详细,许多初用者不会用,下面具体介绍下总结的两种方法:一、在线调用方式1、首先建立新浪微博账号,用微博号登录iconfunt官网;2、所需要图标加入

  • python 中 print函数的用法详解

    python 中 print函数的用法详解目录一、print()函数概述二、变量的输出三、数据的格式化输出3.1%字符3.2 最小字段宽度和精度3.3 转换标志3.4 格式字符归纳四、换行与防止

  • TOMCAT启动错误:严重: Error filterStart「建议收藏」

    TOMCAT启动错误:严重: Error filterStart「建议收藏」在tomcat启动的时候报严重:ErrorfilterStart这样的错误的原因有很多种,比如你在web.xml的配置语句写漏或写错或缺少某些jar包等等都有可能发生,子猴这里给出的不是针对某一具体错误如何解决,而是给出如何查找出错原因?我发现网上很多朋友都碰到过这样的错误信息而束手无策,往往花费很多时间,而归根结底是不知道如何得知错误是怎么产生的,因为tomcat(往往都是使用的tomca

  • java卸载不了_java卸载不了怎么处理?卸载时总出现这个

    java卸载不了_java卸载不了怎么处理?卸载时总出现这个windowsXP在安装有些软件时,会弹出警告框:“不能访问windowsInstaller服务,可能是你在安全模式下运行windows,或者windowsInstaller没有正确安装。请和你的支持人员联系以获得帮助。”的解决方案:windowsinstaller没有正确安装到服务里停掉windowsinstaller服务然后下载InstMsiW.exe右击msi.inf点击安装…

发表回复

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

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