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 ...
随机推荐
- centOS 7 安装 CUPS 打印服务器，安装映美 FP-730K打印机共享
centOS 7 安装 CUPS 打印服务器,安装映美 FP-730K打印机共享 2017-09-13 16:27:02 mostone 阅读数 3698 版权声明:本文为博主原创文章,遵循CC ...
- swagger上的接口写入数据库
一.依赖 virtualenv -p python3.6 xx pip install scrapy pip install pymysql 二. 1.创建项目和spider1 scrapy star ...
- 013.Python的文件操作
一 文件操作 fp = open("打开的文件",mode="模式选择",encoding="编码集") open 函数 返回一个文件io对 ...
- 012.Python的字典和集合的相关函数
一 字典的相关函数 1.1 增函数 dictvar = {"a":1,"b":2} dictvar["c"] = 3 print(dictv ...
- python3 列表转换为字符串
join将列表转换为字符串 list1 = ["张三","李四","王五"] a1 = ','.join(list1) print(a1) ...
- SpringCloud专题之开篇及Eureka
声明: 本专题部分理论来自翟永超老师的<Spring Cloud微服务实战>.建议大家看原书. 开篇 微服务简单来说是系统架构上的一种设计风格,他的主旨是将一个原本独立且庞大的系统按照不同 ...
- 微信公众号H5-网页开发须知
网页授权 1. 公众号配置--授权回调域名(仅域名,不带https://)2. 配置的域名为全域名,该域名下的页面可以进行OAuth2.0鉴权3. scope 授权的[静默.非静默] a.(静默--无 ...
- 5分钟就能学会的简单结构 | MLP-Mixer: An all-MLP Architecture for Vision | CVPR2021
文章转自:微信公众号「机器学习炼丹术」 作者:炼丹兄(欢迎交流,共同进步) 联系方式:微信cyx645016617 论文名称:「MLP-Mixer: An all-MLP Architecture f ...
- SSM和SpringBoot常用注解
SpringBoot的重要注解 @SpringBootApplication 创建 SpringBoot 项目之后会默认在主类加上 我们可以把 @SpringBootApplication看作是 @C ...
- WordPress安装篇(5)：源码编译安装LNMP并部署WordPress
与YUM方式安装相比,源码编译安装方式更灵活,安装过程中能自定义功能和参数,特别是在批量部署服务器又要求软件版本及配置一致时,源码编译安装的优势很明显.本文介绍如何通过源码编译方式安装Nginx1.1 ...