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. JVM家族史考【转】

    说起Java虚拟机,许多Java程序员都会潜意识地把它与Sun(虽然太阳已然西落,但永远值得被记忆) HotSpot虚拟机等同看待,也许还有一些程序员会注意到BEA JRockit和IBM J9,但大 ...

  2. Laravel5.5 使用队列 Queue

    使用队列# 上一章节中我们开发了自动生成 Slug 功能,但是因为我们的需要实时请求百度翻译接口,这将会是一个系统性能隐患. 一般情况下,网络请求会存在各种不确定性,如果请求 API 出现超时情况,或 ...

  3. tomcat 时间相差8个小时，百度上查到的，备份下

    通常网上一查都是 修改 tomcat 的参数 ,如catalina 文件,jvm parameters 等.如果都不起作用,可以使用如下方式.. 你可以修改jdk的时间校正了,你这么来.进入 \hom ...

  4. C语言dos程序源代码分享（进制转换器）

    今天给大家分享一个dos程序的源代码 这个程序是本人在学习中的经验分享 如果有问题或者建议,欢迎大家一起交流 源代码: /*本程序为一个进制转换器 本程序不作为商业用途,完全为技术交流 喜欢C语言的同 ...

  5. 2018.10.02 NOIP模拟 矩阵分组（二分答案）

    传送门 考场上并不会写二分的check函数,下来看了看题解发现真是妙极. 不难想到每次直接从四个角各按阶梯状拓展出合法区域A,再检验B是否合法就行了.(然而考场上写的弃疗了) 于是题解用了一些小技巧优 ...

  6. 2018.09.15 秘密的牛奶管道SECRET（次小生成树）

    描述 约翰叔叔希望能够廉价连接他的供水系统,但是他不希望他的竞争对手知道他选择的路线.一般这样的问题需要选择最便宜的方式,所以他决定避免这种情况而采用第二便宜的方式. 现在有W(3 <= W & ...

  7. java常用设计模式一：单例模式

     1.饿汉式 package singleton.demo; /** * @author Administrator * @date 2019/01/07 */ public class Single ...

  8. 如何使用 Visual C# 2005 或 Visual C# .NET 向 Excel 工作簿传输数据

    本文分步介绍了多种从 Microsoft Visual C# 2005 或 Microsoft Visual C# .NET 程序向 Microsoft Excel 2002 传输数据的方法.本文还提 ...

  9. 玩转Nodejs的集群

    在Nodejs中使用集群还是不容易的.Javascript的单线程属性让nodejs下的应用很难使用现代机器的多核特性.比如下面的代码实现了一个http服务器的主干部分.这部分代码只会执行在一个线程上 ...

  10. hdu 1163 Eddy's digital Roots 【九余数定理】

    http://acm.hdu.edu.cn/showproblem.php?pid=1163 九余数定理: 如果一个数的各个数位上的数字之和能被9整除,那么这个数能被9整除:如果一个数各个数位上的数字 ...