webpack学习 --- 模块化开发概念，webpack操作，配置

模块化开发
传统非模块化开发的缺点：
1、命名冲突
2、文件依赖

前端的标准模块化规范
1、AMD - requirejs
2、CMD - seajs （淘宝）
加载异步

服务器端的模块化规范
1、CommonJS - Node.js
同步加载

模块化相关的规则：
如何定义模块：一个js文件为一个模块，模块内部的成员相互独立
模块成员的导出和引入
比如在a.js定义一个加法函数

var sum  = function(a,b){
return parseInt(a) +　parseInt(b);
}

方法一

//导出模块成员
exports.sum = sum;
//引入模块
var module = require(‘./a.js’);
var ret = module.sum(12,13);
console.log(ret);

方法二

//导出
module.exports = sum;
//引入
module();

webpack使用
先 npm init -y 初始化仓库

webpack可以做的事

//1. webpack可以处理js文件的互相依赖关系
//2.webpack可以处理js的兼容问题，把高级的，浏览器不识别的语法转换成低级的浏览器能识别的语法
//打包命令：
// webpack 要打包的文件路径 -o 打包好输出文件的路径

webpack配置：

//require 和 module 都是node的方法
const path = require('path');
//配置文件的实质是一个js文件，通过node中的模块操作，向外暴露了一个配置对象
module.exports = {

    entry: path.join(__dirname, './src/main.js'), //入口 指定使用webpack打包的文件

    //出口
    output: {
        path: path.join(__dirname, './dist'), //指定打包好的文件，输出到哪个目录中去
        filename: 'bundle.js' //指定输出文件的名称
    }
}

//在控制台输入webpack命令执行时，webpack的的执行过程
//1. webpack发现没有通过命令的形式，给它指定入口和出口
//2. webpack会去项目的根目录中查找叫webpack.config.js的配置文件
//3.找到配置文件后，进行解析，得到配置文件中导出的配置对象
//4.当webpack拿到配置对象后，就拿到了配置对象中指定的入口和出口，然后进行打包构建