WebPack

模块化

静态模块：import * from '' 需要先预定好导出的内容

动态模块：import() 动态去引入模块

模块化分类：

• CMD
• AMD
• ESM（ecma script modules）
• UMD（主要用来兼容多个环境间的模块化引入问题）

const umd = function (root, factory) {
    if (typeof module === 'object' && typeof module.exports === 'object') {
        /* 当前为node.js环境 */
        module.exports = factory();
    } else if (typeof define === 'function' && define.amd) {
        /* 当前是AMD环境 */
        define(factory);
    } else {
        /* 普通浏览器环境 */
        root.lib = factory();
    }
};

webpack

webpack.config.js

const path = require('path');
const HtmlWebpackPlugin = require("html-webpack-plugin")
module.exports = {
    // 模式 production development none 对不同的环境，做的优化处理
    mode: '',

    // 单入口单出口
    entry: 'index.js',
    output: {
        filename: 'chunk.js',
        path: path.resolve('dist')
    },

    // 多入口单出口
    entry: ['index.js', 'list.js'],
    output: {
        filename: 'chunk.js',
        // 默认输出路径
        path: path.resolve('dist')
    },

    // 多入口，多出口
    entry: {
        index: './index.js',
        list: './list.js'
    },
    output: {
        filename: '[name].js',
        path: path.resolve('dist')
    },
    
    // webpack默认只能打包js文件，如果需要打包其他文件，那么需要安装loader
    module: {
        // 配置模块加载解析规则（loader）
        rules: [
            {
                // 匹配规则
                test: '\.txt$/', 
                // 使用什么解析器      
                use: {
                    loader: 'raw-loader',
                    options: {
                        // 打包后文件名
                        name: '[name].[ext]',
                        // 打包后的位置
                        outputPath: './txt'
                    }
                }
            }
        ]
    },

    // 安装一些插件
    plugins: [
        new HtmlWebpackPlugin({
            ...
        })
    ]
}