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 ...
随机推荐
- jQuery的链式编程风格
jQuery的链式编程风格 首先本人通过一个案例来展示jQuery的链式编程风格.先写一个页面,展示一个列表,代码如下: <body> <div> <ul class=& ...
- golang快速入门（四）
提示:本系列文章适合有其他语音基础并对Go有持续冲动的读者 一.golang获取HTTP请求 1.在golang标准库中提供了net包来处理网络连接,通过http.Get创建http请求并返回服务器响 ...
- Spring Boot - 自定义 Banner 图案
我是陈皮,一个在互联网 Coding 的 ITer,微信搜索「陈皮的JavaLib」第一时间阅读最新文章,回复[资料],即可获得我精心整理的技术资料,电子书籍,一线大厂面试资料和优秀简历模板. 前言 ...
- Jupyter Notebook出现kernel error情况
今天重新装了anaconda,在运行时发现真快,可是在运行selenium的代码时候,发现自己按照以前写得帖子得步骤做,同样还是出现了错误,心里不免大吃一惊,难道我的做法是错的?等到发现有个 ker ...
- C# 将DLL制作CAB包并在浏览器下载，自动安装。(Activex)（包括ie打开cab包一直弹出用户账户控制，确定之后无反应的解决办法。）
制作Activex程序网上有很多方法我就不说了,我的业务主要做的就是将DLL打包成CAB供浏览器下载. 下面制作证书,以及制作cab包需要用到一些工具.我将工具包上传到自己的博客园里了,以供大家下载. ...
- OneFlow 并行特色
OneFlow 并行特色 在 Consistent 与 Mirrored 视角中,已经知道 OneFlow 提供了 mirrored 与 consistent 两种看待分布式系统的视角,并且提前知道了 ...
- Docker Buildx插件
Docker Buildx插件 Overview Docker Buildx是一个CLI插件,它扩展了Docker命令,完全支持Moby BuildKit builder toolkit提供的功能.它 ...
- CVPR2020：基于层次折叠的跳跃式注意网络点云完成
CVPR2020:基于层次折叠的跳跃式注意网络点云完成 Point Cloud Completion by Skip-Attention Network With Hierarchical Foldi ...
- MongoDB学习笔记01：入门
MongoDB简介 MongoDB是一个开源.高性能.无模式的文档型数据库,当初的设计就是用于简化开发和方便扩展,是NoSQL数据库产品中的一种.是最 像关系型数据库(MySQL)的非关系型数据库. ...
- java后端知识点梳理——web安全
跨域 当浏览器执行脚本时会检查是否同源,只有同源的脚本才会执行,如果不同源即为跨域. 这里的同源指访问的协议.域名.端口都相同. 同源策略是由 Netscape 提出的著名安全策略,是浏览器最核心.基 ...