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. (26)打鸡儿教你Vue.js

    weex框架的使用 1.weex开发入门 2.weex开发环境搭建 3.掌握部分weex组件模块 4.了解一些vue基本常见语法 5.制作一个接近原生应用体验的app weex介绍 安装开发环境 We ...

  2. 生活中需要一台mac本子

    用了好多年的windows系统,各种快捷键玩得飞起.当时对mac笔记本的印象就是. mac本子好高大上,搞设计的人才会去用的.(这个也是我听其他人说的) 在当时公司搞IOS开发的人中,面对这个高大上的 ...

  3. 本地Windows远程桌面连接阿里云Ubuntu服务器

    本地Windows远程桌面连接阿里云Ubuntu 16.04服务器: 1.目的:希望通过本地的Windows远程桌面连接到阿里云的Ubuntu服务器,通过远程桌面图形界面的方式操作服务器. 2.条件: ...

  4. BufferedReader和BufferedWriter简介

    BufferedReader和BufferedWriter简介 为了提高字符流读写的效率,引入了缓冲机制,进行字符批量的读写,提高了单个字符读写的效率.BufferedReader用于加快读取字符的速 ...

  5. service mesh,linkerd,sidecar,apigateway

    对于大规模部署微服务(微服务数>1000).内部服务异构程度高(交互协议/开发语言类型>5)的场景,使用service mesh是合适的.但是,可能大部分开发者面临的微服务和内部架构异构复 ...

  6. ORACLE数据库特性

    目录 ORACLE数据库特性 一.学习路径 二.ORACLE的进程情况 三.ORACLE服务器的启动和关闭 (SQLPLUS环境挂起和恢复等) 连接Oracle的几种方式 四.几个关注点 1. ORA ...

  7. sass登陆页面实例

    sass登陆页面实例 一.总结 一句话总结: sass使用非常方便:使用就是将sass转化为css引入,并且动态监听让sass转化为css,可以很方便的所见即所得 1.sass安装? npm就可以按照 ...

  8. 多层If语句 和 表格驱动 的对比

    网文提到表格驱动,总喜欢拿一层if做例子,然而这样未免也太简单. 下文是三层缩进的if和表驱动比较,大家可自行判断优劣. 业务是这样的,某景点分旺季票价和淡季票价,淡季票为旺季的一半,15岁以下孩子再 ...

  9. Git - 高级合并

    Git - 高级合并https://git-scm.com/book/zh/v2/Git-%E5%B7%A5%E5%85%B7-%E9%AB%98%E7%BA%A7%E5%90%88%E5%B9%B6 ...

  10. docker 安装redis 并配置外网可以访问

    1, docker 拉去最新版本的redis docker pull redis #后面可以带上tag号, 默认拉取最新版本 2, docker安装redis container 安装之前去定义我们的 ...