学习一个新的东西，首先第一步就是安装，有时候会遇到各种奇葩的问题

至于什么是webpack我这里就不介绍了，请参考官网：https://github.com/webpack/webpack

安装

前提：因为webpack是一个基于node的项目，所以首先需要确保你的电脑里面已经安装了node.js，以及npm。在这里我使用的版本是：node：v5.8.0 ，npm：3.7.3,若是版本问题，请更新到最新版。
若是有出现npm安装过慢的情况，可以使用nrm这个项目来进行npm源地址的切换。

首先我们直接进行全局的安装，运行如下命令：npm install webpack -g，可能需要一点时间。

安装成功后，在命令行输入webpack -h即可查看当前安装的版本信息。以及可以使用的指令。

当然，我们都应该将webapck安装到当前的项目依赖中，此时就可以使用项目的本这样就可以使用项目本地版本的 Webpack。

# 确保已经进入项目目录

# 确定已经有 package.json，没有就通过

npm init

# 创建，直接一路回车就好，后面再来详细说里面的内容。

# 安装 webpack 依赖

npm install webpack --save-dev

# 简单的写法：-_-,缩写形式

npm i webpack -D

# –save：模块名将被添加到dependencies，可以简化为参数-S。

# –save-dev: 模块名将被添加到devDependencies，可以简化为参数-D。

　　

安装好之后我们的package.json的目录应该是这样的：

{

  "name": "webpack-learn",

  "version": "1.0.0",

  "description": "learn",

  "main": "index.js",

  "scripts": {

    "test": "echo \"Error: no test specified\" && exit 1"

  },

  "keywords": [

    "learn"

  ],

  "author": "lanyan",

  "license": "ISC"

}

　　

首先创建一个静态页面 index.html 和一个 JS 入口文件 entry.js,（这里你想用什么名字都可以，只需要在打包的时候读取文件为该名字就好，不过，到时候就知道这个名字的含义啦！）：

<html>

<head>

    <meta charset="utf-8">

</head>

<body>

    <h1 id="app"></h1>

    <script src="bundle.js"></script>

    <!-- 注意这里引入的不是我们创建的文件，而是用webpack生成的文件 -->

</body>

</html>

　　

/*** entry.js ***/

document.getElementById('app').innerHTML="这是我第一个打包成功的程序";

　　

文件都已经创建成功了，那么就开始我们的打包吧！

webpack entry.js bundle.js

在浏览器中打开index.html，就能看到我们设置的文字啦！：这是我第一个打包成功的程序

这么简单的功能直接在html中引入不就好了吗？确实是这样的，不过我们这才刚刚开始嘛，不要急。

下面我们再来增加一个文件，名为first.js内容如下：

var h2= document.createElement("h2")

h2.innerHTML="不是吧，那么快第二个打包程序啦！";

document.body.appendChild(h2);

　　更改 entry.js:

document.getElementById('app').innerHTML="这是我第一个打包成功的程序";

//添加

require("./first.js");

　　再来进行一次重复的工作，再打包一次。webpack entry.js bundle.js，如果成功，打包过程会显示日志：

Hash: b1cfe7ff9d75ce235dc9

Version: webpack 1.12.14

Time: 54ms

    Asset     Size  Chunks             Chunk Names

bundle.js  1.82 kB       0  [emitted]  main

   [0] ./entry.js 208 bytes {0} [built]

   [1] ./first.js 145 bytes {0} [built]

　　

Webpack 会分析入口文件，解析包含依赖关系的各个文件。这些文件（模块）都打包到 bundle.js 。Webpack 会给每个模块分配一个唯一的 id 并通过这个 id 索引和访问模块。在页面启动时，会先执行 entry.js 中的代码，其它模块会在运行 require 的时候再执行。

刷新浏览器，可以发现我们的刚刚的代码已经生效，又有了新的文字出现。

