• linkedu视频
  • 平面设计
  • 电脑入门
  • 操作系统
  • 办公应用
  • 电脑硬件
  • 动画设计
  • 3D设计
  • 网页设计
  • CAD设计
  • 影音处理
  • 数据库
  • 程序设计
  • 认证考试
  • 信息管理
  • 信息安全
菜单
linkedu.com专业计算机教程网站
  • 网页制作
  • 数据库
  • 程序设计
  • 操作系统
  • CMS教程
  • 游戏攻略
  • 脚本语言
  • 平面设计
  • 软件教程
  • 网络安全
  • 电脑知识
  • 服务器
  • 视频教程
  • html/xhtml
  • html5
  • CSS
  • XML/XSLT
  • Dreamweaver教程
  • Frontpage教程
  • 心得技巧
  • bootstrap
  • vue
  • AngularJS
  • HBuilder教程
  • css3
  • 浏览器兼容
  • div/css
  • 网页编辑器
  • axure
您的位置:首页 > 网页设计 >心得技巧 > Webpack 入门教程

Webpack 入门教程

作者:Blog_BC的博客 字体:[增加 减小] 来源:互联网 时间:2017-09-04

本文主要包含webpack入门,webpack安装教程,webpack菜鸟教程,webpack 教程,webpack视频教程等相关知识,Blog_BC的博客希望在学习及工作中可以帮助到您

安装 Webpack

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

由于 npm 安装速度慢,本教程使用了淘宝的镜像及其命令 cnpm,安装使用介绍参照:使用淘宝 NPM 镜像。

使用 cnpm 安装 webpack:

cnpm install webpack -g

创建项目

接下来我们创建一个目录 app:

mkdir app

在 app 目录下添加 runoob1.js 文件,代码如下:

app/runoob1.js 文件

document.write("It works.");

在 app 目录下添加 index.html 文件,代码如下:

app/index.html 文件

<html> <head> <meta charset="utf-8"> </head> <body> <script type="text/javascript" src="bundle.js" charset="utf-8"></script> </body> </html>

接下来我们使用 webpack 命令来打包:

webpack runoob1.js bundle.js

执行以上命令会编译 runoob1.js 文件并生成bundle.js 文件,成功后输出信息如下所示:

Hash: a41c6217554e666594cb
Version: webpack 1.12.13
Time: 50ms
    Asset     Size  Chunks             Chunk Names
bundle.js  1.42 kB       0  [emitted]  main
   [0] ./runoob1.js 29 bytes {0} [built]

在浏览器中打开 index.html,输出结果如下:

创建第二个 JS 文件

接

您可能想查找下面的文章:

  • Webpack 入门教程

相关文章

  • 2018-08-23用一个小案例,教你面对那些无聊细碎的设计需求
  • 2018-08-23如何做好用户故事地图?来看蚂蚁金服的实战案例!
  • 2018-08-23提前做好这四件事,帮你快速通过设计评审
  • 2017-08-06将rar文件隐藏在图片中的实现方法
  • 2017-08-06水平滚动的网站设计 小结
  • 2017-08-06下拉菜单和滑动菜单设计实例
  • 2018-08-23逐渐热起来的6月,这3个设计趋势开始逐步流行
  • 2018-08-23平面设计中如何留给别人最好的第一印象?
  • 2018-08-23设计表单的时候,为什么悬浮式标签体验更好?
  • 2017-08-06IE8兼容视图(IE7 mode)与独立IE7的区别详解

文章分类

  • html/xhtml
  • html5
  • CSS
  • XML/XSLT
  • Dreamweaver教程
  • Frontpage教程
  • 心得技巧
  • bootstrap
  • vue
  • AngularJS
  • HBuilder教程
  • css3
  • 浏览器兼容
  • div/css
  • 网页编辑器
  • axure

最近更新的内容

    • 总监经验!视觉设计师必须知道的交互设计模式
    • 优设专访!优设×追波人气第一名的设计大神Mike
    • 2017年天猫双11海报全集,为52家品牌创意疯狂打Call!
    • 如何巧用Slogan,让Banner变得更有设计感!
    • 从上亿人使用的阿里收藏夹迭代过程,总结视觉设计师应该拥有的体验思维
    • 学会这个方法后,再多的设计需求都不怕!
    • 如何转型UXD?来看阿里设计师的实战经验!
    • 「这个控件叫什么」系列之Notice Bar/通告栏
    • 学会给配色做减法,让你的设计更加高端!
    • 网页设计师需要的知识体系有哪些

关于我们 - 联系我们 - 免责声明 - 网站地图

©2020-2025 All Rights Reserved. linkedu.com 版权所有