共阴极数码管，学号显示实验

【实例简介】

文件：590m.com/f/25127180-489944078-ccc9ce（访问密码：551685）

以下内容无关：

-------------------------------------------分割线---------------------------------------------

1.1 Webpack是什么
可能有很多的小伙伴对于这个Webpack既熟悉又陌生，有一些刚开始接触vue的小伙伴在对项目进行打包的时候经常会使用到npm run build来进行打包，但是却不了解Webpack里面复杂的配置和功能。
Webpack是一种前端资源构建工具，一个静态模块打包器，在Webpack看来，前端所有资源文件都会作模块处理，它将根据模块的依赖关系进行静态分析，打包生成对应的静态资源，Webpack官网上这张万年不变的示意图中其实也已经说明了一切。
接下来我们就一起来学习一下Webpack的基本概念和配置流程。

1.2 Webpack的五个核心
Entry 入口指示Webpack以哪个文件为入口起点开始打包，分析构建内部依赖图。

Output 输出指示Webpack打包后的资源bundles输出到哪里。

Loader Loader让Webpack能够处理那些非js文件。

Plugins 插件功能，可以用于打包优化和压缩，重新定义环境变量等功能。

Model 指示Webpack使用相应模式的配置，通过选择 development, production 或 none 之中的一个，来设置 mode 参数，你可以启用 webpack 内置在相应环境下的优化。

Model的配置信息可以参考官网：https://webpack.docschina.org/configuration/mode/
2. Webpack的安装配置入门
2.1 安装
首先要确认的是，webpack是基于node.js的,确保安装之前安装了node.js
node.js安装可以参考：https://www.runoob.com/nodejs/nodejs-install-setup.html
npm init -y //初始化
npm install webpack webpack-cli --save-dev //安装webpack
2.2 配置
在文件夹中的src文件夹新建一个foo.js文件
//foo.js
alert(‘你好呀 webpack’)
在文件夹中新建一个webpack.config.js文件
//webpack.config.js
var path = require(‘path’);
module.exports = {
mode: ‘production’,//环境
entry: ‘./src/foo.js’, //打包入口
output: { //打包出口
path: path.join(__dirname, ‘dist’), //打包后文件存放的位置
filename: ‘index.js’, //打包后文件生成的文件名
},
};
config的配置信息可以参考官网：https://webpack.docschina.org/configuration/
此时文件目录是这样子的

2.3 开始打包
在package.json文件中添加如下命令
“scripts”: {
“test”: “echo “Error: no test specified” && exit 1”,
“build”: “webpack”
},
此时我们在终端输入npm run build命令就会将入口文件（entry）进行打包输出到（output）dist文件夹的位置

此时的目录是这样的

我们光看js是看不出效果的，在dist文件夹新建一个index.html页面引用该打包后的js文件试试
index.html

引用打包后的js 打开该index.html 我们会发现效果已经出来啦！

至此一个最简单版的打包就完成了！！！
那么有同学就会问了啊。。。。这打包了个寂寞啊？这跟原本的html引用js有区别吗？？？别急，上面只是演示了最简单的打包流程，webpack的功能远远不止这样
我们来另外一个例子在foo.js同个文件夹内创建一个称为 helloWebpack.js 的模块。
//helloWebpack.js
export default function () {
alert(‘hi webpack’)
}
在foo.js引用它
//foo.js
import hello from ‘./helloWebpack’
hello()
细心的同学可能会发现了现在如果直接在 html 页面里面引用 index.js 是无法执行的，浏览器是无法处理 ES6 模块或者是 common.js 规范的，那如果使用Webpack来处理入口来打包会怎么样呢？
此时我们在终端输入npm run build命令然后运行index.html文件。

此时效果就出来了！！！Webpack 天生支持 ES6 import 和 export 的模块语法，可以直接使用。
3. 总结
上面讲到了Webpack的基本配置和安装打包，五个核心要点之中的其中两个下篇我们来学学如何使用Loader和plugins会发现更多Webpack的奥妙

共阴极数码管，学号显示实验相关推荐

[STM32F1]基于STM32F103实现TM1640点亮16位共阴极数码管，显示“0~F”数字
本节我们目标是实现TM1640点亮16位共阴极数码管,显示"0~F"数字: 1. 硬件设计 GPIO初始化配置 SCL(PB6) SDA(PB7):开漏输出,通过IO模拟驱动TM ...
C51单片机-共阳极数码管循环显示数字0至9，共阴极数码管循环显示5201314（动态）
keil uVision4界面: #include<reg51.h> //包含8051单片机寄存器定义的头文件 //共阳极数码管0到9 unsigned char seg1[]={0xc0 ...
c语言六个数码管显示123456,用51单片机C语言编写程序实现6位共阴极数码管循环显示0123456789ABCDEF，六个数码管是连续不同的六个数?...
# include # define uint unsigned int # define uchar unsigned char code uchar shu[] = {0x3f,0x06,0x5b ...
入门必做的51单片机实验2----》利用外部中断的方法来控制发光二极管和共阴极数码管显示十六进制的0到F
嘿!各位中午好! 我是肖肖的猪会飞欢迎收看肖小猪频道刚刚做了个单片机实验->ヽ(￣ω￣(￣ω￣")ゝ分享一下文章目录前言一,实验题目二,程序三,仿真效果前言此实验为 ...
八位一体共阴极数码管显示电子时钟+闹铃+温度检测
老师一枚,服务于学生,制作了电子时钟融合温度检测的系统. 首先在焊接式前一定要仿真,更要注意仿真引脚和实际引脚的不同. 下面这个链接是常用元器件实物引脚图和解释. CSDNhttps://mp.csd ...
四位共阴极数码管显示“12.34”的主程序
四位共阴极数码管显示"12.34"的主程序本程序使用共阴极数码管,使用了TM1650驱动芯片,在stm32F103调试成功 #include "gpio.h" ...
共阳数码管段码表_简单共阴极数码管电路图大全
共阴极则是把所有LED的阴极连接到共同接点com,而每个LED的阳极分别为a.b.c.d.e.f.g及dp(小数点),如下图所示.图中的8个LED分别与上面那个图中的A~DP各段相对应,通过控制各个L ...
利用全加器实现7段数码管_简单共阴极数码管电路图大全（CD4511/段译码/驱动器）...
共阴极则是把所有LED的阴极连接到共同接点com,而每个LED的阳极分别为a.b.c.d.e.f.g及dp(小数点),如下图所示.图中的8个LED分别与上面那个图中的A~DP各段相对应,通过控制各个L ...
c语言共阴极数码管数字6,共阴数码管显示数字 C语言程序
共阴数码管显示数字C语言程序#include void Delay(unsigned char a) { unsigned char i; while( --a != 0) { for(i = 0; ...
共阴极数码管编码表_数码管循环点亮的PLC控制——基本逻辑指令的应用
数码管循环点亮的PLC控制,我们运用日本三菱FX2N-48MR-001(FX2N-48MR-001是日本三菱公司的可编程控制器(PLC),继电器输出及输入24点,输出24点.FX2N是FX系列中功能最 ...

共阴极数码管，学号显示实验

共阴极数码管，学号显示实验相关推荐

最新文章

热门文章