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 ...
随机推荐
- groovy脚本语言基础1
一 搭建groovy环境 安装JDK [root@node1 ~]# yum -y install java-11-openjdk 官网下载groovySDK下载 https://groovy.ap ...
- WPS2019党政机关单位版（无广告困扰）
WPS2019党政机关单位版(无广告困扰) 科技趣闻 中国石油大学(华东) 控制科学与工程硕士 17 人赞同了该文章 导读 WPS Office 2019专业版机关版是由WPS官方专为企业.机关单 ...
- IDEA 创建 Maven 项目每次都需要重新配置问题
问题描述 通过 File->Settings 设置 maven 配置,在 IDEA 新创建 Maven 项目时设置的 maven 配置会被重置,导致每次创建新 Maven 项目都需要重新设置一遍 ...
- C语言编程 菜鸟练习100题（51-60）
[练习51]矩阵转置 0. 题目: 矩阵的转置 1. 分析: 练习使用 for 循环嵌套,多维数组的表达. 2. 程序: #include <stdio.h> int main() { i ...
- Python+Selenium+Appium+API学习使用过的命令
adb devices 查看连接电脑的手机设备 weditor 启动uiautomatorviewer2元素定位工具 以下2个命令作用一样 adb shell dumpsys activity | f ...
- 永远的Ace 实验五 团队作业2：XXX企业设施设备云上资料室
项目 内容 课程班级博客链接 https://edu.cnblogs.com/campus/xbsf/2018CST/ 这个作业要求链接 https://www.cnblogs.com/nwnu-da ...
- Resource和Autowired区别
1.使用场景 @Resource和@Autowired都是做bean注入时使用 @Resource是jdk的注解,不是spring的注解:由包javax.annotation.Resource提供,需 ...
- 人工智能AI Boosting HMC Memory Chip
人工智能AI Boosting HMC Memory Chip Innosilicon的AI Boosting HMC存储芯片适用于高速,高带宽和高性能存储领域,例如AI边缘,数据中心,自动化等. H ...
- C++中头文件和实现文件的关系
头文件相当于是声明的集合,包括头文件的语句#Include实质为程序代码的宏替换. 编译阶段将函数和变量登记在符号表,链接时将各种函数的入口地址在其中查找到来调用,解引用.
- 解决：django.core.exceptions.ImproperlyConfigured: Requested setting INSTALLED_APPS, but settings are not 的方法
错误类型: 该错误是在在创建Django工程时出现遇到的错误 完整报错信息:(博文标题输入长度有限制) django.core.exceptions.ImproperlyConfigured: Req ...