webpack打包

AMD、CMD、common.js、ES6的区别

-AMD和CMD 是两种模块化加载方案
（1）AMD由Require.js提出，特点：依赖前置；它有一个插件叫r.js，用来对问你件进行压缩合并；（和backbone.js有着历史关系。。。）
（2）CMD由Sea.js提出，特点：按需加载
（3）common.js用moudle.exports进行导出，require进行导入
（4）ES6用export导出，import导入

webpack、gulp、grunt的区别

• webpack：打包机，给定主文件，去找项目的所有依赖，用loader处理，打包为一个js文件；
• gulp：代码方式来写打包脚本，采用流式写法，只抽象出gulp.src，gulp.pipe，gulp.dest，gulp.watch接口，运用简单，相比grunt代码较少，通过创建task执行；
• grunt：配置思想来写打包脚本，一切皆配置，不同的插件有自己的扩展字段，认识成本较高，得熟知各种插件配置规则；
  总结：gulp,grunt通过配置文件对指定的一些文件进行编译，组合，压缩，优化前端开发流程，可被webpack替代；

如何使用webpack?

步骤一：npm i webpack -g 全局安装
步骤二：编写webpack的配置文件，在项目文件的根目录下创建一个文件：webpack.config.js，内容为：

const path = require('path');

module.exports = {
  entry: './src/index.js',//入口文件
  output: {
    path: path.resolve(__dirname, 'dist'),//指定生成文件的目录
    filename: 'bundle.js'//指定生成文件的名字
  }
};

步骤三：运行命令：webpack webpack.config.js