webpack快速入门——webpack3.X 快速上手一个Demo
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的更多相关文章
- 【web自动化测试】Playwright快速入门，5分钟上手
我喜欢Playwright! 这是微软开源的一款非常强大的自动化工具,再过几年,他很有可能取代Selenium在浏览器自动化的通知地位.使用过一段时间,我没有找到很好的中文资料可以参考,导致很多问题无 ...
- 【PyTorch深度学习60分钟快速入门 】Part4：训练一个分类器
太棒啦!到目前为止,你已经了解了如何定义神经网络.计算损失,以及更新网络权重.不过,现在你可能会思考以下几个方面: 0x01 数据集 通常,当你需要处理图像.文本.音频或视频数据时,你可以使用标准 ...
- 夺命雷公狗---DEDECMS----5快速入门之商城快速搭建实现快递方式和支付方式的显示
我们现在用dedecms快速搭建一个商场,方法如下所示: 如此类推.写多几个栏目,效果 如下所示: 然后我们添加几个商品,记得要刷新下页面噢,不见见不到商品 添加成功后去看看效果如何: 出来了,但是如 ...
- webpack快速入门——实战技巧：watch的正确使用方法，webpack自动打包
随着项目大了,后端与前端联调,我们不需要每一次都去打包,这样特别麻烦,我们希望的场景是,每次按保存键,webpack自动为我们打包,这个工具就是watch! 因为watch是webpack自带的插件, ...
- webpack快速入门——CSS进阶：自动处理CSS3前缀
为了浏览器的兼容性,有时候我们必须加入-webkit,-ms,-o,-moz这些前缀.目的就是让我们写的页面在每个浏览器中都可以顺利运行. 1.安装 cnpm i postcss-loader aut ...
- webpack快速入门——如何安装webpack及注意事项
1.window+R键,输入cmd打开命令行工具,输入 mkdir XXXX(XX:文件夹名): 2.cd XXX 进入刚刚创建好的文件夹里,输入cnpm install -g webpack (安装 ...
- webpack快速入门——配置文件：入口和出口，多入口、多出口配置
1.在根目录新建一个webpack.config.js文件,然后开始配置: const path = require('path'); module.exports={ //入口文件的配置项 entr ...
- webpack快速入门——配置文件：服务和热更新
1.在终端安装 cnpm i webpack-dev-server --save-dev 2.配置好后执行 webpack-dev-server,这时候会报错 出现错误,只需要在pagejson里配置 ...
- webpack快速入门——CSS文件打包
1.在src下新建css文件,在css文件下新建index.css文件,输入以下代码 body{ background:pink; color:yellowgreen; } 2.css建立好后,需要引 ...
随机推荐
- Python和JavaScript间代码转换4个工具-乾颐堂
Python 还是 JavaScript?虽然不少朋友还在争论二者目前谁更强势.谁又拥有着更为光明的发展前景,但毫无疑问,二者的竞争在 Web 前端领域已经拥有明确的答案.立足于浏览器平台,如果放弃 ...
- Django-组件
https://www.cnblogs.com/yuanchenqi/articles/8034442.html
- java报错java/lang/NoClassDefFoundError: java/lang/Object
安装完java出错 javac和java -version 都无效,报错如上 解决方法,更改文件中的两个文件(前提是你的 vim /etc/profile 文件路径写的正确) /usr/java/ ...
- 20155218 2016-2017-2 《Java程序设计》第10周学习总结
20155218 2016-2017-2 <Java程序设计>第10周学习总结 教材学习内容总结 一个IP地址可以对应多个域名,一个域名只能对应一个IP地址. 在网络通讯中,第一次主动发起 ...
- C语言中 指针的基础知识总结, 指针数组的理解
1: 指针变量所占的字节数与操作系统为位数有关,64位操作系统下,占8个字节,32位操作系统下,占4个字节 2: 指针变量的本质是用来放地址,而一般的变量是放数值的3: 脱衣服法则: a[2] 变成 ...
- (转)code first基础
转自:http://tech.it168.com/a2011/0719/1220/000001220362_all.shtml [IT168 技术]随着.NET 4.0时代的到来,开发者越来越关注如何 ...
- The remote end hung up unexpectedly
fatal: The remote end hung up unexpectedly 上传一份代码的时候,出现了这个错误,然后就没有成功上传. 背景操作 主要是进行svn转换到git时候出错的,转换的 ...
- 《Forward团队-爬虫豆瓣top250项目-设计文档》
成员:马壮,李志宇,刘子轩,年光宇,邢云淇,张良 设计方案: 1.能分析HTML语言: 2.提取重要数据,并保存为文本文档: 3.用PY代码调取文本文档的数据: 4.编写提取部分数据的python代码 ...
- android插件化简述
2015年是Android插件化技术突飞猛进的一年,随着业务的发展各大厂商都碰到了Android Native平台的瓶颈: 从技术上讲,业务逻辑的复杂导致代码量急剧膨胀,各大厂商陆续出到65535方法 ...
- [leetcode] 21. Implement strStr()
这个题目是典型的KMP算法,当然也可以试试BM,当然有关KMP和BM的介绍阮一峰曾经写过比较好的科普,然后july也有讲解,不过那个太长了. 先放题目吧: Implement strStr(). Re ...