webpack入坑之旅（一）入门安装
学习一个新的东西，首先第一步就是安装，有时候会遇到各种奇葩的问题
至于什么是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入坑之旅（一）入门安装的更多相关文章
- webpack入坑之旅（三）webpack.config入门
这是一系列文章,此系列所有的练习都存在了我的github仓库中vue-webpack,在本人有了新的理解与认识之后,会对文章有不定时的更正与更新.下面是目前完成的列表: webpack入坑之旅(一)不 ...
- webpack入坑之旅（二）loader入门
这是一系列文章,此系列所有的练习都存在了我的github仓库中vue-webpack 在本人有了新的理解与认识之后,会对文章有不定时的更正与更新.下面是目前完成的列表: webpack入坑之旅(一)不 ...
- webpack入坑之旅（六）配合vue-router实现SPA
这是一系列文章,此系列所有的练习都存在了我的github仓库中vue-webpack,在本人有了新的理解与认识之后,会对文章有不定时的更正与更新.下面是目前完成的列表: webpack入坑之旅(一)不 ...
- webpack入坑之旅（五）加载vue单文件组件
这是一系列文章,此系列所有的练习都存在了我的github仓库中vue-webpack,在本人有了新的理解与认识之后,会对文章有不定时的更正与更新.下面是目前完成的列表: webpack入坑之旅(一)不 ...
- webpack入坑之旅（四）扬帆起航
这是一系列文章,此系列所有的练习都存在了我的github仓库中vue-webpack,在本人有了新的理解与认识之后,会对文章有不定时的更正与更新.下面是目前完成的列表: webpack入坑之旅(一)不 ...
- webpack入坑之旅（一）不是开始的开始
最近学习框架,选择了vue,然后接触到了vue中的单文件组件,官方推荐使用 Webpack + vue-loader构建这些单文件 Vue 组件,于是就开始了webpack的入坑之旅.因为原来没有用过 ...
- webpack入坑之旅
转自: http://guowenfh.github.io/2016/03/24/vue-webpack-01-base/ http://guowenfh.github.io/2016/03/25/v ...
- vue+ vue-router + webpack 踩坑之旅
说是踩坑之旅 其实是最近在思考一些问题 然后想实现方案的时候,就慢慢的查到这些方案 老司机可以忽略下面的内容了 1)起因 考虑到数据分离的问题 因为server是express搭的 自然少 ...
- ElasticSearch入坑指南之概述及安装
---恢复内容开始--- ElasticSearch入坑指南之概述及安装 了解ElasticSearch ElasticSearch(简称ES)基于Lucene的分布式全文检索引擎.使用ES可以实现近 ...
随机推荐
- [转]扩展RBAC用户角色权限设计方案
原文地址:http://www.iteye.com/topic/930648 RBAC(Role-Based Access Control,基于角色的访问控制),就是用户通过角色与权限进行关联.简单地 ...
- JavaScript的由来， 浏览器的20年
在很久以前那时候还没有Yahoo,Google....人们还在用28.8kbit/s的"猫"上网, 用户注册或者登录的时候所有的验证都是在服务器验证的, 如果用户注册的时候用户名或 ...
- NHibernate中session.update()及session.merge()的区别
今天的工作中遇到一个奇怪的问题,如下: "a different object with the same identifier value was already associated w ...
- 【Codeforces 722C】Destroying Array (数据结构、set)
题意 输入一个含有 n(1≤n≤100000) 个非负整数的 a 数组和一个 1-n 的排列 p 数组,求每次删除 a[p[i]] 后,最大连续子段和(不能跨越被删除的)是多少? 分析 因为都是非负整 ...
- UIScrollView 实践经验(转)
转载自:http://tech.glowing.com/cn/practice-in-uiscrollview/ UIScrollView(包括它的子类 UITableView 和 UICollect ...
- Oracle触发器实例（网搜）
触发器使用教程和命名规范 目 录触发器使用教程和命名规范 11,触发器简介 12,触发器示例 23,触发器语法和功能 34,例一:行级触发器之一 45,例二:行级触发器之二 46,例三:INSTEA ...
- Scala 递归学习的例子
为了学习Spark,我开始了学习Scala.加油! 递归的一个题目: 代码: // Why x is Float, but when we use 3.0 for example, it return ...
- 【BZOJ-1367】sequence 可并堆+中位数
1367: [Baltic2004]sequence Time Limit: 20 Sec Memory Limit: 64 MBSubmit: 932 Solved: 348[Submit][S ...
- 【BZOJ-4521】手机号码 数位DP
4521: [Cqoi2016]手机号码 Time Limit: 10 Sec Memory Limit: 512 MBSubmit: 303 Solved: 194[Submit][Status ...
- vijos2001 xor-sigma
本文版权归ljh2000和博客园共有,欢迎转载,但须保留此声明,并给出原文链接,谢谢合作. 本文作者:ljh2000作者博客:http://www.cnblogs.com/ljh2000-jump/转 ...