从0基础到大牛-webpack深入浅出超强完整版(一)

你可能只需要这一个教程

webpack介绍

1.webpack发展历程

发布时间

  • webpack   v1.x   2014.02
  • webpack   v2.x   2017.01
  • webpack   v3.x   2017.06
  • webpack   v4.0   2018.05   稳定版4.32.2
  • webpack   v5.x   2019.xx   目前不是稳定的版本

模块化历程
 单页面应用(Vue React)都在用模块化

命名空间

 蛮荒时代的模块化

1
2
3
4
5
6
7
8
9
var obj = {};
obj.type = obj.type || {};
obj.type.method = function() {};
obj.type.add = function() {};
obj.type.sub = function(){};

obj.addin = obj.addin || {};
obj.addin.remove = function() {};
obj.addin.append = function() {};

 AMD与CMD的中原逐鹿

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
// AMD 异步加载 依赖前置 先加载后使用
// 需要库文件 - require.js
// 定义AMD模块 文件名amd
define(function(a,b) {
'use strict';
return {
add: function(a,b) {
return a + b;
},
sub: function(a,b) {
return a - b;
}
}

});

// 加载AMD模块
require(['moduleA','moduleB','amd'],function(a,b,amd) {
console.log(a); // a模块
console.log(b); // b模块

amd.add(1,2); // 调用amd
});
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
// CMD 同步加载 依赖后置 使用时引入 
// 需要库文件 - sea.js
// 定义CMD模块 文件名cmd
define(function(require,exports,module) {
var moduleA = require('moduleA'); // 需要时引入

exports = {
add: function(a,b) {
return a+b;
},
sub: function(a,b) {
return a - b;
}
}
});

// 加载CMD模块
seajs.use(['cmd'],function(cmd) {
cmd.add(1,2);
cmd.sub(2,3);
});

 commonJS - Node.js主要践行者

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
// 一个文件就是一个模块 文件名common
var a = 10;
var b = 20;
function fun() {

};

// 导出方式 一
modules.export = {
a : a,
b : b,
fun : b
};

// 导出方式 二
// export.add = function(){}; ...


// 通过关键字require引入文件【相对路径/绝对路径引入】
var common = require('common');
console.log(common.a); // 10

 官方科普最硬核 - ES Module(ES6的模块化)

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
// 使用方式 一
// 导出 文件名es1
export var a = 10;
export var add = function(a,b) {
return a + b;
}


// 引入
import { a,add } from 'es1';
add(3,5); // 调用

// 使用方式 二
// 导出 文件名es2
export default const b = {
return 20;
};

// 引入
import b from 'es2';
console.log(b);

*CSS模块化

  • OOCSS(面向对象)
  • AMCSS(属性模块)

webpack 4.32.2核心组成

  • entry : 命令行中写入口,配置文件中
  • output
  • module
  • plugins

 准备工作
  卸载旧的webpack版本 npm uninstall webpack -g
  下载最新的版本 npm install webpack -g
  检查当前webpack版本 webpack --version
  需要在本地文件内下载webpack,初始化package.json文件 npm init -y
  去下载 webpack 和 webpack-cli,3.x 的版本是不需要 webpack-cli,webpack 中集成了 webpack-cli, 4.X以后没有集成
  webpack4.x 以下的使用 webpack app.js 是可以的,4.x以后因为增加了一个多入口命令打包,需要指定出口文: webpack app.js -o bundle.js
  如果不加 –mode development 参数,默认是生产环境,会自动压缩代码
  当前可下载的webpack版本 npm info webpack webpack-5.x-bate(公测的版本)

 起手式
  根目录下新建配置文件,默认配置文件为 webpack.config.js
  你的第一个配置文件

1
2
3
4
5
6
7
8
9
module.exports = {
// 入口 相对文件地址
entry: './app.js',
// 出口
output: {
filename: 'bundle.js'
},
mode: "development"
};

  执行命令webpack后会生成 /dist/bundle.js 文件
  使用自定义名称的配置文件my-webpack-setting.js打包,请执行 webpack --config my-webpack-setting.js

  • 多入口打包

    1
    2
    3
    module.exports = {
    entry: ['app.js','app1.js','app2.js']
    }
  • 自定义出口文件名打包

    1
    2
    3
    4
    5
    6
    7
    8
    module.exports = {
    entry: {
    main: './app1.js',
    },
    output: {
    filename: '[name].js',
    }
    }

  将生成 /dist/main.js 文件

  • 多入口多出口文件打包
    1
    2
    3
    4
    5
    6
    7
    8
    9
    module.exports = {
    entry: {
    main: './app.js',
    select: './my_select.js'
    },
    output: {
    filename: '[name].js',
    }
    }

  将在dist文件夹下生成main.js与select.js
  注:多入口对应多出口,多入口对应单一出口配置时将会报错

  • ES6 module 打包
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    //  导出文件 es6.js
    export const add = function(a,b) {
    return a + b;
    }

    // 导入文件 app.js
    import { add } from './es6.js';
    console.log(add(4,7)); // 11


    // webpack配置文件
    module.exports = {
    entry: {
    app: './app.js',
    },
    output: {
    filename: '[name].js',
    },
    mode: "development"
    }

  结果生成 /dist/app.js 文件, 文件内包含 es6.js 与 app.js 代码

  • CommonJS 打包
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    // 导出 common.js
    module.exports = {
    add : function(a,b) {
    return a + b;
    },
    sub: function(a,b){
    return a - b;
    }
    };

    // 导入 app.js
    const method = reqiore('./common,js');
    console.log(method.add(4,7)); // 11
    console.log(method.sub(8,3)); // 5

    // webpack配置文件 同上

  结果生成 /dist/app.js 文件, 文件内包含 common.js 与 app.js 代码

  • amd模块 打包
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
// 导出 amd.js
define(function(require,factory) {
return {
mul: function(a,b) {
return a * b;
}
}
});

// 导入
require(['./amd.js'],function(method) {
console.log(method.mul(10,4)); // 40
});

// webpack配置文件 同上

  dist文件夹下将生成 app.js与 0.js
  0.js异步加载的内容(amd.js内容)