fix(webpack5): 修复 webpack-sources 版本不一致带来的问题 (#12501)

* feat: webpack-sources 的功能从webpack引入,避免执行引入版本有关问题 * chore: update lockfile * fix: typings Co-authored-by: chenjiajian <[email protected]>
NervJS · Sep 20, 2022 · 556de96 · 556de96
1 parent acdd1d6
commit 556de96
Show file tree

Hide file tree

Showing 12 changed files with 27 additions and 178 deletions.
diff --git a/package.json b/package.json
@@ -197,7 +197,6 @@
     "vue-template-compiler": "^2.6.11",
     "webpack": "5.69.0",
     "webpack-chain": "6.5.1",
-    "webpack-dev-server": "4.7.4",
-    "webpack-sources": "^3.2.3"
+    "webpack-dev-server": "4.7.4"
   }
 }
diff --git a/packages/taro-webpack5-prebundle/package.json b/packages/taro-webpack5-prebundle/package.json
@@ -38,7 +38,6 @@
     "fs-extra": "^8.0.1",
     "lodash": "^4.17.21",
     "webpack-chain": "6.5.1",
-    "webpack-sources": "^3.2.3",
     "webpack-virtual-modules": "^0.4.3"
   },
   "devDependencies": {

diff --git a/packages/taro-webpack5-prebundle/src/utils/webpack.ts b/packages/taro-webpack5-prebundle/src/utils/webpack.ts
@@ -1,12 +1,13 @@
 import { promoteRelativePath } from '@tarojs/helper'
 import path from 'path'
-import { Chunk, Compilation } from 'webpack'
-import { ConcatSource, Source } from 'webpack-sources'
+import { Chunk, Compilation, sources } from 'webpack'
+
+const { ConcatSource } = sources
 
 /**
  * 在文本头部加入一些 require 语句
  */
-export function addRequireToSource (id: string, modules: Source, commonChunks: (Chunk | { name: string })[]) {
+export function addRequireToSource (id: string, modules: sources.Source, commonChunks: (Chunk | { name: string })[]) {
   const source = new ConcatSource()
   commonChunks.forEach(chunkItem => {
     source.add(`require(${JSON.stringify(promoteRelativePath(path.relative(id, chunkItem.name)))});\n`)

diff --git a/packages/taro-webpack5-prebundle/src/webpack/TaroContainerEntryModule.ts b/packages/taro-webpack5-prebundle/src/webpack/TaroContainerEntryModule.ts
@@ -3,9 +3,10 @@
  * MIT License http://www.opensource.org/licenses/mit-license.php
  * Author Tobias Koppers @sokra, Zackary Jackson @ScriptedAlchemy, Marais Rossouw @maraisr
  */
-import webpack from 'webpack'
+import webpack, { sources } from 'webpack'
 import ContainerPlugin from 'webpack/lib/container/ContainerPlugin'
-import { ConcatSource } from 'webpack-sources'
+
+const { ConcatSource } = sources
 
 const { Template, RuntimeGlobals } = webpack
 const ContainerEntryModule = require('webpack/lib/container/ContainerEntryModule')

diff --git a/packages/taro-webpack5-prebundle/src/webpack/TaroContainerReferencePlugin.ts b/packages/taro-webpack5-prebundle/src/webpack/TaroContainerReferencePlugin.ts
@@ -4,11 +4,10 @@
  * Author Tobias Koppers @sokra and Zackary Jackson @ScriptedAlchemy
  */
 import { META_TYPE } from '@tarojs/helper'
-import webpack, { Compiler, NormalModule, RuntimeGlobals } from 'webpack'
+import webpack, { Compiler, NormalModule, RuntimeGlobals, sources } from 'webpack'
 import ContainerReferencePlugin from 'webpack/lib/container/ContainerReferencePlugin'
 import RemoteModule from 'webpack/lib/container/RemoteModule'
 import type { ContainerReferencePluginOptions, RemotesConfig } from 'webpack/types'
-import { ConcatSource, RawSource } from 'webpack-sources'
 
 import { addRequireToSource, getChunkEntryModule, getChunkIdOrName } from '../utils'
 import { CollectedDeps, MF_NAME } from '../utils/constant'
@@ -23,6 +22,8 @@ const RemoteToExternalDependency = require('webpack/lib/container/RemoteToExtern
 const PLUGIN_NAME = 'TaroContainerReferencePlugin'
 const slashCode = '/'.charCodeAt(0)
 
+const { RawSource } = sources
+
 type MFOptions = Partial<ContainerReferencePluginOptions>
 
 interface IParams {
@@ -191,7 +192,7 @@ export default class TaroContainerReferencePlugin extends ContainerReferencePlug
         const hooks = webpack.javascript.JavascriptModulesPlugin.getCompilationHooks(compilation)
         hooks.render.tap(
           PLUGIN_NAME,
-          (modules: ConcatSource, { chunk }) => {
+          (modules: sources.ConcatSource, { chunk }) => {
             const chunkEntryModule = getChunkEntryModule(compilation, chunk) as any
             if (chunkEntryModule) {
               const entryModule = chunkEntryModule.rootModule ?? chunkEntryModule

diff --git a/packages/taro-webpack5-runner/package.json b/packages/taro-webpack5-runner/package.json
@@ -95,7 +95,6 @@
     "webpack-chain": "6.5.1",
     "webpack-dev-server": "4.7.4",
     "webpack-format-messages": "^2.0.6",
-    "webpack-sources": "^3.2.3",
     "webpackbar": "^5.0.2"
   },
   "devDependencies": {

diff --git a/packages/taro-webpack5-runner/src/plugins/MiniPlugin.ts b/packages/taro-webpack5-runner/src/plugins/MiniPlugin.ts
@@ -17,9 +17,8 @@ import { AppConfig, Config } from '@tarojs/taro'
 import fs from 'fs-extra'
 import { urlToRequest } from 'loader-utils'
 import path from 'path'
-import webpack, { Compilation, Compiler } from 'webpack'
+import webpack, { Compilation, Compiler, sources } from 'webpack'
 import EntryDependency from 'webpack/lib/dependencies/EntryDependency'
-import { ConcatSource, RawSource } from 'webpack-sources'
 
 import TaroSingleEntryDependency from '../dependencies/TaroSingleEntryDependency'
 import { PrerenderConfig, validatePrerenderPages } from '../prerender/prerender'
@@ -30,6 +29,7 @@ import TaroNormalModulesPlugin from './TaroNormalModulesPlugin'
 import TaroSingleEntryPlugin from './TaroSingleEntryPlugin'
 
 const PLUGIN_NAME = 'TaroMiniPlugin'
+const { ConcatSource, RawSource } = sources
 
 interface ITaroMiniPluginOptions {
   appEntry?: string

diff --git a/packages/taro-webpack5-runner/src/plugins/MiniSplitChunksPlugin.ts b/packages/taro-webpack5-runner/src/plugins/MiniSplitChunksPlugin.ts
@@ -5,13 +5,13 @@ import md5 from 'md5'
 import path from 'path'
 import { Chunk, ChunkGraph, Compilation, Compiler, Module, sources } from 'webpack'
 import SplitChunksPlugin from 'webpack/lib/optimize/SplitChunksPlugin'
-import { ConcatSource, RawSource } from 'webpack-sources'
 
 import type { IFileType } from '../utils/types'
 
 const PLUGIN_NAME = 'MiniSplitChunkPlugin' // 插件名
 const SUB_COMMON_DIR = 'sub-common' // 分包公共依赖目录
 const SUB_VENDORS_NAME = 'sub-vendors' // 分包 vendors 文件名
+const { ConcatSource, RawSource } = sources
 
 const FileExtsMap = {
   JS: '.js',

diff --git a/packages/taro-webpack5-runner/src/plugins/TaroLoadChunksPlugin.ts b/packages/taro-webpack5-runner/src/plugins/TaroLoadChunksPlugin.ts
@@ -3,15 +3,15 @@ import {
   taroJsComponents
 } from '@tarojs/helper'
 import { toDashed } from '@tarojs/shared'
-import webpack, { Chunk, ChunkGraph, Compilation, Compiler } from 'webpack'
-import { ConcatSource } from 'webpack-sources'
+import webpack, { Chunk, ChunkGraph, Compilation, Compiler, sources } from 'webpack'
 
 import { componentConfig } from '../template/component'
 import type { AddPageChunks, IComponent } from '../utils/types'
 import { addRequireToSource, getChunkEntryModule, getChunkIdOrName } from '../utils/webpack'
 import TaroNormalModule from './TaroNormalModule'
 
 const PLUGIN_NAME = 'TaroLoadChunksPlugin'
+const { ConcatSource } = sources
 
 interface IOptions {
   commonChunks: string[]
@@ -88,7 +88,7 @@ export default class TaroLoadChunksPlugin {
         }
       })
 
-      webpack.javascript.JavascriptModulesPlugin.getCompilationHooks(compilation).render.tap(PLUGIN_NAME, (modules: ConcatSource, { chunk }) => {
+      webpack.javascript.JavascriptModulesPlugin.getCompilationHooks(compilation).render.tap(PLUGIN_NAME, (modules: sources.ConcatSource, { chunk }) => {
         const chunkEntryModule = getChunkEntryModule(compilation, chunk) as any
         if (chunkEntryModule) {
           const entryModule: TaroNormalModule = chunkEntryModule.rootModule ?? chunkEntryModule
@@ -108,7 +108,7 @@ export default class TaroLoadChunksPlugin {
       /**
        * 在每个 chunk 文本刚生成后，按判断条件在文本头部插入 require 语句
        */
-      webpack.javascript.JavascriptModulesPlugin.getCompilationHooks(compilation).render.tap(PLUGIN_NAME, (modules: ConcatSource, { chunk }) => {
+      webpack.javascript.JavascriptModulesPlugin.getCompilationHooks(compilation).render.tap(PLUGIN_NAME, (modules: sources.ConcatSource, { chunk }) => {
         const chunkEntryModule = getChunkEntryModule(compilation, chunk) as any
         if (chunkEntryModule) {
           if (this.isBuildPlugin) {

diff --git a/packages/taro-webpack5-runner/src/utils/webpack.ts b/packages/taro-webpack5-runner/src/utils/webpack.ts
@@ -1,12 +1,13 @@
 import { promoteRelativePath } from '@tarojs/helper'
 import path from 'path'
-import { Chunk, Compilation } from 'webpack'
-import { ConcatSource, Source } from 'webpack-sources'
+import { Chunk, Compilation, sources} from 'webpack'
+
+const { ConcatSource } = sources
 
 /**
  * 在文本头部加入一些 require 语句
  */
-export function addRequireToSource (id: string, modules: Source, commonChunks: (Chunk | { name: string })[]) {
+export function addRequireToSource (id: string, modules: sources.Source, commonChunks: (Chunk | { name: string })[]) {
   const source = new ConcatSource()
   commonChunks.forEach(chunkItem => {
     source.add(`require(${JSON.stringify(promoteRelativePath(path.relative(id, chunkItem.name)))});\n`)

diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml