Demo0操作手册

本Demo演示不使用配置文件的入门级使用

准备环境

初始化环境, cd到demo目录之后, 执行如下命令:

npm init -y
npm install webpack webpack-cli -D

Demo

新建src目录, 在里面创建index.js, 内容如下:

function hi() {
console.log('Hello Webpack!');
}
hi();

接下来我们使用wepack对该文件进行打包:

webpack

打包完之后, 可以看到根目录下多出了一个dist目录, 里面多了一个main.js的文件.

node src/index.js
node dist/main.js
# 输出内容皆为:Hello Webpack!

在上述操作中, 我们没有进行任何配置, 直接运行了webpack进行了打包. 这是因为我使用了默认入口文件‘./src/index.js’, 而他生成了默认输出文件‘./dist/main.js’.

start use webpack的更多相关文章

  1. js学习笔记:webpack基础入门(一)

    之前听说过webpack,今天想正式的接触一下,先跟着webpack的官方用户指南走: 在这里有: 如何安装webpack 如何使用webpack 如何使用loader 如何使用webpack的开发者 ...

  2. webpack之傻瓜式教程

    接触webpack也有挺长一段时间了,公司的项目也是一直用着webpack在打包处理,但前几天在教新人的情况下,遇到了一个问题,那就是:尽管网上的webpack教程满天飞,但是却很难找到一个能让新人快 ...

  3. 细说前端自动化打包工具--webpack

    背景 记得2004年的时候,互联网开发就是做网页,那时也没有前端和后端的区分,有时一个网站就是一些纯静态的html,通过链接组织在一起.用过Dreamweaver的都知道,做网页就像用word编辑文档 ...

  4. Webstorm+Webpack+echarts构建个性化定制的数据可视化图表&&两个echarts详细教程(柱状图,南丁格尔图)

    Webstorm+Webpack+echarts   ECharts 特性介绍 ECharts,一个纯 Javascript 的图表库,可以流畅的运行在 PC 和移动设备上,兼容当前绝大部分浏览器(I ...

  5. 使用webstorm+webpack构建简单入门级“HelloWorld”的应用&&引用jquery来实现alert

    使用webstorm+webpack构建简单入门级"HelloWorld"的应用&&构建使用jquery来实现 1.首先你自己把webstorm安装完成. 请参考这 ...

  6. webpack入门教程之Hello webpack(一)

    webpack入门教程系列为官网Tutorials的个人译文,旨在给予想要学习webpack的小伙伴一个另外的途径.如有不当之处,请大家指出. 看完入门教程系列后,你将会学习到如下内容: 1.如何安装 ...

  7. webpack的使用

    1.webpack是什么? 打包前端项目的工具(为项目提高逼格的东西). 2.webpack的基本命令 webpack#最基本的启动webpack命令 webpack-w #提供watch方法,实时进 ...

  8. Webpack 配置摘要

    open-browser-webpack-plugin 自动打开浏览器 html-webpack-plugin 通过 JS 生成 HTML webpack.optimize.UglifyJsPlugi ...

  9. Vue + Webpack + Vue-loader 系列教程(2)相关配置篇

    原文地址:https://lvyongbo.gitbooks.io/vue-loader/content/ 使用预处理器 在 Webpack 中,所有的预处理器需要和一个相应的加载器一同使用.vue- ...

  10. Vue + Webpack + Vue-loader 系列教程(1)功能介绍篇

    原文地址:https://lvyongbo.gitbooks.io/vue-loader/content/ Vue-loader 是什么? vue-loader 是一个加载器,能把如下格式的 Vue ...

随机推荐

  1. 内核中通过进程PID获取进程的全部路径

    目录 一丶简介 二丶原理 1.原理 2.代码实现. 一丶简介 我们遇到的Dos路径.如果想转化为NT路径(也就是 C:\xxxx)类似的格式 需要自己实现. 具体原理如下: 二丶原理 1.原理 1.使 ...

  2. 1、ES6声明变量的方式

    1.es5的声明方式var的问题 1)是var在同一个作用域内部,是可以重复声明一个变量的,后面的会把前面的覆盖掉 2)var存在变量提升到的问题,就是在使用var声明变量前是可以先使用此变量的 2. ...

  3. Git是怎么Ignore文件的?

    Git is one of the most popular version control systems (VCS) available, especially thanks to hosting ...

  4. Android系统分区

    Android系统开发时,经常会遇到添加或者调整系统分区大小的问题,下面以mstar的一款产品为例进行分析: (1)mount指令可以查看到板子中挂在的分区,主要关注ext4类型分区,例如tvserv ...

  5. Zygote启动及其作用

    目录 1.Zygote简介 2.Zygote进程如何启动 2.1 init.zygote64_32.rc文件 2.2 查看ps信息 2.3 启动 3.Zygote作用 3.1 启动system_ser ...

  6. css3的选择器有哪几种?

    *通用选择器,ID选择器 ,.类选择器class,标签选择器,标签组合选择器,伪类选择器:,+相邻元素选择器,>子元素选择器,~同辈选择器,x[title]属性选择器[type="bu ...

  7. orchestrator的安装和配置

    介绍 在MySQL高可用架构中,目前使用比较多的是Percona的PXC,Galera以及MySQL 5.7之后的MGR等,其他的还有的MHA,今天介绍另一个比较好用的MySQL高可用复制管理工具:O ...

  8. Phpstudy 无法启动mysql

    原因: 两个mysql版本冲突 本地已经有一个mysql服务(3306)默认开启,再装了phpstudy又会自带一个mysqlla服务(3306) phpstudy启动后会启动mysqlla  发现3 ...

  9. C# Area 双重路由

    在WebApi项目里面 一般除了接口, 还有管理端...一些乱七八糟的,你想展示的东西, 一种做法是分开写: 比如管理后台一个项目, 然后接口一个, 然后页面一个, 其实这样做也可以,但是这么做, 无 ...

  10. 磁盘I/O高居不下,通过什么来查看占用I/O的进程?

    iotop命令是一个用来监视磁盘I/O使用状况的top类工具.iotop具有与top相似的UI,其中包括PID.用户.I/O.进程等相关信息.Linux下的IO统计工具如iostat,nmon等大多数 ...