没有配置文件的打包

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

案例

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

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

接着在src文件夹中创建4个文件,分别是info.jsmain.jsmathUtils.jsindex.html

infomathUtils是模块化的js文件,main是主入口,index是首页,整体项目结构如下



代码内容如下:

// 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会将打包的文件放到了我们指定的dist目录下



最后只需要在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(3)基础的打包过程的更多相关文章

  1. android基础-Apk打包过程(了解)

    此文来源于<Android软件安全与逆向分析> 一.打包资料文件,生成R.java文件. 二.处理aidl文件,生成相应的Java文件. 三.编译工程源代码,生成相应的class文件. 四 ...

  2. Webpack 2 视频教程 018 - 使用可视化图表进行统计分析打包过程

    原文发表于我的技术博客 这是我免费发布的高质量超清「Webpack 2 视频教程」. Webpack 作为目前前端开发必备的框架,Webpack 发布了 2.0 版本,此视频就是基于 2.0 的版本讲 ...

  3. webpack 打包过程及常用插件

    前言 要理解webpack 首先明白三个概念:module,chunk,bundles,即输入,中间态,输出. chunk: This webpack-specific term is uesd in ...

  4. webpack打包过程如何调试?

    本文适用于已经会使用webpack的前端开发人员,但是想进一步了解webpack细节和进阶. 首先请读者按照我前一篇文章 Webpack 10分钟入门介绍的步骤,在本地搭建一个webpack的hell ...

  5. webpack打包的基础原理-打包后的文件解读

    1.概念 本质上,webpack 基于node平台,利用 node 的各种api来实现 javascript 应用程序的一个静态模块的打包工具. 在打包过程中,构建依赖关系,并且实现模块引用预处理,以 ...

  6. Webpack安装配置及打包详细过程

    引言 前端经过漫长的发展,涌现出了很多实践方法来处理复杂的工作流程,让开发变得更加简便,其中,模块化可以使复杂的程序细化成为各个小的文件,而webpack并不强制你使用某种模块化方案,而是通过兼容所有 ...

  7. vue-cli脚手架中webpack配置基础文件详解

    一.前言 原文:https://segmentfault.com/a/1190000014804826 vue-cli是构建vue单页应用的脚手架,输入一串指定的命令行从而自动生成vue.js+wep ...

  8. vue-cli 脚手架中 webpack 配置基础文件详解

    一.前言 vue-cli是构建vue单页应用的脚手架,输入一串指定的命令行从而自动生成vue.js+wepack的项目模板.这其中webpack发挥了很大的作用,它使得我们的代码模块化,引入一些插件帮 ...

  9. 深入浅出 webpack 之基础配置篇

    前言 前端工程化经历过很多优秀的工具,例如 Grunt.Gulp.webpack.rollup 等等,每种工具都有自己适用的场景,而现今应用最为广泛的当属 webpack 打包了,因此学习好 webp ...

随机推荐

  1. k8s用 ConfigMap 管理配置(13)

    一.ConfigMap介绍 Secret 可以为 Pod 提供密码.Token.私钥等敏感数据:对于一些非敏感数据,比如应用的配置信息,则可以用 ConfigMap ConfigMap 的创建和使用方 ...

  2. 微信引流的方式 PC控制手机的方式

    http://www.yunjing100.cn/ 云鲸一百 小萝卜 http://www.xiaoluobei.com/

  3. 文件包含之包含了Linux文件描述符

    0x00 原理   文件描述符是内核为了高效管理已被打开的文件所创建的索引,用于指向被打开的文件,所有执行I/O操作的系统调用都通过文件描述符. 翻译成人话- 可以认为是指向文件的一个指针,如果有文件 ...

  4. SystemVerilog MCDF检测器

    Monitor:检测DUT的边界信号或者内部信号,并且经过打包整理传送给其他的验证平台的组件(例如checker). 一:大的monitor方案 二:分布式的 两个monitor的比较: 比较下来,选 ...

  5. SpringCloud Alibaba实战(2:电商系统业务分析)

    选用了很常见的电商业务来进行SpringCloud Alibaba的实战. 当然,因为仅仅是为了学习SpringCloud Alibaba,所以对业务进行了大幅度简化,这里只取一个精简版的用户下单业务 ...

  6. [论文阅读笔记] Adversarial Learning on Heterogeneous Information Networks

    [论文阅读笔记] Adversarial Learning on Heterogeneous Information Networks 本文结构 解决问题 主要贡献 算法原理 参考文献 (1) 解决问 ...

  7. GO语言复合类型04---映射

    package main import "fmt" /* 映射(map)是键值对(key-value)数据的集合 根据键key可以快速检索值value 键值的类型可以是任意的,ke ...

  8. ARMed解决方案对DSP的战争

    ARMed解决方案对DSP的战争 ARM体系结构简化了数字信号处理 ARM与数字信号处理(DSP)有什么关系? ARM似乎在处理领域处于领先地位.该处理器已将其视为其最大的细分市场之一,这主要是由于该 ...

  9. 使用BootstrapVue相关组件,构建Vue项目界面

    基于Vue的前端框架有很多,Element算一个,而BootstrapVue也可以非常不错的一个,毕竟Bootstrap也是CSS中的大佬级别的,它和Vue的整合,使得开发起来更加方便了.Bootst ...

  10. 用java实现一个ATM机系统(2.0版)

    用java实现一个ATM机系统(2.0版) java实现银行ATM自助取款机,实现功能:用户登录.余额查询.存钱.取钱.转账.修改密码.退出系统. 文章目录 用java实现一个ATM机系统(2.0版) ...