webpack入门教程--1
首先说什么是webpack：Webpack 是一个前端资源加载/打包工具。它将根据模块的依赖关系进行静态分析，然后将这些模块按照指定的规则生成对应的静态资源。
然后因为webpack有不同的版本，所以可能会出现的情况是你跟着我的来一步一步的操作，但是结果却是不一样的，这时候就需要自行百度了。（本次Webpack是基于3.8.1）
首先是需要安装webpack ，而且本地环境是需要支持node.js的。如果不会的请看这里，非常简单的操作，就像安装一般的软件一样啊。还有就是我大天朝的特殊原因，我们的npm会比较慢，所以推荐大家使用淘宝的cnpm来安装。如果不会请看这里
好了，如果你把上面的两个都安装完毕了。那就可以使用cnpm在全局安装webpack了。
--------------------------------------------------------正文开始的分割线-----------------------------------------------------------
首先是安装，在你的控制栏，或者git中输入以下命令
cnpm install webpack -g
这个时候，你需要做的就是静静的等待；如果没有报错，那就恭喜你安装成功了。
然后我们需要自己来创建一个叫做app的文件夹，可以使用git命令行的方式，也可以直接使用Windows的右键新建文件夹。我是在D盘的这个文件中创建的，我的地址是D:\webpacktest\app git创建文件夹的命令是：
mkdir app
需要注意的是，我是在webpacktest这个文件中右键然后Git Bash Here，然后输入的上面的命令，意思说我现在还是在webpacktest这个文件夹中的。
这个时候，我们就能在webpacktest文件夹中看到这个咱们新建的叫做app的这个文件夹了。
然后咱们是在app文件夹中在新建一个js文件，咱们取名是book1.js，然后在文件中写入一句JavaScript语句；
document.write("It works.");
在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命令来打包了。请在app文件夹中Git命令行中输入以下语句：
webpack book1.js bundle.js
这时候就会输出以下信息：
Hash: 2b1f001650d8d1da05d3
Version: webpack 3.8.
Time: 69ms
Asset Size Chunks Chunk Names
bundle.js 2.5 kB [emitted] main
[] ./runoob1.js bytes {} [built]
这里就是已经打包完成了。这时候咱们运行index.html文件，咱们就可以看到结果了，页面中显示一句话，“It works.”；这个时候其实就是咱们打包成功了，细心的人可能会发现，咱们在index.html中链接的就是bundle.js,而不是咱们自己写的book1.js，但是咱们通过webpack打包的形式，让我们的代码打包到了bundle.js中。
这是最最最最简单的打包，咱们主要是理解如何打包的，对打包有一个概念，以及环境的安装。咱们第二篇会讲解如何打包两个JS文件。
webpack入门教程--1的更多相关文章
- webpack入门教程之初识loader(二)
上一节我们学习了webpack的安装和编译,这一节我们来一起学习webpack的加载器和配置文件. 要想让网页看起来绚丽多彩,那么css就是必不可少的一份子.如果想要在应用中增加一个css文件,那么w ...
- Webpack 入门教程
Webpack 是一个前端资源加载/打包工具.它将根据模块的依赖关系进行静态分析,然后将这些模块按照指定的规则生成对应的静态资源. 本章节基于 Webpack3.0 测试通过. 从图中我们可以看出,W ...
- webpack入门教程
注:本文内容比较基础,供初学者快速入门参考. 更多详细信息请参考官方文档. 本文同步发布于我的博客,欢迎关注^_^ 1. 安装 npm install -g webpack 2. 基本使用 假设项目文 ...
- [转]Webpack 入门教程
本文转自:http://www.runoob.com/w3cnote/webpack-tutorial.html Webpack 是一个前端资源加载/打包工具.它将根据模块的依赖关系进行静态分析,然后 ...
- webpack入门教程--3
webpack打包还可以使用配置文件,我们先创建一个叫做webpack.config.js的文件.这里需要注意一下,这个JS文件的名字不是我们胡乱写的,也是不能更改的,因为webpack 命令执行后, ...
- webpack入门教程--2
这次是创建第二个JS文件. 我们还是在app文件夹中创建一个叫做book2.js的JS文件,并在其中输入以下代码: module.exports = "It works from book2 ...
- 前端项目自动化构建工具——Webpack入门教程
参考资料:https://www.webpackjs.com/(中文文档) https://www.webpackjs.com/(官方文档) 首先有必要说明一下,本文侧重讲解webpack基本配置 ...
- Webpack新手入门教程(学习笔记)
p.p1 { margin: 0.0px 0.0px 0.0px 0.0px; text-align: center; font: 30.0px Helvetica; color: #000000 } ...
- webpack入门文档教程
.octicon{margin-right:2px}a.tabnav-extra:hover{color:#4078c0;text-decoration:none}.tabnav-btn{margin ...
随机推荐
- MVVM简介与运用
在介绍MVVM框架之前,先给大家简单介绍一下MVC.MVP框架(由于本博文主要讲解MVVM,所以MVC和MVP将简化介绍,如果需要我将在以后的博文中补充进来). MVC框架: M-Model : 业务 ...
- NPOI 修改指定单元格字体颜色
//创建一个字体颜色 IFont font = hssfworkbook.CreateFont(); //红色 font.Color = HSSFColor.Red.Index; //样式 ICell ...
- swust oj 1051
输出利用先序遍历创建的二叉树中的指定结点的孩子结点 1000(ms) 10000(kb) 2432 / 5430 利用先序递归遍历算法创建二叉树并输出该二叉树中指定结点的儿子结点.约定二叉树结点数据为 ...
- create-react-app创建的项目中registerServiceWorker.js文件的作用
使用React官方的脚手架工具create-react-app创建的项目,目录中会存在registerServiceWorker.js这个文件,这个文件的作用是什么呢? 这个文件可以使用也可以不使用, ...
- 前端基础之BOM和DOM
关于网页交互:BOM和DOM javaScript分为ECMAScript,DOM,BOM . BOM(Browser object Model)是指浏览器对象模型,它使JavaScript有能力 ...
- 分享我在 vue 项目中关于 api 请求的一些实现及项目框架
本文主要简单分享以下四点 如何使用 axios 如何隔离配置 如何模拟数据 分享自己的项目框架 本文主要目的为以下三点 希望能够帮到一些人 希望能够得到一些建议 奉上一个使用Vue的模板框架 我只是把 ...
- MySQL乐观锁为什么可以防止并发
问题引入 本文介绍的是最常用的也是mysql默认的innoDB引擎 Read committed隔离级别下事物的并发.这种情况下的事物特点是 读:在一个事物里面的select语句 不会受到其他事物(不 ...
- [Swift]LeetCode726. 原子的数量 | Number of Atoms
Given a chemical formula (given as a string), return the count of each atom. An atomic element alway ...
- 发布core到linux
1.安装虚拟机之后,发现可以ping通但是telnet提示失败 CentOS 7.0默认使用的是firewall作为防火墙(我们需要把防火墙关掉) 查看防火墙状态 firewall-cmd --sta ...
- 第四周 IP通信基础回顾
传输层的作用:分割上层数据:在应用主机程序之间建立到端的连接:流量控制:面向连接与面向非连接. URG=1,紧急指针字段有效. 窗口字段- 占2个字节,用来让对方设置发送窗口的依据,单位为字节. TC ...