首先说什么是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的更多相关文章

  1. webpack入门教程之初识loader(二)

    上一节我们学习了webpack的安装和编译,这一节我们来一起学习webpack的加载器和配置文件. 要想让网页看起来绚丽多彩,那么css就是必不可少的一份子.如果想要在应用中增加一个css文件,那么w ...

  2. Webpack 入门教程

    Webpack 是一个前端资源加载/打包工具.它将根据模块的依赖关系进行静态分析,然后将这些模块按照指定的规则生成对应的静态资源. 本章节基于 Webpack3.0 测试通过. 从图中我们可以看出,W ...

  3. webpack入门教程

    注:本文内容比较基础,供初学者快速入门参考. 更多详细信息请参考官方文档. 本文同步发布于我的博客,欢迎关注^_^ 1. 安装 npm install -g webpack 2. 基本使用 假设项目文 ...

  4. [转]Webpack 入门教程

    本文转自:http://www.runoob.com/w3cnote/webpack-tutorial.html Webpack 是一个前端资源加载/打包工具.它将根据模块的依赖关系进行静态分析,然后 ...

  5. webpack入门教程--3

    webpack打包还可以使用配置文件,我们先创建一个叫做webpack.config.js的文件.这里需要注意一下,这个JS文件的名字不是我们胡乱写的,也是不能更改的,因为webpack 命令执行后, ...

  6. webpack入门教程--2

    这次是创建第二个JS文件. 我们还是在app文件夹中创建一个叫做book2.js的JS文件,并在其中输入以下代码: module.exports = "It works from book2 ...

  7. 前端项目自动化构建工具——Webpack入门教程

    参考资料:https://www.webpackjs.com/(中文文档)   https://www.webpackjs.com/(官方文档) 首先有必要说明一下,本文侧重讲解webpack基本配置 ...

  8. Webpack新手入门教程(学习笔记)

    p.p1 { margin: 0.0px 0.0px 0.0px 0.0px; text-align: center; font: 30.0px Helvetica; color: #000000 } ...

  9. webpack入门文档教程

    .octicon{margin-right:2px}a.tabnav-extra:hover{color:#4078c0;text-decoration:none}.tabnav-btn{margin ...

随机推荐

  1. Oracle--配置并保存PL/SQL Developer界面

    之前一直用SQL Server,现在刚接触Oracle,用PL/SQL Developer 客户端,在设置自已的使用习惯后保存界面 PL/SQL Developer初始界面布局,当你设置后,重新启动, ...

  2. 一个自己研究出来的字符串匹配算法-k子串算法

    前言 最近工作中需要写一个算法,而写完这个算法我却发现了一个很有意思的事情.需要的这个算法是这样的:对于A,B两个字符串,找出最多K个公共子串,使得这K个子串长度和最大.百度之没有这样的算法,然后就开 ...

  3. [SQL]LeetCode181. 超过经理收入的员工 | Employees Earning More Than Their Managers

    SQL架构 Create table If Not Exists Employee (Id ), Salary int, ManagerId int) Truncate table Employee ...

  4. [Swift]LeetCode966.元音拼写检查器 | Vowel Spellchecker

    Given a wordlist, we want to implement a spellchecker that converts a query word into a correct word ...

  5. Python内置函数(15)——dict

    英文文档: class dict(**kwarg) class dict(mapping, **kwarg) class dict(iterable, **kwarg) Return a new di ...

  6. JavaDBF：保存行情实时数据到DBF文件

    JavaDBF.jar其实很早都不再更新了,在日新月异的科技圈算得上远古上神的jar包,早该身归混沌了. 但我们的项目要用到,因为之前做的大宗期货交易行情的分析文件依然是dbf文件,没有办法,还得用 ...

  7. GitLab 社区版 11.0.2用户管理教程

    Gitlab地址:http://xx.xx.xx.xx/users/sign_in 登录之后,主界面 右上角功能按钮,分别为管理区域.新建.问题.合并请求.待办事件.个人设置 选择管理区域按钮 可以根 ...

  8. Python爬虫入门教程 33-100 《海王》评论数据抓取 scrapy

    1. 海王评论数据爬取前分析 海王上映了,然后口碑炸了,对咱来说,多了一个可爬可分析的电影,美哉~ 摘录一个评论 零点场刚看完,温导的电影一直很不错,无论是速7,电锯惊魂还是招魂都很棒.打斗和音效方面 ...

  9. 使用Redmine的PHP API时，如何判断需求是否为原子需求

    使用Redmine的PHP API时,如何判断需求是否为原子需求 使用redmine的PHP接口时,怎样才能判断需求是否为原子需求呢,下面给出具体的做法: /** * 判断是否为原子需求, 即是否依然 ...

  10. WebAssembly完全入门——了解wasm的前世今身

    前言 接触WebAssembly之后,在google上看了很多资料.感觉对WebAssembly的使用.介绍.意义都说的比较模糊和笼统.感觉看了之后收获没有达到预期,要么是文章中的例子自己去实操不能成 ...