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. A. Vasya and Book ( Codeforces Educational Codeforces Round 55 )

    题意:当前在看书的第 x 页,每次可以向前或者向后翻 d 页,这个书一共 n 页,问能否用最小操作翻到第 y 页. 题解:三种情况:1.直接翻能到的一定最短. 2.先翻到第一页,然后往后翻,翻到第 y ...

  2. 64位内核开发第四讲,查看SSDT表与showSSDT表

    目录 SSDt表与ShadowSSDT表的查看. 一丶SSDT表 1.什么是SSDT表 2.查看步骤 二丶ShadowSSDT表 1.什么是ShadowSSDT表 2.如何查看. 三丶工具介绍 SSD ...

  3. 贪心算法训练(九)——Best Cow Line(字典序最小问题)

    原题链接:Best Cow Line 1. 问题描述 2. 输入 6 A C D B C B 3. 输出 ABCBCD 4.思路分析 不断地取原字符串 S 中开头和末尾比较小的字符串放到 T 的末尾 ...

  4. Pytest权威教程22-优质集成实践

    目录 优质集成实践 使用pip安装包 Python测试发现的约定 选择测试布局结构/导入规则 在应用程序代码外测试 测试作为应用程序代码的一部分 tox 返回: Pytest权威教程 优质集成实践 使 ...

  5. CF1205题解

    B 最高有\(64\)位,当\(n\le 128\)时,最坏情况形成不了三元环,\(floyed\)暴力做 否则直接输出\(3\) C 题意的\(n\)均为奇数,设\((i,j)\),把\(i+j\) ...

  6. ssh 连接云主机错误

    ssh链接云主机: ssh root@123.59.xx.xx 报错:THE AUTHENTICITY OF HOST XX CAN’T BE ESTABLISHED 解决办法: ssh -o Str ...

  7. [FUZZ]文件上传fuzz字典生成脚本—使用方法

    文件上传fuzz字典生成脚本-使用方法 原作者:c0ny1 项目地址:https://github.com/c0ny1/upload-fuzz-dic-builder 项目预览效果图: 帮助手册: 脚 ...

  8. js判断是不是在微信浏览器打开?

    is_weixin:function(){      var ua = window.navigator.userAgent.toLowerCase();      if (ua.match(/Mic ...

  9. Fluent批处理之--windows下多个任务的计算 【转载】

    转载自http://jingcao830828.blog.163.com/blog/static/10320833620103633624506/ 1.同维多任务的连续计算 对于工程应用来说,计算精度 ...

  10. html中a标签的常见用法

    html中a标签的常见用法 一.总结 一句话总结: a.页面跳转 b.使用锚点定位 c.下载文件 二.html中<a>标签的用法 转自或参考:html中<a>标签的用法http ...