模块化 & webpack

模块化

ESM

es6模块化

fn.js


function fn() {
    console.log('fn');
}

export default {
    fn
}

index.js


import libs from './libs/fn.js';

libs.fn();

CommonJs 适用于服务端

fn.js

function fn() {
    console.log('fn');
}

module.exports.fn = fn;

index.js

const libs = require('./libs/fn.js');

libs.fn();

AMD

fn.js


define(function() {
    function fn() {
        console.log('fn');
    }

    return {
        fn
    }
});

index.js


console.log('RequireJS');

define(['./js/libs/fn.js'], function(libs) {

    libs.fn();

});

UMD

同构： 封装的一个东西，前端后端都可以用

严格来说，`UMD` 并不属于一套模块规范，它主要用来处理 `CommonJS`、`AMD`、`CMD` 的差异兼容，是模块代码能在前面不同的模块环境下都能正常运行

fn.js


//  这个M函数的作用：为不同的环境定义模块

function M(factory) {
    if (typeof module === "object" && typeof module.exports === "object") {
        // Node, CommonJS-like
        // 这里 通过 axios 模拟的参数的机制，但这里代码是不能运行，注意
        module.exports = factory( require('./axios.js') );
    }
    else if (typeof define === "function" && define.amd) {
      	// AMD 模块环境下，自动注入到factory 里去
        define(['./axios.js'], factory);
    }
}

M( function(axios) {
    function fn() {
        console.log('fn', axios);
    }

    return {
        fn
    }
} );

node-index.js


const libs = require('./libs/fn.js')

libs.fn();

require-index.js


define(['./libs/fn.js'], function(libs) {
    libs.fn();
})

axios.js

root 是挂全局的

函数自执行

// function fn() {
//     console.log('我是一个函数');
// }

// fn();


// 1. 第1种
// !function() {
//     console.log('我是一个函数');   
// }();

// 2. 第2种
// (function() {
//     console.log('我是一个函数');   
// })();

// + - ~ ! 变表达式

webpack

模块打包器, webpack 是按照硬盘的实际存放位置来找路径，而url是浏览器跑起来后的虚拟路径

loader

loader 不用require 写成字符串会自动require

index.js


// 这里的路径是按照webpack工作路径去找的，fs 硬盘相对路径

import libs from './libs/fn.js';
import txt from './data/txt.txt';
import logo from './images/logo.png';
import indexCss from './css/index.css';

libs.fn();

console.log('txt', txt);

console.log('logo', logo);

console.log('css', indexCss);

// let logoImage = new Image();
// logoImage.src = logo;

// document.body.appendChild(logoImage);


// let styleEle = document.createElement('style');
// styleEle.innerHTML = indexCss[0][1];
// document.head.appendChild(styleEle);

webpack.config.js


// 因为 webpack 是通过 node 来执行，所以这个js文件实际也是运行在node环境的
const path = require('path');

// 通过node模块导出一个配置对象，这个配置对象将在webpack打包过程中被载入

module.exports = {
    mode: 'development',

    // 入口
    entry: {
        index: "./src/index.js"
    },

    // 输出
    output: {
        // path 一定要是绝对路径
        // 做绝对路径处理
        // 输出的目录
        path: path.resolve(__dirname, 'dist'),

        // 输出的文件
        // [name] => 映射 entry 中的对应的 key
        filename: '[name].js'
    },

    module: {

        // 不同的模块解析规则
        rules: [

            // 每一个对象就是一种模块的解析规则 - loader
            {
                // 用来匹配当前载入的模块规则
                test: /\.txt$/,
                use: 'raw-loader'
            },

            // url-loader 依赖file-loader
            {
                test: /\.(png|jpe?g|gif)$/,
                use: {
                    loader: 'url-loader',
                    options: {
                        // outputPath 还是相对于全局的 outputPath  dist
                        outputPath: "./images",
                        // 一个资源的 url 并不等同与资源的绝对存储路径
                        // 打包后文件的 url
                        publicPath: '../dist/images',
                        // 小于 100 字节转成 base64 格式
                        limit: 100
                    }
                },
            },

            {
                test: /\.css$/,
                use: [
                    {
                        loader: "style-loader",
                        options: {}
                    },
                    {
                        loader: "css-loader",
                        options: {
                            // 启用/禁用 url() 处理
                            url: true,
                            // 启用/禁用 @import 处理
                            import: true,
                            // 启用/禁用 Sourcemap
                            sourceMap: false
                        }
                    }
                ]
            }

        ]

    }
}

plugins