(0)webpack学习笔记—哈喽~沃德

官方概念

webpack是一个现代javascript应用程序的模块打包器(module bundler),他会递归的构建一个依赖关系图,其中包含应用程序需要的每个模块,然后将所有这些模块打包成少量的bundle 通常只有一个,由浏览器进行加载

开始学习webpack并在浏览器输出‘哈喽~沃德’
0.安装webpack
npm install webpack -g  //全局安装
//webpack -v 查看版本
1.初始化
npm init 
//配置项可以直接回车略过
2.认识项目结构

就像在gulp中一样src为开发环境dist为生产环境

3.必要文件

在dist中新建一个index.html文件,打开文件写入一个id为rty的任意标签,然后再写个script标签引用文件为当前文件夹下bundle.js文件

<p id="rty"></p>
<script src="./bundle.js"></script>

这时候你会发现 dist中根本就没有bundle这个文件,我们的目的就是打一个bundle.js进来 现在我们在src中新建一个index.js写入以下代码:

document.getElementById('rty').innerHTML='哈喽~沃德'
4.hello world

现在我们执行webpack命令开始打包

webpack src/index.js   dist/bundle.js

没有红字报错说明打包成功了

现在打开dist中的index.html 看到‘哈喽~沃德’了

哈喽~沃德

持续更新中......

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏IT笔记

Nginx学习之安装篇

基于Linux的安装,本篇教程提供两种安装实现,尽管之前安装过很多次,但是这里还是做一个整理。 YUM安装 优点:不用担心依赖关系、一键安装。 缺点:由于YUM...

3095
来自专栏从零学习云计算

kubernetes工作记录(2)——基于release工程的kubernetes1.7.3 rpm包的编译生成

使用release工程编译的方式,生成kubernetes1.7.3的rpm包。 虚拟机环境为Centos7.2。 安装git # yum -y install...

2410
来自专栏木子昭的博客

解决.gitignore无法生效的问题

使用git的过程中, 为了避免垃圾文的上传,我们可以手动配置.gitignore排除一些文件或文件夹.

831
来自专栏算法修养

Git 使用篇二:搭建远程服务器

一般做一个私人的项目,不希望开源的,是不会放在GitHub上的,这个时候我们需要建里一个自己的Git远程服务器,方便小组成员开发。 这里以Centos云服务器为...

3736
来自专栏Linux运维学习之路

day6、Linux下如何找出7天以前的文件删除

有些时候,由于系统产生的日志文件,使服务器的磁盘空间紧张,所以怎么删除7天以前的日志文件及让系统只保留7天以内的日志文件 方法一 使用命令:find + |xa...

2009
来自专栏电光石火

solr安装配置

环境介绍 solr 6.5.1 tomcat8 jdk1.8 一、下载solr安装包 下载地址:http://www.apach...

2915
来自专栏码神联盟

Linux | CentOS7下会玩JDK不?你确定?

Linux下如何搭建Java环境 软件环境 虚拟机:VMware Workstation 系统:Linux:CentOS-7-x86_64 工具: 安装工具...

3689
来自专栏运维小白

2.18 特殊权限set_uid

set_uid 例子 -rwsr-xr-x.中的s的权限 [root@hf-01 ~]# which passwd /usr/bin/passwd [root@...

2375
来自专栏互联网杂技

laravel—用Migration的操作数据库

当然可以手动创建表; 据说Migration相当于是mysql的git工具,而且非常好用; 创建: php artisan make:migration cre...

4128
来自专栏魏艾斯博客www.vpsss.net

如何在 wordpress 文章页和单页面隐藏作者/发布者

2563

扫码关注云+社区

领取腾讯云代金券