webpack入坑之旅（一）入门安装的更多相关文章

  1. webpack入坑之旅（三）webpack.config入门

    这是一系列文章,此系列所有的练习都存在了我的github仓库中vue-webpack,在本人有了新的理解与认识之后,会对文章有不定时的更正与更新.下面是目前完成的列表: webpack入坑之旅(一)不 ...

  2. webpack入坑之旅（二）loader入门

    这是一系列文章,此系列所有的练习都存在了我的github仓库中vue-webpack 在本人有了新的理解与认识之后,会对文章有不定时的更正与更新.下面是目前完成的列表: webpack入坑之旅(一)不 ...

  3. webpack入坑之旅（六）配合vue-router实现SPA

    这是一系列文章,此系列所有的练习都存在了我的github仓库中vue-webpack,在本人有了新的理解与认识之后,会对文章有不定时的更正与更新.下面是目前完成的列表: webpack入坑之旅(一)不 ...

  4. webpack入坑之旅（五）加载vue单文件组件

    这是一系列文章,此系列所有的练习都存在了我的github仓库中vue-webpack,在本人有了新的理解与认识之后,会对文章有不定时的更正与更新.下面是目前完成的列表: webpack入坑之旅(一)不 ...

  5. webpack入坑之旅（四）扬帆起航

    这是一系列文章,此系列所有的练习都存在了我的github仓库中vue-webpack,在本人有了新的理解与认识之后,会对文章有不定时的更正与更新.下面是目前完成的列表: webpack入坑之旅(一)不 ...

  6. webpack入坑之旅（一）不是开始的开始

    最近学习框架,选择了vue,然后接触到了vue中的单文件组件,官方推荐使用 Webpack + vue-loader构建这些单文件 Vue 组件,于是就开始了webpack的入坑之旅.因为原来没有用过 ...

  7. webpack入坑之旅

    转自: http://guowenfh.github.io/2016/03/24/vue-webpack-01-base/ http://guowenfh.github.io/2016/03/25/v ...

  8. vue+ vue-router + webpack 踩坑之旅

    说是踩坑之旅 其实是最近在思考一些问题 然后想实现方案的时候,就慢慢的查到这些方案   老司机可以忽略下面的内容了 1)起因  考虑到数据分离的问题  因为server是express搭的   自然少 ...

  9. ElasticSearch入坑指南之概述及安装

    ---恢复内容开始--- ElasticSearch入坑指南之概述及安装 了解ElasticSearch ElasticSearch(简称ES)基于Lucene的分布式全文检索引擎.使用ES可以实现近 ...

随机推荐

  1. Ubuntu 14.04 安装最新稳定版Nginx 1.6.0

    如果已经安装,请先卸载sudo apt-get remove nginx最新的稳定版Nginx 1.6.0在ubuntuupdates ppa库中提供,网址http://www.ubuntuupdat ...

  2. [转]Hibernate查询对象所有字段，单个字段 ，几个字段取值的问题

    原文地址:http://www.ablanxue.com/prone_3552_1.html 1. 查询整个映射对象所有字段 Java代码 //直接from查询出来的是一个映射对象,即:查询整个映射对 ...

  3. 【BZOJ 2118】墨墨的等式

    http://www.lydsy.com/JudgeOnline/problem.php?id=2118 最短路就是为了找到最小的$x$满足$x=k×a_{min}+d,0≤d<a_{min}$ ...

  4. 哈希 poj 1480

    计算可能的数目 a3*x3^3+a4*x4^3+a5*x5^5=-(a1*x1^3+a2*x2^3); 列举右边的  结果存到数组  z[i] 和为i的右边等式的数目 如果和小于0  +2500000 ...

  5. epon e8-c HG220GS超级密码破解

    网上找了很多管理电信e8-c的破解资料,大多都是明文密码,而hg220gs则为加密的密码,找来找去最后终于找到加密方式了base64,真心不容易 下面从其他博文中转载过来留着记录 低端hack.主要是 ...

  6. 使用HTML来生产Android界面

    使用HTML来生产Android界面 (2013-03-11 17:50:39) 转载▼   分类: Android 1. HTML 开发软件界面   因为android软件开发分工目前还没有细化,程 ...

  7. ioc和aop的理解(Spring就是一个轻量级的控制反转（IoC）和面向切面（AOP）的容器框架。)

    IoC,(Inverse of Control)控制反转,其包含两个内容:其一是控制,其二是反转.在程序中,被调用类的选择控制权从调用它的类中移除,转交给第三方裁决.这个第三方指的就是Spring的容 ...

  8. 做哪些优化，才能让 UITabelView 更顺滑？(转)

    原文出处: Alexander Orlov   译文出处:南峰子(@南峰子_老驴) 转载自:ios.jobbole.com/83731/ 我已经在iOS这个最好的移动平台上有几年的开发经验了.在这期间 ...

  9. UML类图中的六种关系及实例

    前言: 设计模式是一种对于面向对象语言(C#,C++,Java)的高级应用.其思维体现出的是真正的代码设计.每一种模式都堪称巧妙!但基于各种设计模式,这里少不了基本的类图设计,本文简要列出6种关系,及 ...

  10. Event&Condition pyton

    Event 一个线程需要根据另外一个线程的状态来确定自己的下一步操作,需要调用threading库中Event对象:Event包含一个可由线程设置的信号标志,在初始情况下,event对象的标志位为假( ...