首先说什么是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. 如何在微信小程序定义全局变量、全局函数、如何实现 函数复用 模块化开发等问题详解

    1.如何定义全局数据 在app.js的App({})中定义的数据或函数都是全局的,在页面中可以通过var app = getApp();  app.function/key的方式调用,不过我们没有必要 ...

  2. 如何让浏览器支持ES6语法，步骤详细到小学生都能看懂！

    为什么ES6会有兼容性问题? 由于广大用户使用的浏览器版本在发布的时候也许早于ES6的定稿和发布,而到了今天,我们在编程中如果使用了ES6的新特性,浏览器若没有更新版本,或者新版本中没有对ES6的特性 ...

  3. WordPress独立下载页面与演示插件：xydown

    我的博客是个资源分享的网站,所以需要提供下载,之前一直是在内容里直接添加个下载链接,感觉不是很美观,而且也麻烦,所以今天找了下看看有没有可以用的下载插件 xydown,这是一款可以独立下载页面与演示的 ...

  4. [Swift]LeetCode9. 回文数 | Palindrome Number

    Determine whether an integer is a palindrome. An integer is a palindrome when it reads the same back ...

  5. [Swift]LeetCode388. 文件的最长绝对路径 | Longest Absolute File Path

    Suppose we abstract our file system by a string in the following manner: The string "dir\n\tsub ...

  6. [SQL]LeetCode595. 大的国家 | Big Countries

    SQL架构 Create table If Not Exists World (name varchar(), continent varchar(), area int, population in ...

  7. 互联网最新kafka技术面试题含答案

    1.Kafka 的设计时什么样的呢? Kafka 将消息以 topic 为单位进行归纳 将向 Kafka topic 发布消息的程序成为 producers. 将预订 topics 并消费消息的程序成 ...

  8. linux终端文本编辑神器vi的使用

    vi —— 终端中的编辑器 目标 vi 简介 打开和新建文件 三种工作模式 常用命令 分屏命令 常用命令速查图 01. vi 简介 1.1 学习 vi 的目的 在工作中,要对 服务器 上的文件进行 简 ...

  9. 【Spark篇】---SparkStreaming+Kafka的两种模式receiver模式和Direct模式

    一.前述 SparkStreamin是流式问题的解决的代表,一般结合kafka使用,所以本文着重讲解sparkStreaming+kafka两种模式. 二.具体 1.Receiver模式    原理图 ...

  10. 【Docker】(1)---Docker入门篇

    Docker入门篇 简单一句话: Docker 是一个便携的应用容器. 一.Docker的作用 网上铺天盖地的是这么说的: (1) Docker 容器的启动可以在秒级实现,这相比传统的虚拟机方式要快得 ...