从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)都在用模块化

命名空间

蛮荒时代的模块化

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的中原逐鹿

// 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
});

// 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主要践行者

// 一个文件就是一个模块 文件名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的模块化)

// 使用方式 一
// 导出 文件名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
你的第一个配置文件

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']
}

自定义出口文件名打包

module.exports = {
    entry: {
        main: './app1.js',
    },
    output: {
        filename: '[name].js',
    }
 }

将生成 /dist/main.js 文件

多入口多出口文件打包

module.exports = {
    entry: {
        main: './app.js',
        select: './my_select.js'
    },
    output: {
        filename: '[name].js',
    }
}

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

ES6 module 打包

//  导出文件 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 打包

// 导出 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模块打包

// 导出 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内容)

2019-08-15