文章首发在我的个人博客：http://www.brandhuang.com/article/1586446191183

webpack基础，自己配置 webpack 进行资源打包

这只是我个人学习整理的个人笔记，可以直接跳过前面去看文章中的「参考文章」

重要提示

纸上得来终觉浅，绝知此事要躬行

看了vue 官方的文档，还是有点懵的。百度了一堆东西，终于成功的配置出基于vue-cli3的vue-ssr 服务端预渲染。 有帮助的话，还请点个赞 建议使用nuxt，可以更好的做服务端渲染。

需要自己创建index.template.html文件。这个文件在

文章转载：乐字节

前言

虽然webpack5已经发布了一段时间了，但一直都没有研究过，最近正好在做微前端相关的调研，恰好看到了webpack5的模块联邦与微前端的相关方案，便想着探究下模块联邦的相关源码。（ps：关于微前端，稍微说一句，个人觉得在选取微前端方案的时候可有结合现有资源以及形态进行相关取舍，从共享能力、隔离机制、数据方案、路由鉴权等不同维度综合考量，个人使用最小的迁移成本，渐进式的过渡，才是最优的选择。）

目录结构

方案一：
1.在index.html，加入

2.在vue.config.js，配置

configureWebpack: config => {
config.externals = { 'BMap': 'BMap' }
}

3.在Address.vue页面

开发环境性能优化

• 优化打包构建速度
• HMR
• 优化代码调试
• source-map

HMR

概念：「HMR：」 hot module replacement 热模块替换 / 模块热替换

在多入口情况下，使用 CommonsChunkPlugin 来提取公共代码

1、通过 externals 配置来提取常用库

长文警告，以下内容非常长，大约一万五千字，手机阅读建议收藏或者直接去webpack中文官网阅读中文文档。或者跟webpack打交道仅仅限了解的话，当这是标题新闻知道就可以。

自从 2018 年 2 月，webpack4 发布以来，webpack 就暂时没有更进一步的重大更新，为了保持 API 的一致性，旧的架构没有做太多改变，遗留了很多的包袱。阔别 2 年多后，2020 年 10 月 10 日，webpack 5 正式发布，并带来了诸多重大的变更，将会使前端工程师的构建效率与质量大为提升。

webpack的四大核心

这也是webpack的最基础的配置，少不了的

1、entry（入口）

entry是整个配置文件的入口，没有之一。