webpack初学笔记之小案例篇demo1

接上一篇：

在webpack-test1文件夹下边创建一个文件hello.js

然后在命令行敲下代码

webpack hello.js hello.bundle.js

先输入需要打包的文件名称然后是打包后的文件名称

打包成功以后你会看到下边这样的一段代码：有Hash，webpack版本号，还有这次打包花费的时间

接下来我们再创建一个bye.js文件,其中包括hello.js的引用

在bye中创建简单的函数

在hello.js中对bye.js进行引用，引用方式采用require的方式

这样再执行一遍代码会出现两个模块

接下来我们创建一个css文件，并且在hello.js中进行引用

但是在引用之前需要先安装两个loader,因为webpack本身是不支持css文件的

接下来在hello.js中进行引用

接下来创建一个demo.html文件进行展示整个页面

我们就可以在页面里看到效果了！

这样你是看到页面里样式是通过style标签进行引用的

那是不是每次我们都要通过这样进行引用呢？

不是的我们可以在命令行进行操作：

转载于:https://www.cnblogs.com/AndyZhang1993/p/6651202.html

webpack初学笔记之小案例篇demo1相关推荐

Flex初学笔记之控件篇
一,文本控件代码 1 <? xml version="1.0" encoding="utf-8" ?> 2 < mx:Applica ...
asp.net多图片上传案例_会计小明的故事-成本核算案例篇
因涉及成本核算案例篇,所需要的图表比较多,但是知乎不同于微信可以直接将文档图表复制过来,知乎专栏文章,所有图表必须先截图,然后以图片形式展示.但是成本核算案例图表实在是太多,一一截图,一则影响整体观感 ...
菜鸟学习笔记：Java提升篇10（网络2——UDP编程、TCPSocket通信、聊天室案例）
菜鸟学习笔记:Java提升篇10(网络2--UDP编程.TCPSocket通信) UDP编程 TCP编程(Socket通信) 单个客户端的连接多个客户端的连接(聊天室案例) UDP编程在上一篇中讲 ...
安卓逆向小案例——阿里系某电影票务APP加密参数还原-Unidbg篇
安卓逆向小案例--阿里系某电影票务APP加密参数还原-Unidbg篇一.前期准备使用unidbg还原参数时,首先需要找到指定的native方法和对应的so文件.而锁定生成加密参数的native方法 ...
微信小程序篇】四. 案例：根据单号查询快递编号
快递查询(2020-1-7亲测) 项目准备创建项目demo4-expressQuery(因为练习取过这个名所以案例里面是demo-expressQuery ) 操作步骤同demo3 不过second ...
【Android笔记65】Android小案例之简易版的房贷计算器（附源代码）
这篇文章,主要介绍如何使用Android实现一个简易版的房贷计算器小案例. 目录一.房贷计算器 1.1.运行效果演示 1.2.前提准备 (1)等额本息和等额本金
ajax入门学习（二）小案例Demo1
(尊重劳动成果,转载请注明出处:http://blog.csdn.net/qq_25827845/article/details/55823800冷血之心的博客) ajax入门学习(一) ajax入门 ...
一篇有关javaWeb的，有关转发，重定向，session，request域的综合小案例：验证码
**发一篇有关javaWeb的,有关转发,重定向,session,request域的综合小案例:验证码. 需求是: 1. 访问有验证码的登陆页面login.jsp 2. 用户输入用户名,密码以及验证码 ...
【Android笔记41】使用Android实现一个简易版本的购物车小案例
这篇文章,主要是使用Android实现一个简易版本的购物车小案例. 目录一.购物车案例 1.1.创建主界面 (1)主界面布局样式 (2)商品列表Fragment

webpack初学笔记之小案例篇demo1

webpack初学笔记之小案例篇demo1相关推荐

最新文章

热门文章

webpack初学笔记 之 小案例篇demo1

webpack初学笔记 之 小案例篇demo1相关推荐

最新文章

热门文章

webpack初学笔记之小案例篇demo1

webpack初学笔记之小案例篇demo1相关推荐