从零开始学习webpack（一）

首先我们先了解下常用的node的工具类：
工具：
1.编译类——babel、 grunt/gulp
es6->es5
2.打包——browserify
一堆文件 -> 单个文件
3.开发辅助——browser-sync
多端同步
4.测试类——
单元测试：模板、函数
集成测试：
压力测试：性能、负载能力、隐藏bug

webpack + 插件 （基于node.js）
打包、编译、测试、调试

从最简单的webpack使用开始：

建立一个 mod.js , 代码如下：

export default 12;

再建立一个 1.js，代码如下：

import mod1 from `./mod1`;
console.log(mod1);

在这里要提及一个 知识点：
在我们ES6中常用的 import/export， 引入/导出其他模块,在目前其实并没有浏览器得到承认，不能够直接使用，所以需要使用webpack进行编译

现在进行最基本的webpack配置

const pathlib = require('path')
module.exports = {
    entry:'./src/1.js',   // 编译文件入口
    output:{
        path:pathlib.resolve('dest/'),  //输入的目标目录
        filename: 'bundle.js'   // 输出的文件名
    }
}

当前的文件目录：

打开cmd，进入到 WEBPACK文件目录下
执行指令：

webpack --config webpack.config.js 

即可完成最简单的webpack编译。

编译完成后，生成 dest目录下的 bundle.js文件：

bundle.js 内容：

!function(e){var t={};function r(n){if(t[n])return t[n].exports;var o=t[n]={i:n,l:!1,exports:{}};return e[n].call(o.exports,o,o.exports,r),o.l=!0,o.exports}r.m=e,r.c=t,r.d=function(e,t,n){r.o(e,t)||Object.defineProperty(e,t,{enumerable:!0,get:n})},r.r=function(e){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},r.t=function(e,t){if(1&t&&(e=r(e)),8&t)return e;if(4&t&&"object"==typeof e&&e&&e.__esModule)return e;var n=Object.create(null);if(r.r(n),Object.defineProperty(n,"default",{enumerable:!0,value:e}),2&t&&"string"!=typeof e)for(var o in e)r.d(n,o,function(t){return e[t]}.bind(null,o));return n},r.n=function(e){var t=e&&e.__esModule?function(){return e.default}:function(){return e};return r.d(t,"a",t),t},r.o=function(e,t){return Object.prototype.hasOwnProperty.call(e,t)},r.p="",r(r.s=0)}([function(e,t,r){"use strict";r.r(t);console.log(12)}]);

小提示：
更改默认的webpack配置文件名：

webpack --config xxx

默认：webpack  webpack.config.js,  修改后： webpack --config xxx

引入的文件路径：
必须以当前路径 ./， 否则会发生错误，如：

module.exports = {
    entry:'./src/1.js',   // 编译文件入口,  不能使用 'src/1.js'
}

webpack可以输出任何东西，例如ES6中的类
mod1.js:

export default class{
    constructor(name,age){
        this.name = name;
        this.age = age;
    }
    show(){
        console.log(`name： ${this.name}, age: ${this.age}`);
        
    }
};

1.js:

import Person from './mod1';

let p = new Person('linxun', 22);

p.show()

执行命令

webpack --config webpack.config.js

编译后的bundle.js

!function(e){var t={};function n(r){if(t[r])return t[r].exports;var o=t[r]={i:r,l:!1,exports:{}};return e[r].call(o.exports,o,o.exports,n),o.l=!0,o.exports}n.m=e,n.c=t,n.d=function(e,t,r){n.o(e,t)||Object.defineProperty(e,t,{enumerable:!0,get:r})},n.r=function(e){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},n.t=function(e,t){if(1&t&&(e=n(e)),8&t)return e;if(4&t&&"object"==typeof e&&e&&e.__esModule)return e;var r=Object.create(null);if(n.r(r),Object.defineProperty(r,"default",{enumerable:!0,value:e}),2&t&&"string"!=typeof e)for(var o in e)n.d(r,o,function(t){return e[t]}.bind(null,o));return r},n.n=function(e){var t=e&&e.__esModule?function(){return e.default}:function(){return e};return n.d(t,"a",t),t},n.o=function(e,t){return Object.prototype.hasOwnProperty.call(e,t)},n.p="",n(n.s=0)}([function(e,t,n){"use strict";n.r(t);new class{constructor(e,t){this.name=e,this.age=t}show(){console.log(`name： ${this.name}, age: ${this.age}`)}}("linxun",22).show()}]);

输出内容：

name： linxun, age: 22

最后提一提ES6模块化的使用

export default xxx;  //作为模块本身是输出	import xxx from '...'
export let a = 12, b = 5; //输出模块的东西	import {a as a2, b} from '...'