【个人笔记重点，不作为参考】主题：webpack

-------------------------------------------------------------------------

  显示webpack编译错误的原因：webpack --display-error-details

      webpack配置安装以及入门  ：http://www.jianshu.com/p/42e11515c10f#

    1、npm（node package Manager）是一种依赖包库，全世界最大的包管理器

     2、npm install 可根据packjson安装需要的依赖包。

          ①npm install --save             （dependencies 下的模块，则是我们发布后还需要依赖的模块，譬如像jQuery库或者Angular框架类似的，我们在              开发完后后肯定还要依赖它们，否则就运行不了。）

         ②npm install --save -dev     （ devDependencies开发时用的模块，发布时不需要，例如cli ）  

    3、http://www.tuicool.com/articles/eE7zam          npm用法以及离线下载

    4、ng serve --prod      生产项目，不加载devDendencies模块

-------------------------------------------------------------------------------------------

一、布置webpack的软件环境

1.1：安装nodejs环境（已安装略过）

自行下载符合自己的版本：https://nodejs.org/en/download/

安装后，node -v  以及  npm -v 查看版本，检查安装是否成功。

1.2：生成package.json文件

在终端执行：npm init    /*执行后根据提示填入相应信息*/ 设置webpack为全局。

1.3：安装webpack作为依赖包

在终端执行：npm install --save-dev webpack       （安装webpack依赖包）
npm install webpack -g （注： 设置webpack全局模式，可是如果设置，不同版本有些小问题）

二、项目文件结构（举个栗子）

Webpack：
app  ->  main.js  、  test.js 
public ->  bundle.js 、 index.html
node_modules
package.json

三、布置webpack的代码环境

3.1：创建test.js（测试）

            module.exports =  function(){ alert(' hello world ! ') }     /*可以直接用commonjs的用法*/

3.2：创建main.js（entry文件：入口文件）

            var test = require( ‘./test.js’ );

        test()

3.3：编译入口文件

           在终端执行：webpack {entry file/入口文件} {destination for bundled file/存放bundle.js的地方}

            实例： webpack app/main.js public/bundle.js        /* 已设置全局webpack */

node_modules/.bin/webpack app/main.js public/bundle.js     /* 未设置全局webpack*/

    3.4：插入编译后的bundle.js文件到index.html。运行。

四、/* 弹窗···hello world！ */