1.进入根目录,建两个文件夹,分别为src和dist

1).src文件夹:用来存放我们编写的javascript代码,可以简单的理解为用JavaScript编写的模块。

2).dist文件夹:用来存放供浏览器读取的文件,这个是webpack打包成的文件。

2.在dist下建立一个index.html文件,写入以下代码

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>hzh webpack</title>
</head>
<body>
<div id="title"></div>
<script src="./bundle.js"></script>
</body>
</html>

这里引入的bundle.js 可以先不管,这个文件现在还没有,这是用webpack打包后生成的文件

src下建一个entry.js文件 写入代码:

document.getElementById('title').innerHTML='Hello Webpack';

3.在命令行中执行:webpack src/entry.js dist/bundle.js

这样就打包成功了,如果要看效果,可cnpm install -g live-server,执行live-server,浏览器会自动打开一个窗口,点击dist文件夹可查看到Hello webpack 文字

最终效果图:

前端必学内容:webpack(模块打包器

webpack3 学习内容,点击即可到达

(1).webpack快速入门——如何安装webpack及注意事项

(2).webpack快速入门——webpack3.X 快速上手一个Demo

(3).webpack快速入门——配置文件:入口和出口,多入口、多出口配置

(4).webpack快速入门——配置文件:服务和热更新

(5).webpack快速入门——CSS文件打包

(6).webpack快速入门——配置JS压缩,打包

(7).webpack快速入门——插件配置:HTML文件的发布

(8).webpack快速入门——CSS中的图片处理

(9).webpack快速入门——CSS分离与图片路径处理

(10).webpack快速入门——处理HTML中的图片

(11).webpack快速入门——CSS进阶,Less文件的打包和分离

(12).webpack快速入门——CSS进阶:SASS文件的打包和分离

(13).webpack快速入门——CSS进阶:自动处理CSS3前缀

(14).webpack快速入门——CSS进阶:消除未使用的CSS

(15).webpack快速入门——给webpack增加babel支持

(16).webpack快速入门——打包后如何调试

(17).webpack快速入门——实战技巧:开发和生产并行设置

(18).webpack快速入门——实战技巧:webpack模块化配置

(19).webpack快速入门——实战技巧:优雅打包第三方类库

(20).webpack快速入门——实战技巧:watch的正确使用方法,webpack自动打包

(21).webpack快速入门——实战技巧:webpack优化黑技能

(22).webpack快速入门——集中拷贝静态资源

(23).webpack快速入门——Json配置文件使用

如果我的内容对你有帮助,欢迎打赏

webpack快速入门——webpack3.X 快速上手一个Demo的更多相关文章

  1. 【web自动化测试】Playwright快速入门,5分钟上手

    我喜欢Playwright! 这是微软开源的一款非常强大的自动化工具,再过几年,他很有可能取代Selenium在浏览器自动化的通知地位.使用过一段时间,我没有找到很好的中文资料可以参考,导致很多问题无 ...

  2. 【PyTorch深度学习60分钟快速入门 】Part4:训练一个分类器

      太棒啦!到目前为止,你已经了解了如何定义神经网络.计算损失,以及更新网络权重.不过,现在你可能会思考以下几个方面: 0x01 数据集 通常,当你需要处理图像.文本.音频或视频数据时,你可以使用标准 ...

  3. 夺命雷公狗---DEDECMS----5快速入门之商城快速搭建实现快递方式和支付方式的显示

    我们现在用dedecms快速搭建一个商场,方法如下所示: 如此类推.写多几个栏目,效果 如下所示: 然后我们添加几个商品,记得要刷新下页面噢,不见见不到商品 添加成功后去看看效果如何: 出来了,但是如 ...

  4. webpack快速入门——实战技巧:watch的正确使用方法,webpack自动打包

    随着项目大了,后端与前端联调,我们不需要每一次都去打包,这样特别麻烦,我们希望的场景是,每次按保存键,webpack自动为我们打包,这个工具就是watch! 因为watch是webpack自带的插件, ...

  5. webpack快速入门——CSS进阶:自动处理CSS3前缀

    为了浏览器的兼容性,有时候我们必须加入-webkit,-ms,-o,-moz这些前缀.目的就是让我们写的页面在每个浏览器中都可以顺利运行. 1.安装 cnpm i postcss-loader aut ...

  6. webpack快速入门——如何安装webpack及注意事项

    1.window+R键,输入cmd打开命令行工具,输入 mkdir XXXX(XX:文件夹名): 2.cd XXX 进入刚刚创建好的文件夹里,输入cnpm install -g webpack (安装 ...

  7. webpack快速入门——配置文件:入口和出口,多入口、多出口配置

    1.在根目录新建一个webpack.config.js文件,然后开始配置: const path = require('path'); module.exports={ //入口文件的配置项 entr ...

  8. webpack快速入门——配置文件:服务和热更新

    1.在终端安装 cnpm i webpack-dev-server --save-dev 2.配置好后执行 webpack-dev-server,这时候会报错 出现错误,只需要在pagejson里配置 ...

  9. webpack快速入门——CSS文件打包

    1.在src下新建css文件,在css文件下新建index.css文件,输入以下代码 body{ background:pink; color:yellowgreen; } 2.css建立好后,需要引 ...

随机推荐

  1. Codeforces 660A. Co-prime Array 最大公约数

    A. Co-prime Array time limit per test 1 second memory limit per test 256 megabytes input standard in ...

  2. 修改socket缓冲区大小

    #include <stdio.h>#include <sys/time.h>#include <sys/types.h>#include <sys/sock ...

  3. UI设计不就是画线框,凭什么年薪30W?

    作为一枚界面设计师 我真的很想为UI设计抱不平啊!! UI设计真是一个备受不解的职业 常会被误解,然后出现以下场景 程序欧巴: 界面画好没?按钮圆的方的不都能用吗?纠结那多干嘛? 产品经理: 这次我们 ...

  4. Asp.Net 用户验证(自定义IPrincipal和IIdentity)

    http://www.cnblogs.com/JimmyZhang/archive/2008/12/07/1349457.html

  5. maven 无法下载私服jar包,如刚上传的第三方jar包无法下载。。

    原因可能是: 在你下载该文件时 ,的确 私服上没有该文件. 但是maven会在本地仓库建立文件夹路径,并且今天不会再去私服下载. 即使你现在上传3rd jar ,也不会去下载,导致一直找不到jar.. ...

  6. pca总结,非常详细

    #coding=utf- from numpy import * '''通过方差的百分比来计算将数据降到多少维是比较合适的, 函数传入的参数是特征值和百分比percentage,返回需要降到的维度数n ...

  7. 在EF中使用MySQL的方法及常见问题

    有时需要在网上租用空间或数据库,Mysql成本低一些,所以想将sql server转成mysql…… 注意:在安装Mysql时要选择文字集为utf8,否则将不能使用中文(当前也可以在创建数据库时使用u ...

  8. 2018.09.12 poj2376Cleaning Shifts(线段树+简单dp)

    传送门 貌似贪心能过啊%%%. 本蒟蒻写的线段树优化dp. 式子很好推啊. f[i]表示覆盖1~i所需的最小代价. 那么显然对于一个区间[li,ri]" role="present ...

  9. hdu-1067(最大独立集)

    题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=1068 题意:一个男生集合和一个女生集合,给出两个集合之间一一对应的关系,求出两个集合中最大独立集的点数 ...

  10. 反爬虫破解系列-汽车之家利用css样式替换文字破解方法

    网站: 汽车之家:http://club.autohome.com.cn/ 以论坛为例 反爬虫措施: 在论坛发布的贴子正文中随机抽取某几个字使用span标签代替,标签内容位空,但css样式显示为所代替 ...