没有配置文件的打包

如果我们没有使用配置文件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. IPMITool和其中常用的命令

    IPMITool和其中常用的命令 # ipmitool -I lanplus -H 10.1.83.14-U ##### -P ##### chassis power status # ipmitoo ...

  2. linux patch中的p0和p1的区别

    命令patch的主要作用是生成diff文件和应用diff文件.举个例子来讲,当发现某个程序出现bug需要打补丁时,patch便是一个好工具. diff文件头: [root@localhost kern ...

  3. ceph总结复习

    一.ceph概念 Ceph是一种为优秀的性能.可靠性和可扩展性而设计的统一的.分布式文件系统.ceph 的统一体现在可以提供文件系统.块存储和对象存储,分布式体现在可以动态扩展. 什么是块存储/对象存 ...

  4. SpringMVC MVC 架构模式

    MVC 架构模式 MVC(Model.View 和 Controller)是一种架构模式,它是按照职责划分的思想将系统操作分为三个模块进行处理,每个模块负责一个职责,而且模块之间可以相互交互通信,共同 ...

  5. 【GIS风暴】30米分辨率地表覆盖数据GlobeLand30原始数据集简介及下载地址

    数据集预览: GlobeLand30是30米空间分辨率全球地表覆盖数据,目前可供下载使用的有3年的数据:2000-2010-2020,本文主要讲述GlobeLand30的官网下载地址和数据集简介. 数 ...

  6. 【补档STM32】STM32F103俄罗斯方块游戏实现

    项目地址:https://gitee.com/daycen/stm32-tetris/tree/master 使用Keil uVision5打开即可 一.概述 ​ 本文介绍了一个基于STM32的俄罗斯 ...

  7. 十二、.net core(.NET 6)添加通用的访问webapi的方法(包括HttpClient和HttpWebRequest)

    开发通用的访问webapi方法. 在common工具文件夹下,新建一个类库项目:Wsk.Core.WebHelper,并引用Package包项目,然后新建一个类HttpClientHelper,用于使 ...

  8. Lua学习高级篇

    Lua学习高级篇 之前已经说了很多,我目前的观点还是那样,在嵌入式脚本中,Lua是最优秀.最高效的,如果您有不同的观点,欢迎指正并讨论,切勿吐槽.这个系列完全来自于<Programming in ...

  9. 【Azure Developer】使用 Python SDK连接Azure Storage Account, 计算Blob大小代码示例

    问题描述 在微软云环境中,使用python SDK连接存储账号(Storage Account)需要计算Blob大小?虽然Azure提供了一个专用工具Azure Storage Explorer可以统 ...

  10. SOLOv 2：实例分割（动态、更快、更强）

    SOLOv 2:实例分割(动态.更快.更强) SOLOv2:  Dynamic, Faster and Stronger 论文链接: https://arxiv.org/pdf/2003.10152. ...