WebPack

HaoOuBa
2021-03-04 / 1 评论 / 143 阅读 / 正在检测是否收录...
温馨提示:
本文最后更新于2021年03月07日,已超过36天没有更新,若内容或图片失效,请留言反馈。

模块化

静态模块: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({
            ...
        })
    ]
}
1

评论 (1)

取消
  1. 头像
    111
    Windows 10 · Google Chrome

    111

    回复