fix: Handling missing sourcemap

wongnai · Jul 26, 2022 · 421d6d5 · 421d6d5
1 parent 4d5137d
commit 421d6d5
Show file tree

Hide file tree

Showing 6 changed files with 530 additions and 2,032 deletions.
diff --git a/package.json b/package.json
@@ -1,41 +1,41 @@
 {
-  "name": "define-after-bundle-webpack-plugin",
-  "version": "0.0.0",
-  "main": "build/index.js",
-  "types": "build/index.d.ts",
-  "entry": "src/index.ts",
-  "deploy": "build",
-  "license": "MIT",
-  "repository": {
-    "type": "git",
-    "url": "https://github.com/wongnai/define-after-bundle-webpack-plugin.git"
-  },
-  "homepage": "https://github.com/wongnai/define-after-bundle-webpack-plugin#readme",
-  "scripts": {
-    "build": "rollup -c",
-    "lint": "eslint --ext .ts,.js --quiet",
-    "test": "yarn build && npx webpack --config ./test/webpack.config.js && node ./test/test-bundle.js"
-  },
-  "devDependencies": {
-    "@rollup/plugin-commonjs": "19.0.0",
-    "@rollup/plugin-json": "4.1.0",
-    "@rollup/plugin-node-resolve": "13.0.0",
-    "@rollup/plugin-typescript": "8.3.0",
-    "@types/node": "16.11.6",
-    "@types/webpack": "4",
-    "@types/webpack-env": "1.16.3",
-    "eslint": "7.28.0",
-    "eslint-config-standard": "16.0.3",
-    "husky": "6.0.0",
-    "lint-staged": "11.0.0",
-    "prettier": "2.3.1",
-    "rollup": "2.51.0",
-    "rollup-plugin-cleaner": "1.0.0",
-    "rollup-plugin-includepaths": "0.2.4",
-    "rollup-plugin-visualizer": "5.5.0",
-    "semantic-release": "18.0.0",
-    "typescript": "4.4.4",
-    "webpack": "4",
-    "webpack-cli": "4.9.1"
-  }
-}
+    "name": "define-after-bundle-webpack-plugin",
+    "version": "0.0.0",
+    "main": "build/index.js",
+    "types": "build/index.d.ts",
+    "entry": "src/index.ts",
+    "deploy": "build",
+    "license": "MIT",
+    "repository": {
+        "type": "git",
+        "url": "https://github.com/wongnai/define-after-bundle-webpack-plugin.git"
+    },
+    "homepage": "https://github.com/wongnai/define-after-bundle-webpack-plugin#readme",
+    "scripts": {
+        "build": "rollup -c",
+        "lint": "eslint --ext .ts,.js --quiet",
+        "test": "yarn build && npx webpack --config ./test/webpack.config.js && node ./test/test-bundle.js"
+    },
+    "devDependencies": {
+        "@rollup/plugin-commonjs": "19.0.0",
+        "@rollup/plugin-json": "4.1.0",
+        "@rollup/plugin-node-resolve": "13.0.0",
+        "@rollup/plugin-typescript": "8.3.0",
+        "@types/node": "16.11.6",
+        "@types/webpack": "5.28.0",
+        "@types/webpack-env": "1.17.0",
+        "eslint": "7.28.0",
+        "eslint-config-standard": "16.0.3",
+        "husky": "6.0.0",
+        "lint-staged": "11.0.0",
+        "prettier": "2.3.1",
+        "rollup": "2.51.0",
+        "rollup-plugin-cleaner": "1.0.0",
+        "rollup-plugin-includepaths": "0.2.4",
+        "rollup-plugin-visualizer": "5.5.0",
+        "semantic-release": "18.0.0",
+        "typescript": "4.4.4",
+        "webpack": "5.74.0",
+        "webpack-cli": "4.10.0"
+    }
+}
diff --git a/rollup.config.js b/rollup.config.js
@@ -9,23 +9,24 @@ import visualizer from 'rollup-plugin-visualizer'
 import config from './package.json'
 
 export default {
-  input: config.entry,
-  output: {
-    dir: config.deploy,
-    format: 'cjs',
-    sourcemap: true,
-  },
-  plugins: [
-    resolve(),
-    commonjs(),
-    typescript({
-      outDir: config.deploy,
-      declaration: true,
-      emitDeclarationOnly: true,
-    }),
-    json(),
-    visualizer({
-      filename: path.resolve(config.deploy, 'stat.html')
-    }),
-  ],
-};
+    input: config.entry,
+    external: ['webpack'],
+    output: {
+        dir: config.deploy,
+        format: 'cjs',
+        sourcemap: true,
+    },
+    plugins: [
+        resolve(),
+        commonjs(),
+        typescript({
+            outDir: config.deploy,
+            declaration: true,
+            emitDeclarationOnly: true,
+        }),
+        json(),
+        visualizer({
+            filename: path.resolve(config.deploy, 'stat.html')
+        }),
+    ],
+};
diff --git a/src/index.ts b/src/index.ts
@@ -1,7 +1,4 @@
-import Webpack from 'webpack'
-import { ConcatSource } from 'webpack-sources'
-
-const PLUGIN_NAME = 'DefineAfterBundleWebpackPlugin'
+import { Compiler, sources } from 'webpack'
 
 export class DefineAfterBundleWebpackPlugin {
 	replaceMapper: Record<string, any>
@@ -10,30 +7,38 @@ export class DefineAfterBundleWebpackPlugin {
 		this.replaceMapper = replaceMapper
 	}
 
-	apply(compiler: Webpack.Compiler) {
-		compiler.hooks.compilation.tap(PLUGIN_NAME, compilation => {
-			compilation.hooks.afterOptimizeChunkAssets.tap(PLUGIN_NAME, chunks => {
-				for (const chunk of chunks) {
-					if (!chunk.files) {
-						continue
-					}
+	apply(compiler: Compiler) {
+		compiler.hooks.compilation.tap(DefineAfterBundleWebpackPlugin.name, compilation => {
+			const { devtool } = compiler.options
+
+			compilation.hooks.processAssets.tap(DefineAfterBundleWebpackPlugin.name, assets => {
+				for (const index in assets) {
+					const asset = compilation.getAsset(index)
+					const source = asset.source
 
-					for (const file of chunk.files) {
-						compilation.updateAsset(file, old => {
-							const source = new ConcatSource(old).source()
+					const content = source.source().toString()
 
-							return new ConcatSource(
-								Object.keys(this.replaceMapper).reduce(
-									(updatedSource, toBeReplacedValue) =>
-										updatedSource.replace(
-											new RegExp(toBeReplacedValue, 'g'),
-											this.replaceMapper[toBeReplacedValue],
-										),
-									source,
+					const newSource = new sources.ConcatSource(
+						Object.keys(this.replaceMapper).reduce(
+							(updatedSource, toBeReplacedValue) =>
+								updatedSource.replace(
+									new RegExp(toBeReplacedValue, 'g'),
+									this.replaceMapper[toBeReplacedValue],
 								),
-							)
-						})
-					}
+							content,
+						),
+					)
+
+					compilation.updateAsset(
+						index,
+						devtool
+							? new sources.SourceMapSource(
+									newSource.source(),
+									asset.name,
+									source.sourceAndMap().map,
+							  )
+							: newSource,
+					)
 				}
 			})
 		})

diff --git a/test/test-bundle.js b/test/test-bundle.js
@@ -5,11 +5,18 @@ const rootPath = process.cwd()
 const buildScriptPath = path.join('build', 'index.js')
 const testPath = path.join(rootPath, 'test')
 const outputScriptPath = path.join(testPath, buildScriptPath)
+const sourceMapPath = `${outputScriptPath}.map`
 
 const outputText = fs.readFileSync(outputScriptPath).toString()
 
 if (!outputText.includes('"New Value"')) {
     throw new Error('No replacement found in build')
 }
 
-console.log('This plugin is fine to be used.')
+const sourceMapText = fs.readFileSync(sourceMapPath).toString()
+
+if (!sourceMapText.includes('console.log(process.env.TEST)')) {
+    throw new Error('Generated Sourcemap is incorrect')
+}
+
+console.log('This plugin is fine to be used.')
diff --git a/test/webpack.config.js b/test/webpack.config.js
@@ -13,6 +13,6 @@ module.exports = {
         }),
     ],
     target: 'node',
-    mode: 'development',
-    devtool: false,
-}
+    mode: 'production',
+    devtool: 'source-map',
+}