分享webpack实例教程

webpack 是一个前端资源加载/打包工具。它将根据模块的依赖关系进行静态分析,然后将这些模块按照指定的规则生成对应的静态资源。

安装 Webpack

在安装 Webpack 前,你本地环境需要支持 node.js。

由于 npm 安装速度慢,本教程使用了淘宝的镜像及其命令 cnpm

首先全局安装webpack,再npm初始化一个项目,并局部安装webpack开发工具

$ npm install webpack -g

登录后复制

npm init (项目名称)$ npm install webpack-dev-server --save-dev

登录后复制

在项目目录下创建app文件夹,并创建index.js文件,写入如下代码

console.log('hello world');

登录后复制

在项目文件夹下打开命令行,输入如下命令

webpack app/index.js build/index.js

登录后复制

出现如下代码即为成功

分享webpack实例教程

看下build/index.js文件的代码:

分享webpack实例教程

分享webpack实例教程

分享webpack实例教程

可以看到73行就是我们app/index.js 文件的代码

具体源码等改天我们再分析,今天我们主要的目的是体验。

这样一个一个代码敲效率太低,我们可以通过webpack.config.js文件来完成更高级的功能。

以上就是分享webpack实例教程的详细内容,更多请关注【创想鸟】其它相关文章!

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容, 请发送邮件至253000106@qq.com举报,一经查实,本站将立刻删除。

发布者:PHP中文网,转转请注明出处:https://www.chuangxiangniao.com/p/2910454.html

(0)
上一篇 2025年3月11日 04:33:03
下一篇 2025年3月5日 15:48:01

AD推荐 黄金广告位招租... 更多推荐

相关推荐

  • spring WebSocket的详细介绍

    场景 websocket是Html5新增加特性之一,目的是浏览器与服务端建立全双工的通信方式,解决http请求-响应带来过多的资源消耗,同时对特殊场景应用提供了全新的实现方式,比如聊天、股票交易、游戏等对对实时性要求较高的行业领域。 背景 …

    编程技术 2025年3月11日
    000
  • 认识HTML5的WebSocket

    认识html5的websocket 在HTML5规范中,我最喜欢的Web技术就是正迅速变得流行的WebSocket API。WebSocket提供了一个受欢迎的技术,以替代我们过去几年一直在用的Ajax技术。这个新的API提供了一个方法,从…

    编程技术 2025年3月11日
    200
  • 非常不错的svg教程

     介绍的非常详细,也很有调理,内容很详细 适合于初学者学习 以上就是非常不错的svg教程的详细内容,更多请关注【创想鸟】其它相关文章!

    编程技术 2025年3月11日
    200
  • 关于canvas的一个实例教程–刮刮乐

    今天,结合上一篇文章的抽奖小游戏,用canvas来写一个小游戏——刮刮乐。首先,用canvas做一个画布,宽高各为200px。然后再把一个span标签定位到画布上。          效果如下所示  接下来获取一下canvas标签,定义一个…

    2025年3月11日 编程技术
    200
  • Web页面跳转并取值的方法指导

    这篇文章主要介绍了web前端页面跳转并取到值,就是从a页面跳转到b页面,并将b页面的值取到赋到a页面上显示,具体实现方法,大家参考下本文 记录一下 (从A页面跳转到B页面,并将B页面的值取到赋到A页面上显示) 先来举一个栗子;) 这个是A页…

    2025年3月11日
    400
  • 后盾网HTML5视频教程

    《后盾网html5视频教程》是现在以及未来一项重要的技术,学好html5不仅可以让你开发web前端界面,设计出能够适应各种尺寸设备的网页;甚至可以让你使用html5技术开发出hybird app(一种混合式开发android/ios/win…

    2025年3月11日
    200
  • 浅析微信小程序和web之间的交互(代码分享)

    之前的文章《深入浅析React Native与Web的基本交互(附代码)》中,给大家了解一下React Native与Web交互。下面本篇文章给大家了解一下微信小程序和web之间的交互,有需要的朋友可以参考一下,希望对你们有帮助。 背景 通…

    2025年3月11日
    200
  • 深入解析微信小程序页面中实现的保存图片(附代码)

    之前的文章《浅析微信小程序和web之间的交互(代码分享)》中,给大家了解一下微信小程序和web之间的交互。下面本篇文章给大家了解一下微信小程序页面中实现的保存图片,有需要的朋友可以参考一下,希望对你们有帮助。 背景 在小程序的webview…

    2025年3月11日
    200
  • CSS教程(一)初识CSS

    css教程(一)认识css     dreamweaver4是现今最好的网站编辑工具之一,用它来给制作网页的css样式表会更简单、更方便。本教程教你如何利用dreamweaver4在页面中加入css,你不用死记硬背的记代码标记,也不用去看很…

    2025年3月11日
    200
  • CSS教程(三)伪类——动态链接

    伪类可以看做是一种特殊的类选择符,是能被支持css的浏览器自动所识别的特殊选择符。它的最大的用处就是可以对链接在不同状态下定义不同的样式效果。 1.  语法 伪类的语法是在原有的语法里加上一个伪类(pseudo-class):selecto…

    2025年3月11日
    200

发表回复

登录后才能评论