Ray

另外就是在 webpack5 (5.32.0+) 里面提供了 `importModule` 的方法去简化了构建过程中要进行其他编译流程操作

@BUPTlhuanyu 1. thread-loader 具体实现没有太了解过。不过在我们平时的使用场景当中(跨平台打包编译构建)也会手动开启多进程来进行并行编译提高速度，这个并行处理的收益也是显而易见的。 2. webpack 异步的话基本都是 node.js callback 的形式去组织代码的，所以堆栈非常深，看代码的时候经常需要翻看代码当中出现的 callback 到底是外部传入还是说内部定义的。这个应该在你调试代码的时候有体会到，就是调试的时候在不同函数、文件之间乱跳。 3. childCompiler 这块的话其实核心就是 new Compiler 创建了一个新的 Compiler 实例，这个 compiler 实例的话很多属性都是继承来自主 compiler，有些 hooks、属性等等和主的 compiler 有些差异。但是整个编译构建流程是和主的保持一致的，所以如果你要利用 childCompiler 去做一些工作的话，大致需要了解初始化的一些操作即可。在具体的使用场景当中的话，基本是遇到那种需要构建一个新的 js module...

拓展阅读： [export-default-thing-vs-thing-as-default](https://jakearchibald.com/2021/export-default-thing-vs-thing-as-default/) 里面探讨了一些有关 es module 规范以及用法的问题。一些非常小的细节注意点。

在上文最后部分提到了一些模块设计方面的建议，但是在设计一些业务上的 SDK 功能模块的时候，难免会出现一些相互依赖的一级模块。例如 `Store` 里面封装的 `actions` 里面使用了一些 `api` 方法，而这个 `api` 方法可能是由其他业务模块给暴露的。那么这个时候第一反应是这个 `api` 方法能否作为一个公共模块而拆分出来，这样导致的问题就是因为依赖关系的顾虑，导致模块非常的碎片化，这个时候的一个解决方案就是考虑是否使用类 `MonoRepo` 的方式去管理模块依赖。 比如在 `vue` 里面，每个单独模块功能单元都是作为一个独立的 npm package 去发布的。不同模块之间相互引用是直接通过包名，而非相对路径这种方式。这样算是一种物理上的隔离。那么在模块引用上也可考虑通过包名的形式去引用。只不过需要注意的是 SDK 需要暴露一个总的入口，统一由这个总的入口来做模块的引入分发。

拓展阅读： [构建下一代基础设施 PDN](https://mp.weixin.qq.com/s/eJrudFf38eadZbqSMiyG-g) 里面提到了一些 `commonJs` 转 `esModule` 处理的思路。主要是为了做一些 `unbundle` 的功能增强，同时 `esModule` 也用于 `tree shaking`.

拓展阅读： [渐进式 Unbundled 开发工具探索之路](https://mp.weixin.qq.com/s?__biz=MzkxNDIzNTg4MA==&mid=2247484153&idx=1&sn=8c66e2061b8b9df486ad2f84973e987b&scene=21#wechat_redirect) 用 `esModule` 来做 `unBundled` 的一些工程化的实践。

【2020.6.4】补充：`@vue/cli-service` 内部是对`package.json`的内容没有加入到hash生成的，所以在项目当中，如果更改了`package.json`当中相关的配置的话，是会出现命中缓存，编译代码未更新的情况。例如：使用`webpack-transform-modules-plugin`，需要对`package.json`进行配置。

@zuibunan `package.json`相对来说变动也不会太频繁，针对相关依赖包的更新的话，最终都会引起 package-lock.json 的更新，从依赖包更新的角度来说的话，能满足相同的效果。不过有些场景，例如我使用的`webpack-transform-modules-plugin`这个是需要再`package.json`里面完成相关的配置工作的，那么肯定就涉及到`package.json`文件的更改，不过目前是没有加入校验的。至于为什么，可能是作者暂时没有使用到这种场景吧？毕竟这个主要还是不同的依赖包的使用策略相关。有些依赖包可能是读一个单独的配置文件，有些可能就直接放到`package.json`里面去读了。

@oakland 这几个loader的分类的话主要是表示在webpack对一个module进行编译构建的时候，不同loader的执行顺序。 `inlineLoader`就是我们在引入一个module的时候手动写的一个loader，例如`import 'css-loader!./a.css'` `preLoader`和`postLoader`是在`webpack.config`配置文件里面通过对`module.rule.enforce`进行的`pre`或者`post`配置，`normalLoader`的话就是常规配置，不带`enforce`的配置。 [详见文档](https://webpack.js.org/configuration/module/#ruleenforce)

你所用的带有i18n插件的框架或者是构建工具就可以帮你完成图片的切换工作了呀。就是根据你所使用的语言然后加载对应的图片。 ```javascript css: .en background-image: url(./en.jpg) .zh background-image: url(./zh.jpg) js: ```