webpack 2安装到入门

前言：如今webpack工具在前端领域非常受欢迎，我 今天就开始学习一下，安装和使用 webpack（从0开始，如有错误望大家谅解），我的node版本是 v7.7.1  npm版本 4.1.2，如何安装这两个node环境，大家可以参考安装Node和NPM( MAC 系统 )(http://blog.csdn.net/xiaowoniuqiren/article/details/60764977)来配置

• webpack 工具的好处
  1、 切分他的依赖树，按需加载
  2、 缩短初始化加载时间
  3、 任何静态模块都可以视为一个模块在项目中引用
  4、 整合第三方类库，并且把第三方的类库作为一个模块来引用
  -5、可以自定义打包逻辑的能力
  -6、适合大型项目
  这些是webpack的要实现的目的，看这些目的就知道webpack的好处和方便之处，具体想要了解更多的webpack 可以查看webpack中文指南或者webpack 官方文档

• 安装
  在有node和npm环境的机器上可以直接使用命令行安装webpack

  安装webpack（非全局）

  1、在桌面上创建一个 webpack文件夹
  2、进入到webpack文件
  3、创建package.json 文件，代码自动创建

npm init

package.json文件

{
  "name": "webpack",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "dependencies": {
    "webpack": "^2.2.1"
  },
  "devDependencies": {},
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC"
}

4、 安装webpack

安装的过程中可能会很慢，一直卡在那转圈。原因你懂得，我们上的是一个局域网，外面的世界不是你想看就能看的。。。。。如果你像我一样，不能FQ，那你就先暂停吧。执行下面的语句

npm config set registry https://registry.npm.taobao.org

```
// 安装Webpack
npm install --save-dev webpack

    　用一下国内的良心镜像。你会发现再执行 npm install webpack --save-dev 会很快的安装完毕。安装完成之后，你会发现，项目中多了一个 node_modules文件夹里面有一个 .bin和webpack文件夹。此时我们打开终端，输入 webpack会提示 webpak不是内部命令。不用怕，因为这个执行文件在你的项目下的 node_modules\.bin
    　下面，只要将这个路径配入 环境变量的 path中去 ，就可以愉快的使用 webpack了！



**注意**：最好先配置package.json文件，我在安装的时候 3和4 反了，好久都没有安装成功

## 简单使用 ##

     1、回到之前的空文件夹，并在里面创建两个文件夹,app文件夹和public文件夹，app文件夹用来存放原始数据和我们将写的JavaScript模块，public文件夹用来存放准备给浏览器读取的数据（包括使用webpack生成的打包后的js文件以及一个index.html文件）。在这里还需要创建三个文件，index.html 文件放在public文件夹中，两个js文件（Greeter.js和main.js）放在app文件夹中，此时项目结构如下图所示

Greeter.js 代码
作用：只包括一个用来返回包含问候信息的html元素的函数。

// Greeter.js
module.exports = function() {
var greet = document.createElement(‘div’);
greet.textContent = “Hi there and greetings!”;
return greet;
};

main.js代码
作用：用来把Greeter模块返回的节点插入页面。

//main.js
var greeter = require(‘./Greeter.js’);
document.getElementById(‘root’).appendChild(greeter());

html代码
作用：文件只有最基础的html代码，它唯一的目的就是加载打包后的js文件（bundle.js）

Webpack Sample Project

    **注意**你会发现没有创建bundle.js，不用担心，webpack会自动创建

2、简单使用Webpack
    只需要指定一个入口文件，webpack将自动识别项目所依赖的其它文件，不过需要注意的是如果你的webpack没有进行全局安装，那么当你在终端中使用此命令时，需要额外指定其在node_modules中的地址，继续上面的例子，在终端中属于如下命令

//webpack非全局安装的情况
node_modules/.bin/webpack app/main.js public/bundle.js

结果如下图

    可以看出webpack同时编译了main.js 和Greeter,js,现在打开index.html,可以看到如下结果

3、通过配置文件来使用Webpack

     还是继续上面的例子来说明如何写这个配置文件，在当前练习文件夹的根目录下新建一个名为webpack.config.js的文件，并在其中进行最最简单的配置，如下所示，它包含入口文件路径和存放打包后文件的地方的路径。

webpack.config.js代码

module.exports = {
entry: __dirname + “/app/main.js”,//已多次提及的唯一入口文件
output: {
path: __dirname + “/public”,//打包后的文件存放的地方
filename: “bundle.js”//打包后输出文件的文件名
}
}

注意：“__dirname”是node.js中的一个全局变量，它指向当前执行脚本所在的目录。


     为了看出来效果我们修改一下Greeter.js中输出的文案，编译完成之后观看效果

// Greeter.js

module.exports = function() {
var greet = document.createElement(‘div’);
greet.textContent = “测试一下 “;
return greet;
};

这次再运行webpack就不需要繁琐的指定从那个文件打包到那个文件，配置文件已经设置完毕

node_modules/.bin/webpack

**更加快捷的打包方法**

       执行类似于node_modules/.bin/webpack这样的命令其实是比较烦人且容易出错的，不过值得庆幸的是npm可以引导任务执行，对其进行配置后可以使用简单的npm start命令来代替这些繁琐的命令。在package.json中对npm的脚本部分进行相关设置即可，设置方法如下。

{
“name”: “webpack”,
“version”: “1.0.0”,
“description”: “”,
“main”: “index.js”,
“dependencies”: {
“webpack”: “^2.2.1”
},
“scripts”: {
“test”: “echo \”Error: no test specified\” && exit 1”,
“start”: “webpack”
},
“author”: “”,
“license”: “ISC”
}

然后在里面增加了 一句配置

“start”: “webpack”

之后直接使用 代码 
注意：不能使用一下代码

“start”: “webpack” //配置的地方就是这里啦，相当于把npm的start命令指向webpack命令

就是添加注释，我在运行的时候出错，如果你们没有出错，请自行绕过。

npm start
“`
注：package.json中的脚本部分已经默认在命令前添加了node_modules/.bin路径，所以无论是全局还是局部安装的Webpack，你都不需要写前面那指明详细的路径了。

npm的start是一个特殊的脚本名称，它的特殊性表现在，在命令行中使用npm start就可以执行相关命令，如果对应的此脚本名称不是start，想要在命令行中运行时，需要这样用npm run {script name}如npm run build，以下是执行npm start后命令行的输出显示

可以测试成功了，下一篇继续写 webpack的强大功能