webpack（3）基础的打包过程
没有配置文件的打包
如果我们没有使用配置文件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）基础的打包过程的更多相关文章
- android基础-Apk打包过程(了解)
此文来源于<Android软件安全与逆向分析> 一.打包资料文件,生成R.java文件. 二.处理aidl文件,生成相应的Java文件. 三.编译工程源代码,生成相应的class文件. 四 ...
- Webpack 2 视频教程 018 - 使用可视化图表进行统计分析打包过程
原文发表于我的技术博客 这是我免费发布的高质量超清「Webpack 2 视频教程」. Webpack 作为目前前端开发必备的框架,Webpack 发布了 2.0 版本,此视频就是基于 2.0 的版本讲 ...
- webpack 打包过程及常用插件
前言 要理解webpack 首先明白三个概念:module,chunk,bundles,即输入,中间态,输出. chunk: This webpack-specific term is uesd in ...
- webpack打包过程如何调试？
本文适用于已经会使用webpack的前端开发人员,但是想进一步了解webpack细节和进阶. 首先请读者按照我前一篇文章 Webpack 10分钟入门介绍的步骤,在本地搭建一个webpack的hell ...
- webpack打包的基础原理-打包后的文件解读
1.概念 本质上,webpack 基于node平台,利用 node 的各种api来实现 javascript 应用程序的一个静态模块的打包工具. 在打包过程中,构建依赖关系,并且实现模块引用预处理,以 ...
- Webpack安装配置及打包详细过程
引言 前端经过漫长的发展,涌现出了很多实践方法来处理复杂的工作流程,让开发变得更加简便,其中,模块化可以使复杂的程序细化成为各个小的文件,而webpack并不强制你使用某种模块化方案,而是通过兼容所有 ...
- vue-cli脚手架中webpack配置基础文件详解
一.前言 原文:https://segmentfault.com/a/1190000014804826 vue-cli是构建vue单页应用的脚手架,输入一串指定的命令行从而自动生成vue.js+wep ...
- vue-cli 脚手架中 webpack 配置基础文件详解
一.前言 vue-cli是构建vue单页应用的脚手架,输入一串指定的命令行从而自动生成vue.js+wepack的项目模板.这其中webpack发挥了很大的作用,它使得我们的代码模块化,引入一些插件帮 ...
- 深入浅出 webpack 之基础配置篇
前言 前端工程化经历过很多优秀的工具,例如 Grunt.Gulp.webpack.rollup 等等,每种工具都有自己适用的场景,而现今应用最为广泛的当属 webpack 打包了,因此学习好 webp ...
随机推荐
- sprintf和snprintf函数
printf()/sprintf()/snprintf()区别 先贴上其函数原型 printf( const char *format, ...) 格式化输出字符串,默认输出到终端-----s ...
- openssl自签发证书
DOMAIN=www.example.com openssl genrsa -out ${DOMAIN}.key # 生成私有key openssl req -x509 -new -nodes -ke ...
- Qt 中英文切换
一.前言 软件面向不同国籍用户时,需要显示不同语言的操作界面,Qt提供语言家可翻译为不同语言类型,方便软件走向国际化. 二.功能实现 1.翻译文件制作 1)在pro文件中添加生成中英文翻译过渡文件(. ...
- SpringBoot2 集成测试组件，七种测试手段对比
一.背景描述 在版本开发中,时间段大致的划分为:需求,开发,测试: 需求阶段:理解需求做好接口设计: 开发阶段:完成功能开发和对接: 测试上线:自测,提测,修复,上线: 实际上开发阶段两个核心的工作, ...
- mysql-redis连接
# log 数据库连接 class LogMysql(object): conn = None cursor = None def __init__(self): self.conn = pymysq ...
- Docker基本原理概述
Docker基本原理概述 Docker是一个用于开发,交付和运行应用程序的开放平台.Docker能够将应用程序与基础架构分开,从而可以快速交付软件.借助Docker,可以以与管理应用程序相同的方式来管 ...
- Deeplearning知识蒸馏
Deeplearning知识蒸馏 merge paddleslim.dist.merge(teacher_program, student_program, data_name_map, place, ...
- ContOS8 配置MariaDB
导语: 该篇文章主要记录ContOS8安装MariaDB后的一些配置内容,若想要详细了解安装过程请移步至上一篇博文! 正文: 首先对MariaDB进行相关的简单配置 使用mysql_secure_in ...
- 前台JS遍历Table的所有单元格数据内容
在日常开发过程中为了减少与后台服务器的交互次数,大部分的功能都会放到前台使用JS来完成. 例如:一个表中有ID(FOCUS_SEQ)和Name(COLUMNCTRL)两个字段,其中ID是自定义连续增长 ...
- 导出 Excel 模板自动生成规则，避免用户来回修改
一句话总结 Excel 导出.导入时,根据注解自动添加单元格验证规则,避免用户因填写错误的枚举字段而反复修改 Excel 需求背景 对于 Java Web 项目,总是不可避免的出现 Excel 导入. ...