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

    了解vue2.x的核心技术 建立前端组件化的思想 常用的vue语法 vue-router,vuex,vue-cli 使用vue-cli工具 Vue框架常用知识点 vue核心技术 集成Vue 重点看,重 ...

  2. 请解释或描述一下Django的架构

    对于Django框架遵循MVC设计,并且有一个专有名词:MVT M全拼为Model,与MVC中的M功能相同,负责数据处理,内嵌了ORM框架 V全拼为View,与MVC中的C功能相同,接收HttpReq ...

  3. [luogu 5024] 保卫王国

    Problem Here Solution 这大概是一篇重复累赘的blog吧. 最小权覆盖集=全集-最大权独立集 强制取或不取,可以通过将权值修改成inf或者-inf 然后就用动态dp的套路就行了 动 ...

  4. vue后台_纯前端实现excel导出/csv导出

    之前的文件下载功能一般是由前后端配合实现,由于项目需要,纯前端实现了一把excel的导出功能: 一.excel导出 1.安装依赖库 xlsx:这是一个功能强大的excel处理库,但是上手难度也很大,还 ...

  5. Tomcat启动过程中找不到JAVA_HOME JRE_HOME的解决方法

    转自:http://blog.sina.com.cn/s/blog_61c006ea0100l1u6.html 原文: 在XP上明明已经安装了JDK1.5并设置好了JAVA_HOME,可偏偏Tomca ...

  6. k8s 配置文件 详解

    apiVersion: v1 # [必须]版本号kind: Pod # [必选]Podmetadata: # [必选-Object]元数据 name: String # [必选] Pod的名称 nam ...

  7. android studio: 快捷键生成getter/setter方法时自动加m的问题

    平时使用Android Studio 在写实体类的时候,习惯给实体类的成员变量前面加上一个"m" 修饰符表示这是一个成员变量,这也是搞java的一种约定俗成的写法,本来这是没有问题 ...

  8. Spring AOP Log

    spring aop action中验证用户登录状态 - CASER_HDMI的博客 - CSDN博客https://blog.csdn.net/CASER_HDMI/article/details/ ...

  9. linux内核是在哪里创建1号进程的?

    1. 请看rest_init的完整代码(不看也没关系,内核版本为5.2, init/main.c) noinline void __ref rest_init(void) { struct task_ ...

  10. 小D课堂 - 零基础入门SpringBoot2.X到实战_第三节SpringBoot热部署devtool和配置文件自动注入实战_14、SpringBoot2.x使用Dev-tool热部署

    学习笔记 热部署 每次修改了代码都需要关闭应用重启 热部署就是有一个插件会监听我们应用的代码文件是否有变化,如果有变化就会有其他的类加载器加载 主要的依赖 复制到我们的pom.xml里面 安装完成ja ...