webpack前端项目构建框架

    前端项目构建框架有很多，常见的有grunt，gulp，为什么还有webpack呢？

    前端构建工具一般都是将js合并压缩，css合并压缩，以达到减少体积，提高加载速度的目的。webpack与grunt,gulp的侧重点不同。但是功能都能满足。

    webpack构建也是基于node项目，需要将webpack,webpack-cli等加入依赖中。同时还需要全局安装webpack与webpack-cli，下面给出一个示例，我们编写一个页面index.html，外加两个js文件greeter.js和index.js，greeter.js是创建一个html节点，index.js是利用greeter.js创建节点的方法来给页面id=root的元素增加这个节点。思路很简单，最终我们需要利用webpack来打包greeter.js和index.js来组成bundle.js，而index.html页面就加载bundle.js。下面来通过实例来实现这个构建。

1、创建目录webpackdemo。
2、命令行下在webpackdemo目录中，利用npm init -y初始化项目，这时候会生成package.json文件。

    
3、npm install webpack webpack-cli --save-dev。
4、因为我们要在命令行下直接使用webpack命令，所以需要全局安装，而全局使用webpack，还需要全局安装webpack-cli。
   npm install webpack webpack-cli -g
5、编写index.html,greeter.js,index.js。

    index.html