webpack.md

Webpack

核心原理

//webpack 模块化原理 
(function (modules) {
    //加载过的模组     
    let installedModules = {};
    //模组加载_require方法
    function _require(moduleId) {
        if (installedModules[moduleId]) {
            return installedModules[moduleId];
        }
        let module = installedModules[moduleId] = {
            exports: {},
            id: moduleId,
            laoded: false
        }
        //模组调用,并递归的require         
        modules[moduleId].call(module.exports, module, module.exports, _require);
        module.loaded = true;
        return module.exports;
    }
    return _require(0);
})([function (module, exports, require) {//模块0 入口模块
    let obj = require(1);
    console.log(obj)
}, function (module, exports, require) {//模块1
    let name = "fooooooof";
    exports.name = name;
}])

px转vw单位 postcss-px-to-viewport插件

padding-top: 10px; /* px-to-viewport-ignore */
/* px-to-viewport-ignore-next */
padding-bottom: 10px;
/* Any other comment */

基本概念

• entry
• output
• loader
• plugins
• mode

基本原理

(function(modules){
    let keys=Object.keys(modules);
    keys.forEach(key=>{
        eval(modules[key]);
    })
})({
    "module1.js":"fuction aa(){console.log('aa')}"
    "module1.js":"fuction bb(){console.log('bb')}"
})

参考

1. webpack 官网
2. webpack——devtool配置及sourceMap的选择

webpack 文件引用名称静态化

• manifest
• webpack.Optimization 英文文档 v5.0.0 中文文档 v5.0.0
• webpack4 optimization总结
• webpack4 optimization配置splitChunks和namedChunks

参考

1. webpack 博客 ⭐
2. postcss-px-to-viewport px转vw