没有配置文件的打包

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

案例

我们首先创建一个webpackTest文件夹，然后在文件夹中再创建2个子文件夹dist和src

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

接着在src文件夹中创建4个文件，分别是info.js、main.js、mathUtils.js、index.html

info和mathUtils是模块化的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. 分布式存储ceph---ceph添加/删除osd（5）

    一.添加osd 当前ceph集群中有如下osd,现在准备新添加osd: 1.选择一个osd节点,添加好新的硬盘: 2.显示osd节点中的硬盘,并重置新的osd硬盘: 列出节点磁盘:ceph-deplo ...

  2. kvm虚拟化安装与部署（2）

    一.虚拟化VT开启确认 KVM 本身也有一些弱点,那就是相比裸金属虚拟化架构的 Xen . VMware ESX 和 HyperV , KVM 是运行在 Linux 内核之上的寄居式虚拟化架构,会消耗 ...

  3. C++的构造函数为何不能为虚函数

    1. 存储空间角度:虚函数对应一个vtable,vtable存储于对象的内存空间 若构造函数是虚的,则需要通过 vtable来调用,若对象还未实例化,即内存空间还没有,无法找到vtable 2. 使用 ...

  4. Archlinux+win10双系统扩容Boot/ESP分区

    环境 系统:Archlinux + Windowns10 双系统 软件:MiniTool Partition Wizard 免费版 + Diskgenius 免费版 分区:原ESP分区100M 原恢复 ...

  5. 4. springmvc底层原理2

    Spring mvc 是子容器 Spring 是 父容器 =================================================================== pub ...

  6. 【MybatisPlus】数据库的datetime类型字段为空的时候，报错空指针？

    一.发现经历 事情是这样的,我今天本来要演示系统,就去前端同学的页面上点一点.不小心点到了其他同事编写的服务,然后界面就报错了.这给我吓得,这还能演示吗这.然后,我就去服务器查看了一下日志,发现了如下 ...

  7. SSM框架的配置整合(包含配置文件代码)

    由于SSM框架学习都要去网上或者以前的项目拷贝相同的代码,所以我在此把自己用到的配置文件全放在这里,帮助自己,帮助别人 首先开始前导入依赖和处理静态资源导出问题 <dependencies> ...

  8. SLAM的通用框架：GSLAM

    SLAM的通用框架:GSLAM GSLAM: A General SLAM Framework and Benchmark 论文链接: http://openaccess.thecvf.com/con ...

  9. Java Object类中toString方法的重写

    Object类中的tostring方法的: 当我们输出一个对象时,实际是输出的是这个类中的tostring方法,是一个地址值,而不是类中的属性. 1 一:子类没有重写Object类中的toStrinn ...

  10. 【C++】共用体\联合体（union）

    共用体的用法与结构体差不多,只不过将关键字由struct变成了union.共用体使不同的类型变量存放到同一段内存单元中,所以共用体在同一时刻只能存储一个数据成员的值,共用体的大小等于最大成员的大小(结 ...