From 39b36e95fa72863eac1ee80e20d1c768abc0db39 Mon Sep 17 00:00:00 2001 From: Light Leung Date: Sat, 20 Jul 2019 17:58:42 +0800 Subject: [PATCH 01/23] feat: ability to disable extract async modules --- src/index.js | 73 +++++++++++++++++-- src/lib/ReplaceDependency.js | 26 +++++++ .../cases/disable-async-bool/async-import.css | 3 + test/cases/disable-async-bool/async.css | 3 + test/cases/disable-async-bool/async.js | 6 ++ test/cases/disable-async-bool/both-async.css | 5 ++ .../disable-async-bool/expected/main.css | 11 +++ test/cases/disable-async-bool/in-async.css | 5 ++ test/cases/disable-async-bool/in-async.js | 1 + test/cases/disable-async-bool/in-async2.css | 5 ++ test/cases/disable-async-bool/index.js | 8 ++ test/cases/disable-async-bool/main.css | 5 ++ test/cases/disable-async-bool/shared.css | 3 + .../disable-async-bool/webpack.config.js | 19 +++++ .../cases/disable-async-func/async-import.css | 3 + test/cases/disable-async-func/async.css | 3 + test/cases/disable-async-func/async.js | 9 +++ test/cases/disable-async-func/async2.js | 4 + test/cases/disable-async-func/both-async.css | 5 ++ .../both-page-async-disabled.css | 3 + .../disable-async-func/both-page-async.css | 3 + .../expected/0-56c757a48b3b0aad25e6.css | 11 +++ .../expected/2-b3c49f78881fc8f7524b.css | 4 + .../expected/3-cf9368c5af58f3871937.css | 4 + .../expected/index1-1d6bfe20d478126e4887.css | 11 +++ test/cases/disable-async-func/in-async.css | 5 ++ test/cases/disable-async-func/in-async.js | 1 + test/cases/disable-async-func/in-async2.css | 5 ++ test/cases/disable-async-func/index.js | 8 ++ test/cases/disable-async-func/index2.js | 3 + test/cases/disable-async-func/main.css | 5 ++ test/cases/disable-async-func/shared.css | 3 + .../disable-async-func/webpack.config.js | 31 ++++++++ 33 files changed, 289 insertions(+), 5 deletions(-) create mode 100644 src/lib/ReplaceDependency.js create mode 100644 test/cases/disable-async-bool/async-import.css create mode 100644 test/cases/disable-async-bool/async.css create mode 100644 test/cases/disable-async-bool/async.js create mode 100644 test/cases/disable-async-bool/both-async.css create mode 100644 test/cases/disable-async-bool/expected/main.css create mode 100644 test/cases/disable-async-bool/in-async.css create mode 100644 test/cases/disable-async-bool/in-async.js create mode 100644 test/cases/disable-async-bool/in-async2.css create mode 100644 test/cases/disable-async-bool/index.js create mode 100644 test/cases/disable-async-bool/main.css create mode 100644 test/cases/disable-async-bool/shared.css create mode 100644 test/cases/disable-async-bool/webpack.config.js create mode 100644 test/cases/disable-async-func/async-import.css create mode 100644 test/cases/disable-async-func/async.css create mode 100644 test/cases/disable-async-func/async.js create mode 100644 test/cases/disable-async-func/async2.js create mode 100644 test/cases/disable-async-func/both-async.css create mode 100644 test/cases/disable-async-func/both-page-async-disabled.css create mode 100644 test/cases/disable-async-func/both-page-async.css create mode 100644 test/cases/disable-async-func/expected/0-56c757a48b3b0aad25e6.css create mode 100644 test/cases/disable-async-func/expected/2-b3c49f78881fc8f7524b.css create mode 100644 test/cases/disable-async-func/expected/3-cf9368c5af58f3871937.css create mode 100644 test/cases/disable-async-func/expected/index1-1d6bfe20d478126e4887.css create mode 100644 test/cases/disable-async-func/in-async.css create mode 100644 test/cases/disable-async-func/in-async.js create mode 100644 test/cases/disable-async-func/in-async2.css create mode 100644 test/cases/disable-async-func/index.js create mode 100644 test/cases/disable-async-func/index2.js create mode 100644 test/cases/disable-async-func/main.css create mode 100644 test/cases/disable-async-func/shared.css create mode 100644 test/cases/disable-async-func/webpack.config.js diff --git a/src/index.js b/src/index.js index bbe672a4..ec25ba3c 100644 --- a/src/index.js +++ b/src/index.js @@ -2,6 +2,9 @@ import webpack from 'webpack'; import sources from 'webpack-sources'; +import NullFactory from 'webpack/lib/NullFactory'; + +import ReplaceDependency from './lib/ReplaceDependency'; const { ConcatSource, SourceMapSource, OriginalSource } = sources; const { @@ -148,6 +151,17 @@ class MiniCssExtractPlugin { apply(compiler) { compiler.hooks.thisCompilation.tap(pluginName, (compilation) => { + const asyncModuleToBeRebuild = new Set(); + compilation[MODULE_TYPE] = { + asyncModuleToBeRebuild, + }; + + compilation.dependencyFactories.set(ReplaceDependency, new NullFactory()); + compilation.dependencyTemplates.set( + ReplaceDependency, + new ReplaceDependency.Template() + ); + compilation.hooks.normalModuleLoader.tap(pluginName, (lc, m) => { const loaderContext = lc; const module = m; @@ -215,7 +229,8 @@ class MiniCssExtractPlugin { pluginName, (result, { chunk }) => { const renderedModules = Array.from(chunk.modulesIterable).filter( - (module) => module.type === MODULE_TYPE + (module) => + module.type === MODULE_TYPE && !asyncModuleToBeRebuild.has(module) ); if (renderedModules.length > 0) { @@ -283,7 +298,7 @@ class MiniCssExtractPlugin { const { mainTemplate } = compilation; mainTemplate.hooks.localVars.tap(pluginName, (source, chunk) => { - const chunkMap = this.getCssChunkObject(chunk); + const chunkMap = this.getCssChunkObject(chunk, compilation); if (Object.keys(chunkMap).length > 0) { return Template.asString([ @@ -304,7 +319,7 @@ class MiniCssExtractPlugin { mainTemplate.hooks.requireEnsure.tap( pluginName, (source, chunk, hash) => { - const chunkMap = this.getCssChunkObject(chunk); + const chunkMap = this.getCssChunkObject(chunk, compilation); if (Object.keys(chunkMap).length > 0) { const chunkMaps = chunk.getChunkMaps(); @@ -433,17 +448,65 @@ class MiniCssExtractPlugin { return source; } ); + + const len = `// extracted by ${pluginName}`.length; + mainTemplate.hooks.beforeStartup.tap( + pluginName, + (source, chunk, hash) => { + for (const _m of asyncModuleToBeRebuild) { + const issuerDeps = _m.issuer.dependencies; + let firstIndex = -1; + const content = []; + + for (let i = issuerDeps.length - 1; i >= 0; i--) { + const {module} = issuerDeps[i]; + if (asyncModuleToBeRebuild.has(module)) { + firstIndex = i; + content.push(module.content.replace(/(?:[\r\n]+)/g, '\\n')); + issuerDeps.splice(i, 1); + } + } + + if (firstIndex > -1) { + issuerDeps.splice( + firstIndex, + 0, + new ReplaceDependency( + `module.exports = "${content.join('')}";`, + [0, len] + ) + ); + } + } + return source; + } + ); }); } - getCssChunkObject(mainChunk) { + shouldDisableAsync({ module }) { + const {disableAsync} = this.options; + let shouldDisable = false; + if (disableAsync === true) { + shouldDisable = true; + } else if (typeof disableAsync === 'function') { + shouldDisable = disableAsync({ module }); + } + + return shouldDisable; + } + + getCssChunkObject(mainChunk, compilation) { const obj = {}; for (const chunk of mainChunk.getAllAsyncChunks()) { for (const module of chunk.modulesIterable) { if (module.type === MODULE_TYPE) { + if (this.shouldDisableAsync({ module })) { + compilation[MODULE_TYPE].asyncModuleToBeRebuild.add(module); + } + obj[chunk.id] = 1; - break; } } } diff --git a/src/lib/ReplaceDependency.js b/src/lib/ReplaceDependency.js new file mode 100644 index 00000000..43616efc --- /dev/null +++ b/src/lib/ReplaceDependency.js @@ -0,0 +1,26 @@ +const NullDependency = require('webpack/lib/dependencies/NullDependency'); + +class ReplaceDependency extends NullDependency { + constructor(replacement, range) { + super(); + this.replacement = replacement; + this.range = range; + } + + get type() { + return 'mini-css-extract-replace'; + } + + updateHash(hash) { + super.updateHash(hash); + hash.update(this.replacement); + } +} + +ReplaceDependency.Template = class ReplaceDependencyTemplate { + apply(dep, source) { + source.replace(dep.range[0], dep.range[1] - 1, dep.replacement); + } +}; + +module.exports = ReplaceDependency; diff --git a/test/cases/disable-async-bool/async-import.css b/test/cases/disable-async-bool/async-import.css new file mode 100644 index 00000000..107a6a79 --- /dev/null +++ b/test/cases/disable-async-bool/async-import.css @@ -0,0 +1,3 @@ +.async-import { + background: black; +} diff --git a/test/cases/disable-async-bool/async.css b/test/cases/disable-async-bool/async.css new file mode 100644 index 00000000..65bdcfa7 --- /dev/null +++ b/test/cases/disable-async-bool/async.css @@ -0,0 +1,3 @@ +.async { + background: blue; +} diff --git a/test/cases/disable-async-bool/async.js b/test/cases/disable-async-bool/async.js new file mode 100644 index 00000000..7ffe9acb --- /dev/null +++ b/test/cases/disable-async-bool/async.js @@ -0,0 +1,6 @@ +import './in-async'; +import './in-async.css'; +import './in-async2.css'; +import './both-async.css'; + +console.log('async.js'); diff --git a/test/cases/disable-async-bool/both-async.css b/test/cases/disable-async-bool/both-async.css new file mode 100644 index 00000000..8a2b22cc --- /dev/null +++ b/test/cases/disable-async-bool/both-async.css @@ -0,0 +1,5 @@ +@import 'shared.css'; + +.both-async { + color: red; +} diff --git a/test/cases/disable-async-bool/expected/main.css b/test/cases/disable-async-bool/expected/main.css new file mode 100644 index 00000000..fef1314f --- /dev/null +++ b/test/cases/disable-async-bool/expected/main.css @@ -0,0 +1,11 @@ +.shared { + background: pink; +} +body { + background: red; +} + +.both-async { + color: red; +} + diff --git a/test/cases/disable-async-bool/in-async.css b/test/cases/disable-async-bool/in-async.css new file mode 100644 index 00000000..922b9d89 --- /dev/null +++ b/test/cases/disable-async-bool/in-async.css @@ -0,0 +1,5 @@ +@import './async-import.css'; + +.in-async { + background: green; +} diff --git a/test/cases/disable-async-bool/in-async.js b/test/cases/disable-async-bool/in-async.js new file mode 100644 index 00000000..4d38c2ba --- /dev/null +++ b/test/cases/disable-async-bool/in-async.js @@ -0,0 +1 @@ +console.log('in-async.js'); diff --git a/test/cases/disable-async-bool/in-async2.css b/test/cases/disable-async-bool/in-async2.css new file mode 100644 index 00000000..28781c21 --- /dev/null +++ b/test/cases/disable-async-bool/in-async2.css @@ -0,0 +1,5 @@ +@import './async-import.css'; + +.in-async-2 { + background: green; +} diff --git a/test/cases/disable-async-bool/index.js b/test/cases/disable-async-bool/index.js new file mode 100644 index 00000000..46ff7af4 --- /dev/null +++ b/test/cases/disable-async-bool/index.js @@ -0,0 +1,8 @@ +import './main.css'; +import './both-async.css'; + +import('./async'); + +import('./async.css'); + +console.log('index.js'); diff --git a/test/cases/disable-async-bool/main.css b/test/cases/disable-async-bool/main.css new file mode 100644 index 00000000..584e42d4 --- /dev/null +++ b/test/cases/disable-async-bool/main.css @@ -0,0 +1,5 @@ +@import 'shared.css'; + +body { + background: red; +} diff --git a/test/cases/disable-async-bool/shared.css b/test/cases/disable-async-bool/shared.css new file mode 100644 index 00000000..0a1ca625 --- /dev/null +++ b/test/cases/disable-async-bool/shared.css @@ -0,0 +1,3 @@ +.shared { + background: pink; +} diff --git a/test/cases/disable-async-bool/webpack.config.js b/test/cases/disable-async-bool/webpack.config.js new file mode 100644 index 00000000..16c6ba06 --- /dev/null +++ b/test/cases/disable-async-bool/webpack.config.js @@ -0,0 +1,19 @@ +import Self from '../../../src'; + +module.exports = { + entry: './index.js', + module: { + rules: [ + { + test: /\.css$/, + use: [Self.loader, 'css-loader'], + }, + ], + }, + plugins: [ + new Self({ + filename: '[name].css', + disableAsync: true, + }), + ], +}; diff --git a/test/cases/disable-async-func/async-import.css b/test/cases/disable-async-func/async-import.css new file mode 100644 index 00000000..107a6a79 --- /dev/null +++ b/test/cases/disable-async-func/async-import.css @@ -0,0 +1,3 @@ +.async-import { + background: black; +} diff --git a/test/cases/disable-async-func/async.css b/test/cases/disable-async-func/async.css new file mode 100644 index 00000000..65bdcfa7 --- /dev/null +++ b/test/cases/disable-async-func/async.css @@ -0,0 +1,3 @@ +.async { + background: blue; +} diff --git a/test/cases/disable-async-func/async.js b/test/cases/disable-async-func/async.js new file mode 100644 index 00000000..da7c99c6 --- /dev/null +++ b/test/cases/disable-async-func/async.js @@ -0,0 +1,9 @@ +import './in-async'; +import './in-async2.css'; +import './in-async.css'; +import './both-async.css'; + +import './both-page-async-disabled.css'; +import './both-page-async.css'; + +console.log('async.js'); diff --git a/test/cases/disable-async-func/async2.js b/test/cases/disable-async-func/async2.js new file mode 100644 index 00000000..c0c88ae8 --- /dev/null +++ b/test/cases/disable-async-func/async2.js @@ -0,0 +1,4 @@ +import './both-page-async-disabled.css'; +import './both-page-async.css'; + +console.log('async2.js'); diff --git a/test/cases/disable-async-func/both-async.css b/test/cases/disable-async-func/both-async.css new file mode 100644 index 00000000..8a2b22cc --- /dev/null +++ b/test/cases/disable-async-func/both-async.css @@ -0,0 +1,5 @@ +@import 'shared.css'; + +.both-async { + color: red; +} diff --git a/test/cases/disable-async-func/both-page-async-disabled.css b/test/cases/disable-async-func/both-page-async-disabled.css new file mode 100644 index 00000000..c4e99243 --- /dev/null +++ b/test/cases/disable-async-func/both-page-async-disabled.css @@ -0,0 +1,3 @@ +.both-page-async-disabled { + color: yellow; +} diff --git a/test/cases/disable-async-func/both-page-async.css b/test/cases/disable-async-func/both-page-async.css new file mode 100644 index 00000000..b3336101 --- /dev/null +++ b/test/cases/disable-async-func/both-page-async.css @@ -0,0 +1,3 @@ +.both-page-async { + color: cyan; +} diff --git a/test/cases/disable-async-func/expected/0-56c757a48b3b0aad25e6.css b/test/cases/disable-async-func/expected/0-56c757a48b3b0aad25e6.css new file mode 100644 index 00000000..ad163ea9 --- /dev/null +++ b/test/cases/disable-async-func/expected/0-56c757a48b3b0aad25e6.css @@ -0,0 +1,11 @@ +.async-import { + background: black; +} +.in-async-2 { + background: green; +} + +.both-page-async { + color: cyan; +} + diff --git a/test/cases/disable-async-func/expected/2-b3c49f78881fc8f7524b.css b/test/cases/disable-async-func/expected/2-b3c49f78881fc8f7524b.css new file mode 100644 index 00000000..e17c4e09 --- /dev/null +++ b/test/cases/disable-async-func/expected/2-b3c49f78881fc8f7524b.css @@ -0,0 +1,4 @@ +.both-page-async { + color: cyan; +} + diff --git a/test/cases/disable-async-func/expected/3-cf9368c5af58f3871937.css b/test/cases/disable-async-func/expected/3-cf9368c5af58f3871937.css new file mode 100644 index 00000000..67332816 --- /dev/null +++ b/test/cases/disable-async-func/expected/3-cf9368c5af58f3871937.css @@ -0,0 +1,4 @@ +.async { + background: blue; +} + diff --git a/test/cases/disable-async-func/expected/index1-1d6bfe20d478126e4887.css b/test/cases/disable-async-func/expected/index1-1d6bfe20d478126e4887.css new file mode 100644 index 00000000..fef1314f --- /dev/null +++ b/test/cases/disable-async-func/expected/index1-1d6bfe20d478126e4887.css @@ -0,0 +1,11 @@ +.shared { + background: pink; +} +body { + background: red; +} + +.both-async { + color: red; +} + diff --git a/test/cases/disable-async-func/in-async.css b/test/cases/disable-async-func/in-async.css new file mode 100644 index 00000000..922b9d89 --- /dev/null +++ b/test/cases/disable-async-func/in-async.css @@ -0,0 +1,5 @@ +@import './async-import.css'; + +.in-async { + background: green; +} diff --git a/test/cases/disable-async-func/in-async.js b/test/cases/disable-async-func/in-async.js new file mode 100644 index 00000000..4d38c2ba --- /dev/null +++ b/test/cases/disable-async-func/in-async.js @@ -0,0 +1 @@ +console.log('in-async.js'); diff --git a/test/cases/disable-async-func/in-async2.css b/test/cases/disable-async-func/in-async2.css new file mode 100644 index 00000000..28781c21 --- /dev/null +++ b/test/cases/disable-async-func/in-async2.css @@ -0,0 +1,5 @@ +@import './async-import.css'; + +.in-async-2 { + background: green; +} diff --git a/test/cases/disable-async-func/index.js b/test/cases/disable-async-func/index.js new file mode 100644 index 00000000..46ff7af4 --- /dev/null +++ b/test/cases/disable-async-func/index.js @@ -0,0 +1,8 @@ +import './main.css'; +import './both-async.css'; + +import('./async'); + +import('./async.css'); + +console.log('index.js'); diff --git a/test/cases/disable-async-func/index2.js b/test/cases/disable-async-func/index2.js new file mode 100644 index 00000000..269b546c --- /dev/null +++ b/test/cases/disable-async-func/index2.js @@ -0,0 +1,3 @@ +import('./async2'); + +console.log('index2'); diff --git a/test/cases/disable-async-func/main.css b/test/cases/disable-async-func/main.css new file mode 100644 index 00000000..584e42d4 --- /dev/null +++ b/test/cases/disable-async-func/main.css @@ -0,0 +1,5 @@ +@import 'shared.css'; + +body { + background: red; +} diff --git a/test/cases/disable-async-func/shared.css b/test/cases/disable-async-func/shared.css new file mode 100644 index 00000000..0a1ca625 --- /dev/null +++ b/test/cases/disable-async-func/shared.css @@ -0,0 +1,3 @@ +.shared { + background: pink; +} diff --git a/test/cases/disable-async-func/webpack.config.js b/test/cases/disable-async-func/webpack.config.js new file mode 100644 index 00000000..4a9f3170 --- /dev/null +++ b/test/cases/disable-async-func/webpack.config.js @@ -0,0 +1,31 @@ +import Self from '../../../src'; + +module.exports = { + entry: { + index1: './index.js', + index2: './index2.js', + }, + module: { + rules: [ + { + test: /\.css$/, + use: [Self.loader, 'css-loader'], + }, + ], + }, + plugins: [ + new Self({ + filename: '[name]-[contenthash].css', + disableAsync({ module }) { + let ret = false; + if ( + module.content.indexOf('in-async ') > -1 || + module.content.indexOf('both-page-async-disabled') > -1 + ) { + ret = true; + } + return ret; + }, + }), + ], +}; From 188cf5cfe2187dac3d659bd3b5631623027cc2a7 Mon Sep 17 00:00:00 2001 From: Light Leung Date: Sat, 20 Jul 2019 18:13:15 +0800 Subject: [PATCH 02/23] feat: ability to disable extract async modules, lint fix --- src/index.js | 53 +++++++++++------------ src/lib/ReplaceDependency.js | 1 + test/cases/disable-async-bool/async.js | 2 +- test/cases/disable-async-bool/in-async.js | 2 +- test/cases/disable-async-bool/index.js | 2 +- test/cases/disable-async-func/async.js | 2 +- test/cases/disable-async-func/async2.js | 2 +- test/cases/disable-async-func/in-async.js | 2 +- test/cases/disable-async-func/index.js | 2 +- test/cases/disable-async-func/index2.js | 2 +- 10 files changed, 35 insertions(+), 35 deletions(-) diff --git a/src/index.js b/src/index.js index ec25ba3c..b760229f 100644 --- a/src/index.js +++ b/src/index.js @@ -152,6 +152,7 @@ class MiniCssExtractPlugin { apply(compiler) { compiler.hooks.thisCompilation.tap(pluginName, (compilation) => { const asyncModuleToBeRebuild = new Set(); + // eslint-disable-next-line no-param-reassign compilation[MODULE_TYPE] = { asyncModuleToBeRebuild, }; @@ -450,42 +451,40 @@ class MiniCssExtractPlugin { ); const len = `// extracted by ${pluginName}`.length; - mainTemplate.hooks.beforeStartup.tap( - pluginName, - (source, chunk, hash) => { - for (const _m of asyncModuleToBeRebuild) { - const issuerDeps = _m.issuer.dependencies; - let firstIndex = -1; - const content = []; - - for (let i = issuerDeps.length - 1; i >= 0; i--) { - const {module} = issuerDeps[i]; - if (asyncModuleToBeRebuild.has(module)) { - firstIndex = i; - content.push(module.content.replace(/(?:[\r\n]+)/g, '\\n')); - issuerDeps.splice(i, 1); - } + mainTemplate.hooks.beforeStartup.tap(pluginName, (source) => { + for (const moduleToBeRebuild of asyncModuleToBeRebuild) { + const issuerDeps = moduleToBeRebuild.issuer.dependencies; + let firstIndex = -1; + const content = []; + + for (let i = issuerDeps.length - 1; i >= 0; i--) { + const { module } = issuerDeps[i]; + if (asyncModuleToBeRebuild.has(module)) { + firstIndex = i; + content.push(module.content.replace(/(?:[\r\n]+)/g, '\\n')); + issuerDeps.splice(i, 1); } + } - if (firstIndex > -1) { - issuerDeps.splice( - firstIndex, + if (firstIndex > -1) { + issuerDeps.splice( + firstIndex, + 0, + new ReplaceDependency(`module.exports = "${content.join('')}";`, [ 0, - new ReplaceDependency( - `module.exports = "${content.join('')}";`, - [0, len] - ) - ); - } + len, + ]) + ); } - return source; } - ); + + return source; + }); }); } shouldDisableAsync({ module }) { - const {disableAsync} = this.options; + const { disableAsync } = this.options; let shouldDisable = false; if (disableAsync === true) { shouldDisable = true; diff --git a/src/lib/ReplaceDependency.js b/src/lib/ReplaceDependency.js index 43616efc..6177a85b 100644 --- a/src/lib/ReplaceDependency.js +++ b/src/lib/ReplaceDependency.js @@ -2,6 +2,7 @@ const NullDependency = require('webpack/lib/dependencies/NullDependency'); class ReplaceDependency extends NullDependency { constructor(replacement, range) { + /* eslint-disable class-methods-use-this */ super(); this.replacement = replacement; this.range = range; diff --git a/test/cases/disable-async-bool/async.js b/test/cases/disable-async-bool/async.js index 7ffe9acb..4455a5e0 100644 --- a/test/cases/disable-async-bool/async.js +++ b/test/cases/disable-async-bool/async.js @@ -3,4 +3,4 @@ import './in-async.css'; import './in-async2.css'; import './both-async.css'; -console.log('async.js'); +// console.log('async.js'); diff --git a/test/cases/disable-async-bool/in-async.js b/test/cases/disable-async-bool/in-async.js index 4d38c2ba..33611214 100644 --- a/test/cases/disable-async-bool/in-async.js +++ b/test/cases/disable-async-bool/in-async.js @@ -1 +1 @@ -console.log('in-async.js'); +// console.log('in-async.js'); diff --git a/test/cases/disable-async-bool/index.js b/test/cases/disable-async-bool/index.js index 46ff7af4..13a5bbe1 100644 --- a/test/cases/disable-async-bool/index.js +++ b/test/cases/disable-async-bool/index.js @@ -5,4 +5,4 @@ import('./async'); import('./async.css'); -console.log('index.js'); +// console.log('index.js'); diff --git a/test/cases/disable-async-func/async.js b/test/cases/disable-async-func/async.js index da7c99c6..9da9a541 100644 --- a/test/cases/disable-async-func/async.js +++ b/test/cases/disable-async-func/async.js @@ -6,4 +6,4 @@ import './both-async.css'; import './both-page-async-disabled.css'; import './both-page-async.css'; -console.log('async.js'); +// console.log('async.js'); diff --git a/test/cases/disable-async-func/async2.js b/test/cases/disable-async-func/async2.js index c0c88ae8..205be95b 100644 --- a/test/cases/disable-async-func/async2.js +++ b/test/cases/disable-async-func/async2.js @@ -1,4 +1,4 @@ import './both-page-async-disabled.css'; import './both-page-async.css'; -console.log('async2.js'); +// console.log('async2.js'); diff --git a/test/cases/disable-async-func/in-async.js b/test/cases/disable-async-func/in-async.js index 4d38c2ba..33611214 100644 --- a/test/cases/disable-async-func/in-async.js +++ b/test/cases/disable-async-func/in-async.js @@ -1 +1 @@ -console.log('in-async.js'); +// console.log('in-async.js'); diff --git a/test/cases/disable-async-func/index.js b/test/cases/disable-async-func/index.js index 46ff7af4..13a5bbe1 100644 --- a/test/cases/disable-async-func/index.js +++ b/test/cases/disable-async-func/index.js @@ -5,4 +5,4 @@ import('./async'); import('./async.css'); -console.log('index.js'); +// console.log('index.js'); diff --git a/test/cases/disable-async-func/index2.js b/test/cases/disable-async-func/index2.js index 269b546c..e44b1ad9 100644 --- a/test/cases/disable-async-func/index2.js +++ b/test/cases/disable-async-func/index2.js @@ -1,3 +1,3 @@ import('./async2'); -console.log('index2'); +// console.log('index2'); From 4a7a1f6589132718c0acba515b9400b46459dbe9 Mon Sep 17 00:00:00 2001 From: Light Leung Date: Sat, 20 Jul 2019 18:13:41 +0800 Subject: [PATCH 03/23] feat: ability to disable extract async modules, add doc --- README.md | 21 +++++++++++++++++++++ 1 file changed, 21 insertions(+) diff --git a/README.md b/README.md index 3c570d29..b6194016 100644 --- a/README.md +++ b/README.md @@ -343,6 +343,27 @@ module.exports = { }; ``` +#### Disable extracting css from async chunks + +You may disable extracting css from async chunks with `disableAsync` option. + +```javascript +const miniCssExtractPlugin = new MiniCssExtractPlugin({ + disableAsync: true, +}); +``` + +You may also disable extracting async css modules programmatically by passing a function. + +```javascript +const miniCssExtractPlugin = new MiniCssExtractPlugin({ + disableAsync({ module }) { + // Do whatever you want. Disable by content size for example: + return module.content.length < 10 * 1024; + }, +}); +``` + #### Module Filename Option With the `moduleFilename` option you can use chunk data to customize the filename. This is particularly useful when dealing with multiple entry points and wanting to get more control out of the filename for a given entry point/chunk. In the example below, we'll use `moduleFilename` to output the generated css into a different directory. From 399aa9aa19060274f5b04640591ce8cd3f708ff6 Mon Sep 17 00:00:00 2001 From: Light Leung Date: Sat, 20 Jul 2019 18:31:14 +0800 Subject: [PATCH 04/23] feat: ability to disable extract async modules, ci fix --- test/cases/disable-async-bool/expected/main.css | 3 ++- .../expected/{0-56c757a48b3b0aad25e6.css => 0.css} | 5 +++-- .../expected/{2-b3c49f78881fc8f7524b.css => 2.css} | 2 +- .../expected/{3-cf9368c5af58f3871937.css => 3.css} | 0 .../expected/{index1-1d6bfe20d478126e4887.css => index1.css} | 3 ++- test/cases/disable-async-func/webpack.config.js | 2 +- 6 files changed, 9 insertions(+), 6 deletions(-) rename test/cases/disable-async-func/expected/{0-56c757a48b3b0aad25e6.css => 0.css} (66%) rename test/cases/disable-async-func/expected/{2-b3c49f78881fc8f7524b.css => 2.css} (56%) rename test/cases/disable-async-func/expected/{3-cf9368c5af58f3871937.css => 3.css} (100%) rename test/cases/disable-async-func/expected/{index1-1d6bfe20d478126e4887.css => index1.css} (76%) diff --git a/test/cases/disable-async-bool/expected/main.css b/test/cases/disable-async-bool/expected/main.css index fef1314f..c7bfe98b 100644 --- a/test/cases/disable-async-bool/expected/main.css +++ b/test/cases/disable-async-bool/expected/main.css @@ -1,6 +1,7 @@ .shared { - background: pink; + background: pink; } + body { background: red; } diff --git a/test/cases/disable-async-func/expected/0-56c757a48b3b0aad25e6.css b/test/cases/disable-async-func/expected/0.css similarity index 66% rename from test/cases/disable-async-func/expected/0-56c757a48b3b0aad25e6.css rename to test/cases/disable-async-func/expected/0.css index ad163ea9..ed97cafe 100644 --- a/test/cases/disable-async-func/expected/0-56c757a48b3b0aad25e6.css +++ b/test/cases/disable-async-func/expected/0.css @@ -1,11 +1,12 @@ .async-import { - background: black; + background: black; } + .in-async-2 { background: green; } .both-page-async { - color: cyan; + color: cyan; } diff --git a/test/cases/disable-async-func/expected/2-b3c49f78881fc8f7524b.css b/test/cases/disable-async-func/expected/2.css similarity index 56% rename from test/cases/disable-async-func/expected/2-b3c49f78881fc8f7524b.css rename to test/cases/disable-async-func/expected/2.css index e17c4e09..38c3dcad 100644 --- a/test/cases/disable-async-func/expected/2-b3c49f78881fc8f7524b.css +++ b/test/cases/disable-async-func/expected/2.css @@ -1,4 +1,4 @@ .both-page-async { - color: cyan; + color: cyan; } diff --git a/test/cases/disable-async-func/expected/3-cf9368c5af58f3871937.css b/test/cases/disable-async-func/expected/3.css similarity index 100% rename from test/cases/disable-async-func/expected/3-cf9368c5af58f3871937.css rename to test/cases/disable-async-func/expected/3.css diff --git a/test/cases/disable-async-func/expected/index1-1d6bfe20d478126e4887.css b/test/cases/disable-async-func/expected/index1.css similarity index 76% rename from test/cases/disable-async-func/expected/index1-1d6bfe20d478126e4887.css rename to test/cases/disable-async-func/expected/index1.css index fef1314f..c7bfe98b 100644 --- a/test/cases/disable-async-func/expected/index1-1d6bfe20d478126e4887.css +++ b/test/cases/disable-async-func/expected/index1.css @@ -1,6 +1,7 @@ .shared { - background: pink; + background: pink; } + body { background: red; } diff --git a/test/cases/disable-async-func/webpack.config.js b/test/cases/disable-async-func/webpack.config.js index 4a9f3170..a1c89186 100644 --- a/test/cases/disable-async-func/webpack.config.js +++ b/test/cases/disable-async-func/webpack.config.js @@ -15,7 +15,7 @@ module.exports = { }, plugins: [ new Self({ - filename: '[name]-[contenthash].css', + filename: '[name].css', disableAsync({ module }) { let ret = false; if ( From 26646aece59b3d69c26bd65946fc67644388b262 Mon Sep 17 00:00:00 2001 From: Light Leung Date: Sat, 20 Jul 2019 19:09:25 +0800 Subject: [PATCH 05/23] feat: ability to disable extract async modules, order fix --- src/index.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/index.js b/src/index.js index b760229f..06bb0a0d 100644 --- a/src/index.js +++ b/src/index.js @@ -461,7 +461,7 @@ class MiniCssExtractPlugin { const { module } = issuerDeps[i]; if (asyncModuleToBeRebuild.has(module)) { firstIndex = i; - content.push(module.content.replace(/(?:[\r\n]+)/g, '\\n')); + content.unshift(module.content.replace(/(?:[\r\n]+)/g, '\\n')); issuerDeps.splice(i, 1); } } From 08b8e52d16ee052f119688c8fbf5580770a2ec47 Mon Sep 17 00:00:00 2001 From: Light Leung Date: Sun, 21 Jul 2019 10:25:47 +0800 Subject: [PATCH 06/23] feat: ability to disable extract async modules, wrong initial chunks fix --- src/index.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/index.js b/src/index.js index 06bb0a0d..8488b10f 100644 --- a/src/index.js +++ b/src/index.js @@ -503,9 +503,9 @@ class MiniCssExtractPlugin { if (module.type === MODULE_TYPE) { if (this.shouldDisableAsync({ module })) { compilation[MODULE_TYPE].asyncModuleToBeRebuild.add(module); + } else { + obj[chunk.id] = 1; } - - obj[chunk.id] = 1; } } } From 775cc0c4b4b1fea921bbd3fecde93150bc767130 Mon Sep 17 00:00:00 2001 From: Light Leung Date: Sun, 21 Jul 2019 10:57:16 +0800 Subject: [PATCH 07/23] feat: ability to disable extract async modules, add manual test --- package.json | 1 + test/manual/index.html | 1 + test/manual/src/async-disabled.css | 3 +++ test/manual/src/lazy.js | 1 + test/manual/webpack.config.js | 9 ++++++++- 5 files changed, 14 insertions(+), 1 deletion(-) create mode 100644 test/manual/src/async-disabled.css diff --git a/package.json b/package.json index 3cce8c9a..1ad53b81 100644 --- a/package.json +++ b/package.json @@ -72,6 +72,7 @@ "npm-run-all": "^4.1.5", "prettier": "^1.18.2", "standard-version": "^6.0.1", + "style-loader": "^0.23.1", "webpack": "^4.35.3", "webpack-cli": "^3.3.6", "webpack-dev-server": "^3.7.2" diff --git a/test/manual/index.html b/test/manual/index.html index 8158d36a..e9343127 100644 --- a/test/manual/index.html +++ b/test/manual/index.html @@ -33,6 +33,7 @@

Lazy CSS: Must be red, but turn green when .

But turn orange, when . Additional clicks have no effect.

Refresh and press buttons in reverse order: This should turn green instead.

+

This should turn yellow after pressing "lazy-button" without loading extra css file containing "async-disabled.css".

Lazy CSS: Turn off the network and .

diff --git a/test/manual/src/async-disabled.css b/test/manual/src/async-disabled.css new file mode 100644 index 00000000..25eeb6ce --- /dev/null +++ b/test/manual/src/async-disabled.css @@ -0,0 +1,3 @@ +.async-disabled { + background: yellow; +} diff --git a/test/manual/src/lazy.js b/test/manual/src/lazy.js index faacb3a2..23bc08cb 100644 --- a/test/manual/src/lazy.js +++ b/test/manual/src/lazy.js @@ -1,3 +1,4 @@ /* eslint-env browser */ import './lazy.css'; +import './async-disabled.css'; diff --git a/test/manual/webpack.config.js b/test/manual/webpack.config.js index 3e511bfa..4e992ce6 100644 --- a/test/manual/webpack.config.js +++ b/test/manual/webpack.config.js @@ -11,7 +11,7 @@ module.exports = { rules: [ { test: /\.css$/, - use: [Self.loader, 'css-loader'], + use: ['style-loader', Self.loader, 'css-loader'], }, ], }, @@ -19,6 +19,13 @@ module.exports = { new Self({ filename: '[name].css', chunkFilename: '[contenthash].css', + disableAsync({ module }) { + let ret = false; + if (module.content.indexOf('async-disabled') > -1) { + ret = true; + } + return ret; + }, }), ], devServer: { From f9d7df149b84d9bca7b9735e3705dc50de0aa4bd Mon Sep 17 00:00:00 2001 From: Light Leung Date: Sun, 21 Jul 2019 11:07:47 +0800 Subject: [PATCH 08/23] feat: ability to disable extract async modules, update lock file --- package-lock.json | 10 ++++++++++ 1 file changed, 10 insertions(+) diff --git a/package-lock.json b/package-lock.json index d40571e2..fff8ae3c 100644 --- a/package-lock.json +++ b/package-lock.json @@ -12295,6 +12295,16 @@ "integrity": "sha1-PFMZQukIwml8DsNEhYwobHygpgo=", "dev": true }, + "style-loader": { + "version": "0.23.1", + "resolved": "https://registry.npm.taobao.org/style-loader/download/style-loader-0.23.1.tgz", + "integrity": "sha1-y5FUYG8+dxq2xKtjcCahBJF02SU=", + "dev": true, + "requires": { + "loader-utils": "^1.1.0", + "schema-utils": "^1.0.0" + } + }, "supports-color": { "version": "5.5.0", "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-5.5.0.tgz", From c38cc8c5662326208533a3d3e25a6a6840d5bb9c Mon Sep 17 00:00:00 2001 From: Light Leung Date: Sun, 21 Jul 2019 14:10:29 +0800 Subject: [PATCH 09/23] feat: ability to disable extract async modules, add tests for js files --- test/cases/disable-async-bool/expected/1.js | 46 +++ test/cases/disable-async-bool/expected/2.js | 10 + .../cases/disable-async-bool/expected/main.js | 235 +++++++++++++++ test/cases/disable-async-func/expected/0.js | 66 ++++ test/cases/disable-async-func/expected/2.js | 34 +++ test/cases/disable-async-func/expected/3.js | 10 + .../disable-async-func/expected/index1.js | 281 ++++++++++++++++++ .../disable-async-func/expected/index2.js | 260 ++++++++++++++++ 8 files changed, 942 insertions(+) create mode 100644 test/cases/disable-async-bool/expected/1.js create mode 100644 test/cases/disable-async-bool/expected/2.js create mode 100644 test/cases/disable-async-bool/expected/main.js create mode 100644 test/cases/disable-async-func/expected/0.js create mode 100644 test/cases/disable-async-func/expected/2.js create mode 100644 test/cases/disable-async-func/expected/3.js create mode 100644 test/cases/disable-async-func/expected/index1.js create mode 100644 test/cases/disable-async-func/expected/index2.js diff --git a/test/cases/disable-async-bool/expected/1.js b/test/cases/disable-async-bool/expected/1.js new file mode 100644 index 00000000..004d3e25 --- /dev/null +++ b/test/cases/disable-async-bool/expected/1.js @@ -0,0 +1,46 @@ +(window["webpackJsonp"] = window["webpackJsonp"] || []).push([[1],[ +/* 0 */, +/* 1 */, +/* 2 */, +/* 3 */ +/***/ (function(module, __webpack_exports__, __webpack_require__) { + +"use strict"; +__webpack_require__.r(__webpack_exports__); +/* harmony import */ var _in_async__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(4); +/* harmony import */ var _in_async__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(_in_async__WEBPACK_IMPORTED_MODULE_0__); +/* harmony import */ var _in_async_css__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(5); +/* harmony import */ var _in_async_css__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(_in_async_css__WEBPACK_IMPORTED_MODULE_1__); +/* harmony import */ var _in_async2_css__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(6); +/* harmony import */ var _in_async2_css__WEBPACK_IMPORTED_MODULE_2___default = /*#__PURE__*/__webpack_require__.n(_in_async2_css__WEBPACK_IMPORTED_MODULE_2__); +/* harmony import */ var _both_async_css__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(2); +/* harmony import */ var _both_async_css__WEBPACK_IMPORTED_MODULE_3___default = /*#__PURE__*/__webpack_require__.n(_both_async_css__WEBPACK_IMPORTED_MODULE_3__); + + + + + +// console.log('async.js'); + + +/***/ }), +/* 4 */ +/***/ (function(module, exports) { + +// console.log('in-async.js'); + + +/***/ }), +/* 5 */ +/***/ (function(module, exports, __webpack_require__) { + +module.exports = ".async-import {\n background: black;\n}\n.in-async {\n background: green;\n}\n"; + +/***/ }), +/* 6 */ +/***/ (function(module, exports, __webpack_require__) { + +module.exports = ".async-import {\n background: black;\n}\n.in-async-2 {\n background: green;\n}\n"; + +/***/ }) +]]); \ No newline at end of file diff --git a/test/cases/disable-async-bool/expected/2.js b/test/cases/disable-async-bool/expected/2.js new file mode 100644 index 00000000..311190ea --- /dev/null +++ b/test/cases/disable-async-bool/expected/2.js @@ -0,0 +1,10 @@ +(window["webpackJsonp"] = window["webpackJsonp"] || []).push([[2],{ + +/***/ 7: +/***/ (function(module, exports, __webpack_require__) { + +module.exports = ".async {\n background: blue;\n}\n"; + +/***/ }) + +}]); \ No newline at end of file diff --git a/test/cases/disable-async-bool/expected/main.js b/test/cases/disable-async-bool/expected/main.js new file mode 100644 index 00000000..27232d9c --- /dev/null +++ b/test/cases/disable-async-bool/expected/main.js @@ -0,0 +1,235 @@ +/******/ (function(modules) { // webpackBootstrap +/******/ // install a JSONP callback for chunk loading +/******/ function webpackJsonpCallback(data) { +/******/ var chunkIds = data[0]; +/******/ var moreModules = data[1]; +/******/ +/******/ +/******/ // add "moreModules" to the modules object, +/******/ // then flag all "chunkIds" as loaded and fire callback +/******/ var moduleId, chunkId, i = 0, resolves = []; +/******/ for(;i < chunkIds.length; i++) { +/******/ chunkId = chunkIds[i]; +/******/ if(installedChunks[chunkId]) { +/******/ resolves.push(installedChunks[chunkId][0]); +/******/ } +/******/ installedChunks[chunkId] = 0; +/******/ } +/******/ for(moduleId in moreModules) { +/******/ if(Object.prototype.hasOwnProperty.call(moreModules, moduleId)) { +/******/ modules[moduleId] = moreModules[moduleId]; +/******/ } +/******/ } +/******/ if(parentJsonpFunction) parentJsonpFunction(data); +/******/ +/******/ while(resolves.length) { +/******/ resolves.shift()(); +/******/ } +/******/ +/******/ }; +/******/ +/******/ +/******/ // The module cache +/******/ var installedModules = {}; +/******/ +/******/ // object to store loaded and loading chunks +/******/ // undefined = chunk not loaded, null = chunk preloaded/prefetched +/******/ // Promise = chunk loading, 0 = chunk loaded +/******/ var installedChunks = { +/******/ 0: 0 +/******/ }; +/******/ +/******/ +/******/ +/******/ // script path function +/******/ function jsonpScriptSrc(chunkId) { +/******/ return __webpack_require__.p + "" + ({}[chunkId]||chunkId) + ".js" +/******/ } +/******/ +/******/ // The require function +/******/ function __webpack_require__(moduleId) { +/******/ +/******/ // Check if module is in cache +/******/ if(installedModules[moduleId]) { +/******/ return installedModules[moduleId].exports; +/******/ } +/******/ // Create a new module (and put it into the cache) +/******/ var module = installedModules[moduleId] = { +/******/ i: moduleId, +/******/ l: false, +/******/ exports: {} +/******/ }; +/******/ +/******/ // Execute the module function +/******/ modules[moduleId].call(module.exports, module, module.exports, __webpack_require__); +/******/ +/******/ // Flag the module as loaded +/******/ module.l = true; +/******/ +/******/ // Return the exports of the module +/******/ return module.exports; +/******/ } +/******/ +/******/ // This file contains only the entry chunk. +/******/ // The chunk loading function for additional chunks +/******/ __webpack_require__.e = function requireEnsure(chunkId) { +/******/ var promises = []; +/******/ +/******/ +/******/ // JSONP chunk loading for javascript +/******/ +/******/ var installedChunkData = installedChunks[chunkId]; +/******/ if(installedChunkData !== 0) { // 0 means "already installed". +/******/ +/******/ // a Promise means "currently loading". +/******/ if(installedChunkData) { +/******/ promises.push(installedChunkData[2]); +/******/ } else { +/******/ // setup Promise in chunk cache +/******/ var promise = new Promise(function(resolve, reject) { +/******/ installedChunkData = installedChunks[chunkId] = [resolve, reject]; +/******/ }); +/******/ promises.push(installedChunkData[2] = promise); +/******/ +/******/ // start chunk loading +/******/ var script = document.createElement('script'); +/******/ var onScriptComplete; +/******/ +/******/ script.charset = 'utf-8'; +/******/ script.timeout = 120; +/******/ if (__webpack_require__.nc) { +/******/ script.setAttribute("nonce", __webpack_require__.nc); +/******/ } +/******/ script.src = jsonpScriptSrc(chunkId); +/******/ +/******/ // create error before stack unwound to get useful stacktrace later +/******/ var error = new Error(); +/******/ onScriptComplete = function (event) { +/******/ // avoid mem leaks in IE. +/******/ script.onerror = script.onload = null; +/******/ clearTimeout(timeout); +/******/ var chunk = installedChunks[chunkId]; +/******/ if(chunk !== 0) { +/******/ if(chunk) { +/******/ var errorType = event && (event.type === 'load' ? 'missing' : event.type); +/******/ var realSrc = event && event.target && event.target.src; +/******/ error.message = 'Loading chunk ' + chunkId + ' failed.\n(' + errorType + ': ' + realSrc + ')'; +/******/ error.name = 'ChunkLoadError'; +/******/ error.type = errorType; +/******/ error.request = realSrc; +/******/ chunk[1](error); +/******/ } +/******/ installedChunks[chunkId] = undefined; +/******/ } +/******/ }; +/******/ var timeout = setTimeout(function(){ +/******/ onScriptComplete({ type: 'timeout', target: script }); +/******/ }, 120000); +/******/ script.onerror = script.onload = onScriptComplete; +/******/ document.head.appendChild(script); +/******/ } +/******/ } +/******/ return Promise.all(promises); +/******/ }; +/******/ +/******/ // expose the modules object (__webpack_modules__) +/******/ __webpack_require__.m = modules; +/******/ +/******/ // expose the module cache +/******/ __webpack_require__.c = installedModules; +/******/ +/******/ // define getter function for harmony exports +/******/ __webpack_require__.d = function(exports, name, getter) { +/******/ if(!__webpack_require__.o(exports, name)) { +/******/ Object.defineProperty(exports, name, { enumerable: true, get: getter }); +/******/ } +/******/ }; +/******/ +/******/ // define __esModule on exports +/******/ __webpack_require__.r = function(exports) { +/******/ if(typeof Symbol !== 'undefined' && Symbol.toStringTag) { +/******/ Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' }); +/******/ } +/******/ Object.defineProperty(exports, '__esModule', { value: true }); +/******/ }; +/******/ +/******/ // create a fake namespace object +/******/ // mode & 1: value is a module id, require it +/******/ // mode & 2: merge all properties of value into the ns +/******/ // mode & 4: return value when already ns object +/******/ // mode & 8|1: behave like require +/******/ __webpack_require__.t = function(value, mode) { +/******/ if(mode & 1) value = __webpack_require__(value); +/******/ if(mode & 8) return value; +/******/ if((mode & 4) && typeof value === 'object' && value && value.__esModule) return value; +/******/ var ns = Object.create(null); +/******/ __webpack_require__.r(ns); +/******/ Object.defineProperty(ns, 'default', { enumerable: true, value: value }); +/******/ if(mode & 2 && typeof value != 'string') for(var key in value) __webpack_require__.d(ns, key, function(key) { return value[key]; }.bind(null, key)); +/******/ return ns; +/******/ }; +/******/ +/******/ // getDefaultExport function for compatibility with non-harmony modules +/******/ __webpack_require__.n = function(module) { +/******/ var getter = module && module.__esModule ? +/******/ function getDefault() { return module['default']; } : +/******/ function getModuleExports() { return module; }; +/******/ __webpack_require__.d(getter, 'a', getter); +/******/ return getter; +/******/ }; +/******/ +/******/ // Object.prototype.hasOwnProperty.call +/******/ __webpack_require__.o = function(object, property) { return Object.prototype.hasOwnProperty.call(object, property); }; +/******/ +/******/ // __webpack_public_path__ +/******/ __webpack_require__.p = ""; +/******/ +/******/ // on error function for async loading +/******/ __webpack_require__.oe = function(err) { console.error(err); throw err; }; +/******/ +/******/ var jsonpArray = window["webpackJsonp"] = window["webpackJsonp"] || []; +/******/ var oldJsonpFunction = jsonpArray.push.bind(jsonpArray); +/******/ jsonpArray.push = webpackJsonpCallback; +/******/ jsonpArray = jsonpArray.slice(); +/******/ for(var i = 0; i < jsonpArray.length; i++) webpackJsonpCallback(jsonpArray[i]); +/******/ var parentJsonpFunction = oldJsonpFunction; +/******/ +/******/ +/******/ // Load entry module and return exports +/******/ return __webpack_require__(__webpack_require__.s = 0); +/******/ }) +/************************************************************************/ +/******/ ([ +/* 0 */ +/***/ (function(module, __webpack_exports__, __webpack_require__) { + +"use strict"; +__webpack_require__.r(__webpack_exports__); +/* harmony import */ var _main_css__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(1); +/* harmony import */ var _main_css__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(_main_css__WEBPACK_IMPORTED_MODULE_0__); +/* harmony import */ var _both_async_css__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(2); +/* harmony import */ var _both_async_css__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(_both_async_css__WEBPACK_IMPORTED_MODULE_1__); + + + +__webpack_require__.e(/* import() */ 1).then(__webpack_require__.bind(null, 3)); + +__webpack_require__.e(/* import() */ 2).then(__webpack_require__.t.bind(null, 7, 7)); + +// console.log('index.js'); + + +/***/ }), +/* 1 */ +/***/ (function(module, exports, __webpack_require__) { + +// extracted by mini-css-extract-plugin + +/***/ }), +/* 2 */ +/***/ (function(module, exports, __webpack_require__) { + +// extracted by mini-css-extract-plugin + +/***/ }) +/******/ ]); \ No newline at end of file diff --git a/test/cases/disable-async-func/expected/0.js b/test/cases/disable-async-func/expected/0.js new file mode 100644 index 00000000..96d1da61 --- /dev/null +++ b/test/cases/disable-async-func/expected/0.js @@ -0,0 +1,66 @@ +(window["webpackJsonp"] = window["webpackJsonp"] || []).push([[0],[ +/* 0 */, +/* 1 */, +/* 2 */, +/* 3 */, +/* 4 */ +/***/ (function(module, __webpack_exports__, __webpack_require__) { + +"use strict"; +__webpack_require__.r(__webpack_exports__); +/* harmony import */ var _in_async__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(5); +/* harmony import */ var _in_async__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(_in_async__WEBPACK_IMPORTED_MODULE_0__); +/* harmony import */ var _in_async2_css__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(6); +/* harmony import */ var _in_async2_css__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(_in_async2_css__WEBPACK_IMPORTED_MODULE_1__); +/* harmony import */ var _in_async_css__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(7); +/* harmony import */ var _in_async_css__WEBPACK_IMPORTED_MODULE_2___default = /*#__PURE__*/__webpack_require__.n(_in_async_css__WEBPACK_IMPORTED_MODULE_2__); +/* harmony import */ var _both_async_css__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(2); +/* harmony import */ var _both_async_css__WEBPACK_IMPORTED_MODULE_3___default = /*#__PURE__*/__webpack_require__.n(_both_async_css__WEBPACK_IMPORTED_MODULE_3__); +/* harmony import */ var _both_page_async_disabled_css__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(8); +/* harmony import */ var _both_page_async_disabled_css__WEBPACK_IMPORTED_MODULE_4___default = /*#__PURE__*/__webpack_require__.n(_both_page_async_disabled_css__WEBPACK_IMPORTED_MODULE_4__); +/* harmony import */ var _both_page_async_css__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(9); +/* harmony import */ var _both_page_async_css__WEBPACK_IMPORTED_MODULE_5___default = /*#__PURE__*/__webpack_require__.n(_both_page_async_css__WEBPACK_IMPORTED_MODULE_5__); + + + + + + + + +// console.log('async.js'); + + +/***/ }), +/* 5 */ +/***/ (function(module, exports) { + +// console.log('in-async.js'); + + +/***/ }), +/* 6 */ +/***/ (function(module, exports, __webpack_require__) { + +// extracted by mini-css-extract-plugin + +/***/ }), +/* 7 */ +/***/ (function(module, exports, __webpack_require__) { + +module.exports = ".in-async {\n background: green;\n}\n"; + +/***/ }), +/* 8 */ +/***/ (function(module, exports, __webpack_require__) { + +module.exports = ".both-page-async-disabled {\n color: yellow;\n}\n"; + +/***/ }), +/* 9 */ +/***/ (function(module, exports, __webpack_require__) { + +// extracted by mini-css-extract-plugin + +/***/ }) +]]); \ No newline at end of file diff --git a/test/cases/disable-async-func/expected/2.js b/test/cases/disable-async-func/expected/2.js new file mode 100644 index 00000000..dabf02cc --- /dev/null +++ b/test/cases/disable-async-func/expected/2.js @@ -0,0 +1,34 @@ +(window["webpackJsonp"] = window["webpackJsonp"] || []).push([[2],{ + +/***/ 11: +/***/ (function(module, __webpack_exports__, __webpack_require__) { + +"use strict"; +__webpack_require__.r(__webpack_exports__); +/* harmony import */ var _both_page_async_disabled_css__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(8); +/* harmony import */ var _both_page_async_disabled_css__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(_both_page_async_disabled_css__WEBPACK_IMPORTED_MODULE_0__); +/* harmony import */ var _both_page_async_css__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(9); +/* harmony import */ var _both_page_async_css__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(_both_page_async_css__WEBPACK_IMPORTED_MODULE_1__); + + + +// console.log('async2.js'); + + +/***/ }), + +/***/ 8: +/***/ (function(module, exports, __webpack_require__) { + +module.exports = ".both-page-async-disabled {\n color: yellow;\n}\n"; + +/***/ }), + +/***/ 9: +/***/ (function(module, exports, __webpack_require__) { + +// extracted by mini-css-extract-plugin + +/***/ }) + +}]); \ No newline at end of file diff --git a/test/cases/disable-async-func/expected/3.js b/test/cases/disable-async-func/expected/3.js new file mode 100644 index 00000000..754504c8 --- /dev/null +++ b/test/cases/disable-async-func/expected/3.js @@ -0,0 +1,10 @@ +(window["webpackJsonp"] = window["webpackJsonp"] || []).push([[3],{ + +/***/ 10: +/***/ (function(module, exports, __webpack_require__) { + +// extracted by mini-css-extract-plugin + +/***/ }) + +}]); \ No newline at end of file diff --git a/test/cases/disable-async-func/expected/index1.js b/test/cases/disable-async-func/expected/index1.js new file mode 100644 index 00000000..99b1413b --- /dev/null +++ b/test/cases/disable-async-func/expected/index1.js @@ -0,0 +1,281 @@ +/******/ (function(modules) { // webpackBootstrap +/******/ // install a JSONP callback for chunk loading +/******/ function webpackJsonpCallback(data) { +/******/ var chunkIds = data[0]; +/******/ var moreModules = data[1]; +/******/ +/******/ +/******/ // add "moreModules" to the modules object, +/******/ // then flag all "chunkIds" as loaded and fire callback +/******/ var moduleId, chunkId, i = 0, resolves = []; +/******/ for(;i < chunkIds.length; i++) { +/******/ chunkId = chunkIds[i]; +/******/ if(installedChunks[chunkId]) { +/******/ resolves.push(installedChunks[chunkId][0]); +/******/ } +/******/ installedChunks[chunkId] = 0; +/******/ } +/******/ for(moduleId in moreModules) { +/******/ if(Object.prototype.hasOwnProperty.call(moreModules, moduleId)) { +/******/ modules[moduleId] = moreModules[moduleId]; +/******/ } +/******/ } +/******/ if(parentJsonpFunction) parentJsonpFunction(data); +/******/ +/******/ while(resolves.length) { +/******/ resolves.shift()(); +/******/ } +/******/ +/******/ }; +/******/ +/******/ +/******/ // The module cache +/******/ var installedModules = {}; +/******/ +/******/ // object to store loaded CSS chunks +/******/ var installedCssChunks = { +/******/ 1: 0 +/******/ } +/******/ +/******/ // object to store loaded and loading chunks +/******/ // undefined = chunk not loaded, null = chunk preloaded/prefetched +/******/ // Promise = chunk loading, 0 = chunk loaded +/******/ var installedChunks = { +/******/ 1: 0 +/******/ }; +/******/ +/******/ +/******/ +/******/ // script path function +/******/ function jsonpScriptSrc(chunkId) { +/******/ return __webpack_require__.p + "" + ({}[chunkId]||chunkId) + ".js" +/******/ } +/******/ +/******/ // The require function +/******/ function __webpack_require__(moduleId) { +/******/ +/******/ // Check if module is in cache +/******/ if(installedModules[moduleId]) { +/******/ return installedModules[moduleId].exports; +/******/ } +/******/ // Create a new module (and put it into the cache) +/******/ var module = installedModules[moduleId] = { +/******/ i: moduleId, +/******/ l: false, +/******/ exports: {} +/******/ }; +/******/ +/******/ // Execute the module function +/******/ modules[moduleId].call(module.exports, module, module.exports, __webpack_require__); +/******/ +/******/ // Flag the module as loaded +/******/ module.l = true; +/******/ +/******/ // Return the exports of the module +/******/ return module.exports; +/******/ } +/******/ +/******/ // This file contains only the entry chunk. +/******/ // The chunk loading function for additional chunks +/******/ __webpack_require__.e = function requireEnsure(chunkId) { +/******/ var promises = []; +/******/ +/******/ +/******/ // mini-css-extract-plugin CSS loading +/******/ var cssChunks = {"0":1,"3":1}; +/******/ if(installedCssChunks[chunkId]) promises.push(installedCssChunks[chunkId]); +/******/ else if(installedCssChunks[chunkId] !== 0 && cssChunks[chunkId]) { +/******/ promises.push(installedCssChunks[chunkId] = new Promise(function(resolve, reject) { +/******/ var href = "" + ({}[chunkId]||chunkId) + ".css"; +/******/ var fullhref = __webpack_require__.p + href; +/******/ var existingLinkTags = document.getElementsByTagName("link"); +/******/ for(var i = 0; i < existingLinkTags.length; i++) { +/******/ var tag = existingLinkTags[i]; +/******/ var dataHref = tag.getAttribute("data-href") || tag.getAttribute("href"); +/******/ if(tag.rel === "stylesheet" && (dataHref === href || dataHref === fullhref)) return resolve(); +/******/ } +/******/ var existingStyleTags = document.getElementsByTagName("style"); +/******/ for(var i = 0; i < existingStyleTags.length; i++) { +/******/ var tag = existingStyleTags[i]; +/******/ var dataHref = tag.getAttribute("data-href"); +/******/ if(dataHref === href || dataHref === fullhref) return resolve(); +/******/ } +/******/ var linkTag = document.createElement("link"); +/******/ linkTag.rel = "stylesheet"; +/******/ linkTag.type = "text/css"; +/******/ linkTag.onload = resolve; +/******/ linkTag.onerror = function(event) { +/******/ var request = event && event.target && event.target.src || fullhref; +/******/ var err = new Error("Loading CSS chunk " + chunkId + " failed.\n(" + request + ")"); +/******/ err.code = "CSS_CHUNK_LOAD_FAILED"; +/******/ err.request = request; +/******/ delete installedCssChunks[chunkId] +/******/ linkTag.parentNode.removeChild(linkTag) +/******/ reject(err); +/******/ }; +/******/ linkTag.href = fullhref; +/******/ +/******/ var head = document.getElementsByTagName("head")[0]; +/******/ head.appendChild(linkTag); +/******/ }).then(function() { +/******/ installedCssChunks[chunkId] = 0; +/******/ })); +/******/ } +/******/ +/******/ // JSONP chunk loading for javascript +/******/ +/******/ var installedChunkData = installedChunks[chunkId]; +/******/ if(installedChunkData !== 0) { // 0 means "already installed". +/******/ +/******/ // a Promise means "currently loading". +/******/ if(installedChunkData) { +/******/ promises.push(installedChunkData[2]); +/******/ } else { +/******/ // setup Promise in chunk cache +/******/ var promise = new Promise(function(resolve, reject) { +/******/ installedChunkData = installedChunks[chunkId] = [resolve, reject]; +/******/ }); +/******/ promises.push(installedChunkData[2] = promise); +/******/ +/******/ // start chunk loading +/******/ var script = document.createElement('script'); +/******/ var onScriptComplete; +/******/ +/******/ script.charset = 'utf-8'; +/******/ script.timeout = 120; +/******/ if (__webpack_require__.nc) { +/******/ script.setAttribute("nonce", __webpack_require__.nc); +/******/ } +/******/ script.src = jsonpScriptSrc(chunkId); +/******/ +/******/ // create error before stack unwound to get useful stacktrace later +/******/ var error = new Error(); +/******/ onScriptComplete = function (event) { +/******/ // avoid mem leaks in IE. +/******/ script.onerror = script.onload = null; +/******/ clearTimeout(timeout); +/******/ var chunk = installedChunks[chunkId]; +/******/ if(chunk !== 0) { +/******/ if(chunk) { +/******/ var errorType = event && (event.type === 'load' ? 'missing' : event.type); +/******/ var realSrc = event && event.target && event.target.src; +/******/ error.message = 'Loading chunk ' + chunkId + ' failed.\n(' + errorType + ': ' + realSrc + ')'; +/******/ error.name = 'ChunkLoadError'; +/******/ error.type = errorType; +/******/ error.request = realSrc; +/******/ chunk[1](error); +/******/ } +/******/ installedChunks[chunkId] = undefined; +/******/ } +/******/ }; +/******/ var timeout = setTimeout(function(){ +/******/ onScriptComplete({ type: 'timeout', target: script }); +/******/ }, 120000); +/******/ script.onerror = script.onload = onScriptComplete; +/******/ document.head.appendChild(script); +/******/ } +/******/ } +/******/ return Promise.all(promises); +/******/ }; +/******/ +/******/ // expose the modules object (__webpack_modules__) +/******/ __webpack_require__.m = modules; +/******/ +/******/ // expose the module cache +/******/ __webpack_require__.c = installedModules; +/******/ +/******/ // define getter function for harmony exports +/******/ __webpack_require__.d = function(exports, name, getter) { +/******/ if(!__webpack_require__.o(exports, name)) { +/******/ Object.defineProperty(exports, name, { enumerable: true, get: getter }); +/******/ } +/******/ }; +/******/ +/******/ // define __esModule on exports +/******/ __webpack_require__.r = function(exports) { +/******/ if(typeof Symbol !== 'undefined' && Symbol.toStringTag) { +/******/ Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' }); +/******/ } +/******/ Object.defineProperty(exports, '__esModule', { value: true }); +/******/ }; +/******/ +/******/ // create a fake namespace object +/******/ // mode & 1: value is a module id, require it +/******/ // mode & 2: merge all properties of value into the ns +/******/ // mode & 4: return value when already ns object +/******/ // mode & 8|1: behave like require +/******/ __webpack_require__.t = function(value, mode) { +/******/ if(mode & 1) value = __webpack_require__(value); +/******/ if(mode & 8) return value; +/******/ if((mode & 4) && typeof value === 'object' && value && value.__esModule) return value; +/******/ var ns = Object.create(null); +/******/ __webpack_require__.r(ns); +/******/ Object.defineProperty(ns, 'default', { enumerable: true, value: value }); +/******/ if(mode & 2 && typeof value != 'string') for(var key in value) __webpack_require__.d(ns, key, function(key) { return value[key]; }.bind(null, key)); +/******/ return ns; +/******/ }; +/******/ +/******/ // getDefaultExport function for compatibility with non-harmony modules +/******/ __webpack_require__.n = function(module) { +/******/ var getter = module && module.__esModule ? +/******/ function getDefault() { return module['default']; } : +/******/ function getModuleExports() { return module; }; +/******/ __webpack_require__.d(getter, 'a', getter); +/******/ return getter; +/******/ }; +/******/ +/******/ // Object.prototype.hasOwnProperty.call +/******/ __webpack_require__.o = function(object, property) { return Object.prototype.hasOwnProperty.call(object, property); }; +/******/ +/******/ // __webpack_public_path__ +/******/ __webpack_require__.p = ""; +/******/ +/******/ // on error function for async loading +/******/ __webpack_require__.oe = function(err) { console.error(err); throw err; }; +/******/ +/******/ var jsonpArray = window["webpackJsonp"] = window["webpackJsonp"] || []; +/******/ var oldJsonpFunction = jsonpArray.push.bind(jsonpArray); +/******/ jsonpArray.push = webpackJsonpCallback; +/******/ jsonpArray = jsonpArray.slice(); +/******/ for(var i = 0; i < jsonpArray.length; i++) webpackJsonpCallback(jsonpArray[i]); +/******/ var parentJsonpFunction = oldJsonpFunction; +/******/ +/******/ +/******/ // Load entry module and return exports +/******/ return __webpack_require__(__webpack_require__.s = 0); +/******/ }) +/************************************************************************/ +/******/ ([ +/* 0 */ +/***/ (function(module, __webpack_exports__, __webpack_require__) { + +"use strict"; +__webpack_require__.r(__webpack_exports__); +/* harmony import */ var _main_css__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(1); +/* harmony import */ var _main_css__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(_main_css__WEBPACK_IMPORTED_MODULE_0__); +/* harmony import */ var _both_async_css__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(2); +/* harmony import */ var _both_async_css__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(_both_async_css__WEBPACK_IMPORTED_MODULE_1__); + + + +__webpack_require__.e(/* import() */ 0).then(__webpack_require__.bind(null, 4)); + +__webpack_require__.e(/* import() */ 3).then(__webpack_require__.t.bind(null, 10, 7)); + +// console.log('index.js'); + + +/***/ }), +/* 1 */ +/***/ (function(module, exports, __webpack_require__) { + +// extracted by mini-css-extract-plugin + +/***/ }), +/* 2 */ +/***/ (function(module, exports, __webpack_require__) { + +// extracted by mini-css-extract-plugin + +/***/ }) +/******/ ]); \ No newline at end of file diff --git a/test/cases/disable-async-func/expected/index2.js b/test/cases/disable-async-func/expected/index2.js new file mode 100644 index 00000000..e7cf264a --- /dev/null +++ b/test/cases/disable-async-func/expected/index2.js @@ -0,0 +1,260 @@ +/******/ (function(modules) { // webpackBootstrap +/******/ // install a JSONP callback for chunk loading +/******/ function webpackJsonpCallback(data) { +/******/ var chunkIds = data[0]; +/******/ var moreModules = data[1]; +/******/ +/******/ +/******/ // add "moreModules" to the modules object, +/******/ // then flag all "chunkIds" as loaded and fire callback +/******/ var moduleId, chunkId, i = 0, resolves = []; +/******/ for(;i < chunkIds.length; i++) { +/******/ chunkId = chunkIds[i]; +/******/ if(installedChunks[chunkId]) { +/******/ resolves.push(installedChunks[chunkId][0]); +/******/ } +/******/ installedChunks[chunkId] = 0; +/******/ } +/******/ for(moduleId in moreModules) { +/******/ if(Object.prototype.hasOwnProperty.call(moreModules, moduleId)) { +/******/ modules[moduleId] = moreModules[moduleId]; +/******/ } +/******/ } +/******/ if(parentJsonpFunction) parentJsonpFunction(data); +/******/ +/******/ while(resolves.length) { +/******/ resolves.shift()(); +/******/ } +/******/ +/******/ }; +/******/ +/******/ +/******/ // The module cache +/******/ var installedModules = {}; +/******/ +/******/ // object to store loaded CSS chunks +/******/ var installedCssChunks = { +/******/ 4: 0 +/******/ } +/******/ +/******/ // object to store loaded and loading chunks +/******/ // undefined = chunk not loaded, null = chunk preloaded/prefetched +/******/ // Promise = chunk loading, 0 = chunk loaded +/******/ var installedChunks = { +/******/ 4: 0 +/******/ }; +/******/ +/******/ +/******/ +/******/ // script path function +/******/ function jsonpScriptSrc(chunkId) { +/******/ return __webpack_require__.p + "" + ({}[chunkId]||chunkId) + ".js" +/******/ } +/******/ +/******/ // The require function +/******/ function __webpack_require__(moduleId) { +/******/ +/******/ // Check if module is in cache +/******/ if(installedModules[moduleId]) { +/******/ return installedModules[moduleId].exports; +/******/ } +/******/ // Create a new module (and put it into the cache) +/******/ var module = installedModules[moduleId] = { +/******/ i: moduleId, +/******/ l: false, +/******/ exports: {} +/******/ }; +/******/ +/******/ // Execute the module function +/******/ modules[moduleId].call(module.exports, module, module.exports, __webpack_require__); +/******/ +/******/ // Flag the module as loaded +/******/ module.l = true; +/******/ +/******/ // Return the exports of the module +/******/ return module.exports; +/******/ } +/******/ +/******/ // This file contains only the entry chunk. +/******/ // The chunk loading function for additional chunks +/******/ __webpack_require__.e = function requireEnsure(chunkId) { +/******/ var promises = []; +/******/ +/******/ +/******/ // mini-css-extract-plugin CSS loading +/******/ var cssChunks = {"2":1}; +/******/ if(installedCssChunks[chunkId]) promises.push(installedCssChunks[chunkId]); +/******/ else if(installedCssChunks[chunkId] !== 0 && cssChunks[chunkId]) { +/******/ promises.push(installedCssChunks[chunkId] = new Promise(function(resolve, reject) { +/******/ var href = "" + ({}[chunkId]||chunkId) + ".css"; +/******/ var fullhref = __webpack_require__.p + href; +/******/ var existingLinkTags = document.getElementsByTagName("link"); +/******/ for(var i = 0; i < existingLinkTags.length; i++) { +/******/ var tag = existingLinkTags[i]; +/******/ var dataHref = tag.getAttribute("data-href") || tag.getAttribute("href"); +/******/ if(tag.rel === "stylesheet" && (dataHref === href || dataHref === fullhref)) return resolve(); +/******/ } +/******/ var existingStyleTags = document.getElementsByTagName("style"); +/******/ for(var i = 0; i < existingStyleTags.length; i++) { +/******/ var tag = existingStyleTags[i]; +/******/ var dataHref = tag.getAttribute("data-href"); +/******/ if(dataHref === href || dataHref === fullhref) return resolve(); +/******/ } +/******/ var linkTag = document.createElement("link"); +/******/ linkTag.rel = "stylesheet"; +/******/ linkTag.type = "text/css"; +/******/ linkTag.onload = resolve; +/******/ linkTag.onerror = function(event) { +/******/ var request = event && event.target && event.target.src || fullhref; +/******/ var err = new Error("Loading CSS chunk " + chunkId + " failed.\n(" + request + ")"); +/******/ err.code = "CSS_CHUNK_LOAD_FAILED"; +/******/ err.request = request; +/******/ delete installedCssChunks[chunkId] +/******/ linkTag.parentNode.removeChild(linkTag) +/******/ reject(err); +/******/ }; +/******/ linkTag.href = fullhref; +/******/ +/******/ var head = document.getElementsByTagName("head")[0]; +/******/ head.appendChild(linkTag); +/******/ }).then(function() { +/******/ installedCssChunks[chunkId] = 0; +/******/ })); +/******/ } +/******/ +/******/ // JSONP chunk loading for javascript +/******/ +/******/ var installedChunkData = installedChunks[chunkId]; +/******/ if(installedChunkData !== 0) { // 0 means "already installed". +/******/ +/******/ // a Promise means "currently loading". +/******/ if(installedChunkData) { +/******/ promises.push(installedChunkData[2]); +/******/ } else { +/******/ // setup Promise in chunk cache +/******/ var promise = new Promise(function(resolve, reject) { +/******/ installedChunkData = installedChunks[chunkId] = [resolve, reject]; +/******/ }); +/******/ promises.push(installedChunkData[2] = promise); +/******/ +/******/ // start chunk loading +/******/ var script = document.createElement('script'); +/******/ var onScriptComplete; +/******/ +/******/ script.charset = 'utf-8'; +/******/ script.timeout = 120; +/******/ if (__webpack_require__.nc) { +/******/ script.setAttribute("nonce", __webpack_require__.nc); +/******/ } +/******/ script.src = jsonpScriptSrc(chunkId); +/******/ +/******/ // create error before stack unwound to get useful stacktrace later +/******/ var error = new Error(); +/******/ onScriptComplete = function (event) { +/******/ // avoid mem leaks in IE. +/******/ script.onerror = script.onload = null; +/******/ clearTimeout(timeout); +/******/ var chunk = installedChunks[chunkId]; +/******/ if(chunk !== 0) { +/******/ if(chunk) { +/******/ var errorType = event && (event.type === 'load' ? 'missing' : event.type); +/******/ var realSrc = event && event.target && event.target.src; +/******/ error.message = 'Loading chunk ' + chunkId + ' failed.\n(' + errorType + ': ' + realSrc + ')'; +/******/ error.name = 'ChunkLoadError'; +/******/ error.type = errorType; +/******/ error.request = realSrc; +/******/ chunk[1](error); +/******/ } +/******/ installedChunks[chunkId] = undefined; +/******/ } +/******/ }; +/******/ var timeout = setTimeout(function(){ +/******/ onScriptComplete({ type: 'timeout', target: script }); +/******/ }, 120000); +/******/ script.onerror = script.onload = onScriptComplete; +/******/ document.head.appendChild(script); +/******/ } +/******/ } +/******/ return Promise.all(promises); +/******/ }; +/******/ +/******/ // expose the modules object (__webpack_modules__) +/******/ __webpack_require__.m = modules; +/******/ +/******/ // expose the module cache +/******/ __webpack_require__.c = installedModules; +/******/ +/******/ // define getter function for harmony exports +/******/ __webpack_require__.d = function(exports, name, getter) { +/******/ if(!__webpack_require__.o(exports, name)) { +/******/ Object.defineProperty(exports, name, { enumerable: true, get: getter }); +/******/ } +/******/ }; +/******/ +/******/ // define __esModule on exports +/******/ __webpack_require__.r = function(exports) { +/******/ if(typeof Symbol !== 'undefined' && Symbol.toStringTag) { +/******/ Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' }); +/******/ } +/******/ Object.defineProperty(exports, '__esModule', { value: true }); +/******/ }; +/******/ +/******/ // create a fake namespace object +/******/ // mode & 1: value is a module id, require it +/******/ // mode & 2: merge all properties of value into the ns +/******/ // mode & 4: return value when already ns object +/******/ // mode & 8|1: behave like require +/******/ __webpack_require__.t = function(value, mode) { +/******/ if(mode & 1) value = __webpack_require__(value); +/******/ if(mode & 8) return value; +/******/ if((mode & 4) && typeof value === 'object' && value && value.__esModule) return value; +/******/ var ns = Object.create(null); +/******/ __webpack_require__.r(ns); +/******/ Object.defineProperty(ns, 'default', { enumerable: true, value: value }); +/******/ if(mode & 2 && typeof value != 'string') for(var key in value) __webpack_require__.d(ns, key, function(key) { return value[key]; }.bind(null, key)); +/******/ return ns; +/******/ }; +/******/ +/******/ // getDefaultExport function for compatibility with non-harmony modules +/******/ __webpack_require__.n = function(module) { +/******/ var getter = module && module.__esModule ? +/******/ function getDefault() { return module['default']; } : +/******/ function getModuleExports() { return module; }; +/******/ __webpack_require__.d(getter, 'a', getter); +/******/ return getter; +/******/ }; +/******/ +/******/ // Object.prototype.hasOwnProperty.call +/******/ __webpack_require__.o = function(object, property) { return Object.prototype.hasOwnProperty.call(object, property); }; +/******/ +/******/ // __webpack_public_path__ +/******/ __webpack_require__.p = ""; +/******/ +/******/ // on error function for async loading +/******/ __webpack_require__.oe = function(err) { console.error(err); throw err; }; +/******/ +/******/ var jsonpArray = window["webpackJsonp"] = window["webpackJsonp"] || []; +/******/ var oldJsonpFunction = jsonpArray.push.bind(jsonpArray); +/******/ jsonpArray.push = webpackJsonpCallback; +/******/ jsonpArray = jsonpArray.slice(); +/******/ for(var i = 0; i < jsonpArray.length; i++) webpackJsonpCallback(jsonpArray[i]); +/******/ var parentJsonpFunction = oldJsonpFunction; +/******/ +/******/ +/******/ // Load entry module and return exports +/******/ return __webpack_require__(__webpack_require__.s = 3); +/******/ }) +/************************************************************************/ +/******/ ({ + +/***/ 3: +/***/ (function(module, exports, __webpack_require__) { + +__webpack_require__.e(/* import() */ 2).then(__webpack_require__.bind(null, 11)); + +// console.log('index2'); + + +/***/ }) + +/******/ }); \ No newline at end of file From e2177fd10a04055e8b9d64f76a8ca68aa5041bd8 Mon Sep 17 00:00:00 2001 From: Light Leung Date: Tue, 23 Jul 2019 00:35:27 +0800 Subject: [PATCH 10/23] feat: ability to disable extract modules, wip --- src/index.js | 38 ++++++++++++++++++++++++-------------- 1 file changed, 24 insertions(+), 14 deletions(-) diff --git a/src/index.js b/src/index.js index 8488b10f..83206191 100644 --- a/src/index.js +++ b/src/index.js @@ -151,10 +151,10 @@ class MiniCssExtractPlugin { apply(compiler) { compiler.hooks.thisCompilation.tap(pluginName, (compilation) => { - const asyncModuleToBeRebuild = new Set(); + const moduleToBeRebuild = new Set(); // eslint-disable-next-line no-param-reassign compilation[MODULE_TYPE] = { - asyncModuleToBeRebuild, + moduleToBeRebuild, }; compilation.dependencyFactories.set(ReplaceDependency, new NullFactory()); @@ -201,7 +201,9 @@ class MiniCssExtractPlugin { pluginName, (result, { chunk }) => { const renderedModules = Array.from(chunk.modulesIterable).filter( - (module) => module.type === MODULE_TYPE + (module) => + module.type === MODULE_TYPE && + !this.shouldDisableExtract({ module, isAsync: false }) ); if (renderedModules.length > 0) { @@ -231,7 +233,7 @@ class MiniCssExtractPlugin { (result, { chunk }) => { const renderedModules = Array.from(chunk.modulesIterable).filter( (module) => - module.type === MODULE_TYPE && !asyncModuleToBeRebuild.has(module) + module.type === MODULE_TYPE && !moduleToBeRebuild.has(module) ); if (renderedModules.length > 0) { @@ -452,14 +454,14 @@ class MiniCssExtractPlugin { const len = `// extracted by ${pluginName}`.length; mainTemplate.hooks.beforeStartup.tap(pluginName, (source) => { - for (const moduleToBeRebuild of asyncModuleToBeRebuild) { - const issuerDeps = moduleToBeRebuild.issuer.dependencies; + for (const currentModuleToBeRebuild of moduleToBeRebuild) { + const issuerDeps = currentModuleToBeRebuild.issuer.dependencies; let firstIndex = -1; const content = []; for (let i = issuerDeps.length - 1; i >= 0; i--) { const { module } = issuerDeps[i]; - if (asyncModuleToBeRebuild.has(module)) { + if (moduleToBeRebuild.has(module)) { firstIndex = i; content.unshift(module.content.replace(/(?:[\r\n]+)/g, '\\n')); issuerDeps.splice(i, 1); @@ -483,13 +485,13 @@ class MiniCssExtractPlugin { }); } - shouldDisableAsync({ module }) { - const { disableAsync } = this.options; + shouldDisableExtract({ module }) { + const { disableExtract } = this.options; let shouldDisable = false; - if (disableAsync === true) { + if (disableExtract === true) { shouldDisable = true; - } else if (typeof disableAsync === 'function') { - shouldDisable = disableAsync({ module }); + } else if (typeof disableExtract === 'function') { + shouldDisable = disableExtract({ module }); } return shouldDisable; @@ -501,8 +503,8 @@ class MiniCssExtractPlugin { for (const chunk of mainChunk.getAllAsyncChunks()) { for (const module of chunk.modulesIterable) { if (module.type === MODULE_TYPE) { - if (this.shouldDisableAsync({ module })) { - compilation[MODULE_TYPE].asyncModuleToBeRebuild.add(module); + if (this.shouldDisableExtract({ module, isAsync: true })) { + compilation[MODULE_TYPE].moduleToBeRebuild.add(module); } else { obj[chunk.id] = 1; } @@ -510,6 +512,14 @@ class MiniCssExtractPlugin { } } + for (const module of mainChunk.modulesIterable) { + if (module.type === MODULE_TYPE) { + if (this.shouldDisableExtract({ module, isAsync: false })) { + compilation[MODULE_TYPE].moduleToBeRebuild.add(module); + } + } + } + return obj; } From 4982afb8a188072af2ebc3722c1e1eaccac58c36 Mon Sep 17 00:00:00 2001 From: Light Leung Date: Wed, 24 Jul 2019 21:54:27 +0800 Subject: [PATCH 11/23] feat: ability to disable extract modules, remove duplicated dependencies --- src/index.js | 100 ++++---- src/lib/ReplaceDependency.js | 27 -- src/loader.js | 230 ++++++++--------- .../async-import.css | 0 .../async.css | 0 .../async.js | 0 .../both-async.css | 0 .../expected/1.js | 14 +- .../expected/2.js | 5 +- .../expected/main.js | 14 +- .../in-async.css | 0 .../in-async.js | 0 .../in-async2.css | 0 .../index.js | 0 .../main.css | 0 .../shared.css | 0 .../webpack.config.js | 2 +- .../async-import.css | 0 .../async.css | 0 .../async.js | 0 .../async2.js | 0 .../both-async.css | 0 .../both-page-async-disabled.css | 0 .../both-page-async.css | 0 .../disable-extract-func-async/expected/2.js | 82 ++++++ .../disable-extract-func-async/expected/3.js | 40 +++ .../disable-extract-func-async/expected/4.js | 13 + .../expected/index1.css | 0 .../expected/index1.js | 235 ++++++++++++++++++ .../expected/index2.js | 214 ++++++++++++++++ .../in-async.css | 0 .../in-async.js | 0 .../in-async2.css | 0 .../index.js | 0 .../index2.js | 0 .../main.css | 0 .../shared.css | 0 .../webpack.config.js | 24 ++ .../disable-extract-func/async-import.css | 3 + test/cases/disable-extract-func/async.css | 3 + test/cases/disable-extract-func/async.js | 9 + test/cases/disable-extract-func/async2.js | 4 + .../cases/disable-extract-func/both-async.css | 5 + .../both-page-async-disabled.css | 3 + .../disable-extract-func/both-page-async.css | 3 + .../expected/1.css} | 0 .../expected/1.js} | 14 +- .../expected/2.css | 0 .../expected/2.js | 5 +- .../expected/3.css | 0 .../expected/3.js | 0 .../expected/index1.css} | 0 .../expected/index1.js | 8 +- .../expected/index2.js | 0 test/cases/disable-extract-func/in-async.css | 5 + test/cases/disable-extract-func/in-async.js | 1 + test/cases/disable-extract-func/in-async2.css | 5 + test/cases/disable-extract-func/index.js | 8 + test/cases/disable-extract-func/index2.js | 3 + test/cases/disable-extract-func/main.css | 5 + test/cases/disable-extract-func/shared.css | 3 + .../webpack.config.js | 2 +- 62 files changed, 886 insertions(+), 203 deletions(-) delete mode 100644 src/lib/ReplaceDependency.js rename test/cases/{disable-async-bool => disable-extract-bool}/async-import.css (100%) rename test/cases/{disable-async-bool => disable-extract-bool}/async.css (100%) rename test/cases/{disable-async-bool => disable-extract-bool}/async.js (100%) rename test/cases/{disable-async-bool => disable-extract-bool}/both-async.css (100%) rename test/cases/{disable-async-bool => disable-extract-bool}/expected/1.js (79%) rename test/cases/{disable-async-bool => disable-extract-bool}/expected/2.js (50%) rename test/cases/{disable-async-bool => disable-extract-bool}/expected/main.js (95%) rename test/cases/{disable-async-bool => disable-extract-bool}/in-async.css (100%) rename test/cases/{disable-async-bool => disable-extract-bool}/in-async.js (100%) rename test/cases/{disable-async-bool => disable-extract-bool}/in-async2.css (100%) rename test/cases/{disable-async-bool => disable-extract-bool}/index.js (100%) rename test/cases/{disable-async-bool => disable-extract-bool}/main.css (100%) rename test/cases/{disable-async-bool => disable-extract-bool}/shared.css (100%) rename test/cases/{disable-async-bool => disable-extract-bool}/webpack.config.js (90%) rename test/cases/{disable-async-func => disable-extract-func-async}/async-import.css (100%) rename test/cases/{disable-async-func => disable-extract-func-async}/async.css (100%) rename test/cases/{disable-async-func => disable-extract-func-async}/async.js (100%) rename test/cases/{disable-async-func => disable-extract-func-async}/async2.js (100%) rename test/cases/{disable-async-func => disable-extract-func-async}/both-async.css (100%) rename test/cases/{disable-async-func => disable-extract-func-async}/both-page-async-disabled.css (100%) rename test/cases/{disable-async-func => disable-extract-func-async}/both-page-async.css (100%) create mode 100644 test/cases/disable-extract-func-async/expected/2.js create mode 100644 test/cases/disable-extract-func-async/expected/3.js create mode 100644 test/cases/disable-extract-func-async/expected/4.js rename test/cases/{disable-async-func => disable-extract-func-async}/expected/index1.css (100%) create mode 100644 test/cases/disable-extract-func-async/expected/index1.js create mode 100644 test/cases/disable-extract-func-async/expected/index2.js rename test/cases/{disable-async-func => disable-extract-func-async}/in-async.css (100%) rename test/cases/{disable-async-func => disable-extract-func-async}/in-async.js (100%) rename test/cases/{disable-async-func => disable-extract-func-async}/in-async2.css (100%) rename test/cases/{disable-async-func => disable-extract-func-async}/index.js (100%) rename test/cases/{disable-async-func => disable-extract-func-async}/index2.js (100%) rename test/cases/{disable-async-func => disable-extract-func-async}/main.css (100%) rename test/cases/{disable-async-func => disable-extract-func-async}/shared.css (100%) create mode 100644 test/cases/disable-extract-func-async/webpack.config.js create mode 100644 test/cases/disable-extract-func/async-import.css create mode 100644 test/cases/disable-extract-func/async.css create mode 100644 test/cases/disable-extract-func/async.js create mode 100644 test/cases/disable-extract-func/async2.js create mode 100644 test/cases/disable-extract-func/both-async.css create mode 100644 test/cases/disable-extract-func/both-page-async-disabled.css create mode 100644 test/cases/disable-extract-func/both-page-async.css rename test/cases/{disable-async-func/expected/0.css => disable-extract-func/expected/1.css} (100%) rename test/cases/{disable-async-func/expected/0.js => disable-extract-func/expected/1.js} (84%) rename test/cases/{disable-async-func => disable-extract-func}/expected/2.css (100%) rename test/cases/{disable-async-func => disable-extract-func}/expected/2.js (86%) rename test/cases/{disable-async-func => disable-extract-func}/expected/3.css (100%) rename test/cases/{disable-async-func => disable-extract-func}/expected/3.js (100%) rename test/cases/{disable-async-bool/expected/main.css => disable-extract-func/expected/index1.css} (100%) rename test/cases/{disable-async-func => disable-extract-func}/expected/index1.js (98%) rename test/cases/{disable-async-func => disable-extract-func}/expected/index2.js (100%) create mode 100644 test/cases/disable-extract-func/in-async.css create mode 100644 test/cases/disable-extract-func/in-async.js create mode 100644 test/cases/disable-extract-func/in-async2.css create mode 100644 test/cases/disable-extract-func/index.js create mode 100644 test/cases/disable-extract-func/index2.js create mode 100644 test/cases/disable-extract-func/main.css create mode 100644 test/cases/disable-extract-func/shared.css rename test/cases/{disable-async-func => disable-extract-func}/webpack.config.js (93%) diff --git a/src/index.js b/src/index.js index 83206191..12c180a0 100644 --- a/src/index.js +++ b/src/index.js @@ -2,9 +2,6 @@ import webpack from 'webpack'; import sources from 'webpack-sources'; -import NullFactory from 'webpack/lib/NullFactory'; - -import ReplaceDependency from './lib/ReplaceDependency'; const { ConcatSource, SourceMapSource, OriginalSource } = sources; const { @@ -22,6 +19,16 @@ const REGEXP_NAME = /\[name\]/i; const REGEXP_PLACEHOLDERS = /\[(name|id|chunkhash)\]/g; const DEFAULT_FILENAME = '[name].css'; +function isInitialOrHasNoParents(chunk) { + let parentCount = 0; + + for (const chunkGroup of chunk.groupsIterable) { + parentCount += chunkGroup.getNumberOfParents(); + } + + return chunk.isOnlyInitial() || parentCount === 0; +} + class CssDependency extends webpack.Dependency { constructor( { identifier, content, media, sourceMap }, @@ -157,12 +164,6 @@ class MiniCssExtractPlugin { moduleToBeRebuild, }; - compilation.dependencyFactories.set(ReplaceDependency, new NullFactory()); - compilation.dependencyTemplates.set( - ReplaceDependency, - new ReplaceDependency.Template() - ); - compilation.hooks.normalModuleLoader.tap(pluginName, (lc, m) => { const loaderContext = lc; const module = m; @@ -185,6 +186,10 @@ class MiniCssExtractPlugin { identifierCountMap.set(line.identifier, count + 1); } }; + + loaderContext[`${MODULE_TYPE}/disableExtract`] = () => { + return !!module[`${MODULE_TYPE}/disableExtract`]; + }; }); compilation.dependencyFactories.set( @@ -202,8 +207,7 @@ class MiniCssExtractPlugin { (result, { chunk }) => { const renderedModules = Array.from(chunk.modulesIterable).filter( (module) => - module.type === MODULE_TYPE && - !this.shouldDisableExtract({ module, isAsync: false }) + module.type === MODULE_TYPE && !moduleToBeRebuild.has(module) ); if (renderedModules.length > 0) { @@ -452,46 +456,53 @@ class MiniCssExtractPlugin { } ); - const len = `// extracted by ${pluginName}`.length; - mainTemplate.hooks.beforeStartup.tap(pluginName, (source) => { - for (const currentModuleToBeRebuild of moduleToBeRebuild) { - const issuerDeps = currentModuleToBeRebuild.issuer.dependencies; - let firstIndex = -1; - const content = []; - - for (let i = issuerDeps.length - 1; i >= 0; i--) { - const { module } = issuerDeps[i]; - if (moduleToBeRebuild.has(module)) { - firstIndex = i; - content.unshift(module.content.replace(/(?:[\r\n]+)/g, '\\n')); - issuerDeps.splice(i, 1); + compilation.hooks.optimizeTree.tapAsync( + pluginName, + (chunks, modules, callback) => { + const promises = []; + + for (const chunk of chunks) { + const isAsync = !isInitialOrHasNoParents(chunk); + // eslint-disable-next-line no-underscore-dangle + for (const module of chunk._modules) { + if (module.type === MODULE_TYPE) { + if (this.shouldDisableExtract({ module, isAsync })) { + moduleToBeRebuild.add(module); + } + } } } - if (firstIndex > -1) { - issuerDeps.splice( - firstIndex, - 0, - new ReplaceDependency(`module.exports = "${content.join('')}";`, [ - 0, - len, - ]) - ); + for (const currentModuleToBeRebuild of moduleToBeRebuild) { + const { issuer } = currentModuleToBeRebuild; + if (!issuer[`${MODULE_TYPE}/disableExtract`]) { + issuer[`${MODULE_TYPE}/disableExtract`] = true; + promises.push( + new Promise((resolve) => { + compilation.rebuildModule(issuer, (err) => { + if (err) { + compilation.errors.push(err); + } + resolve(); + }); + }) + ); + } } - } - return source; - }); + Promise.all(promises).then(() => callback()); + } + ); }); } - shouldDisableExtract({ module }) { + shouldDisableExtract({ module, isAsync }) { const { disableExtract } = this.options; let shouldDisable = false; if (disableExtract === true) { shouldDisable = true; } else if (typeof disableExtract === 'function') { - shouldDisable = disableExtract({ module }); + shouldDisable = disableExtract({ module, isAsync }); } return shouldDisable; @@ -503,23 +514,14 @@ class MiniCssExtractPlugin { for (const chunk of mainChunk.getAllAsyncChunks()) { for (const module of chunk.modulesIterable) { if (module.type === MODULE_TYPE) { - if (this.shouldDisableExtract({ module, isAsync: true })) { - compilation[MODULE_TYPE].moduleToBeRebuild.add(module); - } else { + if (!compilation[MODULE_TYPE].moduleToBeRebuild.has(module)) { obj[chunk.id] = 1; + break; } } } } - for (const module of mainChunk.modulesIterable) { - if (module.type === MODULE_TYPE) { - if (this.shouldDisableExtract({ module, isAsync: false })) { - compilation[MODULE_TYPE].moduleToBeRebuild.add(module); - } - } - } - return obj; } diff --git a/src/lib/ReplaceDependency.js b/src/lib/ReplaceDependency.js deleted file mode 100644 index 6177a85b..00000000 --- a/src/lib/ReplaceDependency.js +++ /dev/null @@ -1,27 +0,0 @@ -const NullDependency = require('webpack/lib/dependencies/NullDependency'); - -class ReplaceDependency extends NullDependency { - constructor(replacement, range) { - /* eslint-disable class-methods-use-this */ - super(); - this.replacement = replacement; - this.range = range; - } - - get type() { - return 'mini-css-extract-replace'; - } - - updateHash(hash) { - super.updateHash(hash); - hash.update(this.replacement); - } -} - -ReplaceDependency.Template = class ReplaceDependencyTemplate { - apply(dep, source) { - source.replace(dep.range[0], dep.range[1] - 1, dep.replacement); - } -}; - -module.exports = ReplaceDependency; diff --git a/src/loader.js b/src/loader.js index a91dd787..147c7abb 100644 --- a/src/loader.js +++ b/src/loader.js @@ -61,137 +61,143 @@ export function pitch(request) { validateOptions(schema, options, 'Mini CSS Extract Plugin Loader'); + this.addDependency(this.resourcePath); + const loaders = this.loaders.slice(this.loaderIndex + 1); - this.addDependency(this.resourcePath); + const callback = this.async(); - const childFilename = '*'; // eslint-disable-line no-path-concat - const publicPath = - typeof options.publicPath === 'string' - ? options.publicPath === '' || options.publicPath.endsWith('/') - ? options.publicPath - : `${options.publicPath}/` - : typeof options.publicPath === 'function' - ? options.publicPath(this.resourcePath, this.rootContext) - : this._compilation.outputOptions.publicPath; - const outputOptions = { - filename: childFilename, - publicPath, - }; - const childCompiler = this._compilation.createChildCompiler( - `${pluginName} ${request}`, - outputOptions - ); - - new NodeTemplatePlugin(outputOptions).apply(childCompiler); - new LibraryTemplatePlugin(null, 'commonjs2').apply(childCompiler); - new NodeTargetPlugin().apply(childCompiler); - new SingleEntryPlugin(this.context, `!!${request}`, pluginName).apply( - childCompiler - ); - new LimitChunkCountPlugin({ maxChunks: 1 }).apply(childCompiler); - - // We set loaderContext[MODULE_TYPE] = false to indicate we already in - // a child compiler so we don't spawn another child compilers from there. - childCompiler.hooks.thisCompilation.tap( - `${pluginName} loader`, - (compilation) => { - compilation.hooks.normalModuleLoader.tap( - `${pluginName} loader`, - (loaderContext, module) => { - // eslint-disable-next-line no-param-reassign - loaderContext.emitFile = this.emitFile; - loaderContext[MODULE_TYPE] = false; // eslint-disable-line no-param-reassign - - if (module.request === request) { + if (this[`${MODULE_TYPE}/disableExtract`]()) { + callback(); + } else { + const childFilename = '*'; // eslint-disable-line no-path-concat + const publicPath = + typeof options.publicPath === 'string' + ? options.publicPath === '' || options.publicPath.endsWith('/') + ? options.publicPath + : `${options.publicPath}/` + : typeof options.publicPath === 'function' + ? options.publicPath(this.resourcePath, this.rootContext) + : this._compilation.outputOptions.publicPath; + const outputOptions = { + filename: childFilename, + publicPath, + }; + const childCompiler = this._compilation.createChildCompiler( + `${pluginName} ${request}`, + outputOptions + ); + + new NodeTemplatePlugin(outputOptions).apply(childCompiler); + new LibraryTemplatePlugin(null, 'commonjs2').apply(childCompiler); + new NodeTargetPlugin().apply(childCompiler); + new SingleEntryPlugin(this.context, `!!${request}`, pluginName).apply( + childCompiler + ); + new LimitChunkCountPlugin({ maxChunks: 1 }).apply(childCompiler); + + // We set loaderContext[MODULE_TYPE] = false to indicate we already in + // a child compiler so we don't spawn another child compilers from there. + childCompiler.hooks.thisCompilation.tap( + `${pluginName} loader`, + (compilation) => { + compilation.hooks.normalModuleLoader.tap( + `${pluginName} loader`, + (loaderContext, module) => { // eslint-disable-next-line no-param-reassign - module.loaders = loaders.map((loader) => { - return { - loader: loader.path, - options: loader.options, - ident: loader.ident, - }; - }); + loaderContext.emitFile = this.emitFile; + loaderContext[MODULE_TYPE] = false; // eslint-disable-line no-param-reassign + + if (module.request === request) { + // eslint-disable-next-line no-param-reassign + module.loaders = loaders.map((loader) => { + return { + loader: loader.path, + options: loader.options, + ident: loader.ident, + }; + }); + } } - } - ); - } - ); + ); + } + ); - let source; + let source; - childCompiler.hooks.afterCompile.tap(pluginName, (compilation) => { - source = - compilation.assets[childFilename] && - compilation.assets[childFilename].source(); + childCompiler.hooks.afterCompile.tap(pluginName, (compilation) => { + source = + compilation.assets[childFilename] && + compilation.assets[childFilename].source(); - // Remove all chunk assets - compilation.chunks.forEach((chunk) => { - chunk.files.forEach((file) => { - delete compilation.assets[file]; // eslint-disable-line no-param-reassign + // Remove all chunk assets + compilation.chunks.forEach((chunk) => { + chunk.files.forEach((file) => { + delete compilation.assets[file]; // eslint-disable-line no-param-reassign + }); }); }); - }); - const callback = this.async(); - - childCompiler.runAsChild((err, entries, compilation) => { - if (err) { - return callback(err); - } + childCompiler.runAsChild((err, entries, compilation) => { + if (err) { + return callback(err); + } - if (compilation.errors.length > 0) { - return callback(compilation.errors[0]); - } + if (compilation.errors.length > 0) { + return callback(compilation.errors[0]); + } - compilation.fileDependencies.forEach((dep) => { - this.addDependency(dep); - }, this); + compilation.fileDependencies.forEach((dep) => { + this.addDependency(dep); + }, this); - compilation.contextDependencies.forEach((dep) => { - this.addContextDependency(dep); - }, this); + compilation.contextDependencies.forEach((dep) => { + this.addContextDependency(dep); + }, this); - if (!source) { - return callback(new Error("Didn't get a result from child compiler")); - } + if (!source) { + return callback(new Error("Didn't get a result from child compiler")); + } - let text; - let locals; - - try { - text = exec(this, source, request); - locals = text && text.locals; - if (!Array.isArray(text)) { - text = [[null, text]]; - } else { - text = text.map((line) => { - const module = findModuleById(compilation.modules, line[0]); - - return { - identifier: module.identifier(), - content: line[1], - media: line[2], - sourceMap: line[3], - }; - }); + let text; + let locals; + + try { + text = exec(this, source, request); + locals = text && text.locals; + if (!Array.isArray(text)) { + text = [[null, text]]; + } else { + text = text.map((line) => { + const module = findModuleById(compilation.modules, line[0]); + + return { + identifier: module.identifier(), + content: line[1], + media: line[2], + sourceMap: line[3], + }; + }); + } + this[MODULE_TYPE](text); + } catch (e) { + return callback(e); } - this[MODULE_TYPE](text); - } catch (e) { - return callback(e); - } - let resultSource = `// extracted by ${pluginName}`; - const result = locals - ? `\nmodule.exports = ${JSON.stringify(locals)};` - : ''; + let resultSource = `// extracted by ${pluginName}`; + const result = locals + ? `\nmodule.exports = ${JSON.stringify(locals)};` + : ''; - resultSource += options.hmr - ? hotLoader(result, { context: this.context, options, locals }) - : result; + resultSource += options.hmr + ? hotLoader(result, { context: this.context, options, locals }) + : result; - return callback(null, resultSource); - }); + return callback(null, resultSource); + }); + } } -export default function() {} +export default function(source) { + return source; +} diff --git a/test/cases/disable-async-bool/async-import.css b/test/cases/disable-extract-bool/async-import.css similarity index 100% rename from test/cases/disable-async-bool/async-import.css rename to test/cases/disable-extract-bool/async-import.css diff --git a/test/cases/disable-async-bool/async.css b/test/cases/disable-extract-bool/async.css similarity index 100% rename from test/cases/disable-async-bool/async.css rename to test/cases/disable-extract-bool/async.css diff --git a/test/cases/disable-async-bool/async.js b/test/cases/disable-extract-bool/async.js similarity index 100% rename from test/cases/disable-async-bool/async.js rename to test/cases/disable-extract-bool/async.js diff --git a/test/cases/disable-async-bool/both-async.css b/test/cases/disable-extract-bool/both-async.css similarity index 100% rename from test/cases/disable-async-bool/both-async.css rename to test/cases/disable-extract-bool/both-async.css diff --git a/test/cases/disable-async-bool/expected/1.js b/test/cases/disable-extract-bool/expected/1.js similarity index 79% rename from test/cases/disable-async-bool/expected/1.js rename to test/cases/disable-extract-bool/expected/1.js index 004d3e25..e2a529ee 100644 --- a/test/cases/disable-async-bool/expected/1.js +++ b/test/cases/disable-extract-bool/expected/1.js @@ -34,13 +34,23 @@ __webpack_require__.r(__webpack_exports__); /* 5 */ /***/ (function(module, exports, __webpack_require__) { -module.exports = ".async-import {\n background: black;\n}\n.in-async {\n background: green;\n}\n"; +exports = module.exports = __webpack_require__(8)(false); +// Imports +exports.i(__webpack_require__(10), ""); +// Module +exports.push([module.i, ".in-async {\n background: green;\n}\n", ""]); + /***/ }), /* 6 */ /***/ (function(module, exports, __webpack_require__) { -module.exports = ".async-import {\n background: black;\n}\n.in-async-2 {\n background: green;\n}\n"; +exports = module.exports = __webpack_require__(8)(false); +// Imports +exports.i(__webpack_require__(10), ""); +// Module +exports.push([module.i, ".in-async-2 {\n background: green;\n}\n", ""]); + /***/ }) ]]); \ No newline at end of file diff --git a/test/cases/disable-async-bool/expected/2.js b/test/cases/disable-extract-bool/expected/2.js similarity index 50% rename from test/cases/disable-async-bool/expected/2.js rename to test/cases/disable-extract-bool/expected/2.js index 311190ea..5770fdfc 100644 --- a/test/cases/disable-async-bool/expected/2.js +++ b/test/cases/disable-extract-bool/expected/2.js @@ -3,7 +3,10 @@ /***/ 7: /***/ (function(module, exports, __webpack_require__) { -module.exports = ".async {\n background: blue;\n}\n"; +exports = module.exports = __webpack_require__(8)(false); +// Module +exports.push([module.i, ".async {\n background: blue;\n}\n", ""]); + /***/ }) diff --git a/test/cases/disable-async-bool/expected/main.js b/test/cases/disable-extract-bool/expected/main.js similarity index 95% rename from test/cases/disable-async-bool/expected/main.js rename to test/cases/disable-extract-bool/expected/main.js index 27232d9c..b6c5864a 100644 --- a/test/cases/disable-async-bool/expected/main.js +++ b/test/cases/disable-extract-bool/expected/main.js @@ -223,13 +223,23 @@ __webpack_require__.e(/* import() */ 2).then(__webpack_require__.t.bind(null, 7, /* 1 */ /***/ (function(module, exports, __webpack_require__) { -// extracted by mini-css-extract-plugin +exports = module.exports = __webpack_require__(8)(false); +// Imports +exports.i(__webpack_require__(9), ""); +// Module +exports.push([module.i, "body {\n background: red;\n}\n", ""]); + /***/ }), /* 2 */ /***/ (function(module, exports, __webpack_require__) { -// extracted by mini-css-extract-plugin +exports = module.exports = __webpack_require__(8)(false); +// Imports +exports.i(__webpack_require__(9), ""); +// Module +exports.push([module.i, ".both-async {\n color: red;\n}\n", ""]); + /***/ }) /******/ ]); \ No newline at end of file diff --git a/test/cases/disable-async-bool/in-async.css b/test/cases/disable-extract-bool/in-async.css similarity index 100% rename from test/cases/disable-async-bool/in-async.css rename to test/cases/disable-extract-bool/in-async.css diff --git a/test/cases/disable-async-bool/in-async.js b/test/cases/disable-extract-bool/in-async.js similarity index 100% rename from test/cases/disable-async-bool/in-async.js rename to test/cases/disable-extract-bool/in-async.js diff --git a/test/cases/disable-async-bool/in-async2.css b/test/cases/disable-extract-bool/in-async2.css similarity index 100% rename from test/cases/disable-async-bool/in-async2.css rename to test/cases/disable-extract-bool/in-async2.css diff --git a/test/cases/disable-async-bool/index.js b/test/cases/disable-extract-bool/index.js similarity index 100% rename from test/cases/disable-async-bool/index.js rename to test/cases/disable-extract-bool/index.js diff --git a/test/cases/disable-async-bool/main.css b/test/cases/disable-extract-bool/main.css similarity index 100% rename from test/cases/disable-async-bool/main.css rename to test/cases/disable-extract-bool/main.css diff --git a/test/cases/disable-async-bool/shared.css b/test/cases/disable-extract-bool/shared.css similarity index 100% rename from test/cases/disable-async-bool/shared.css rename to test/cases/disable-extract-bool/shared.css diff --git a/test/cases/disable-async-bool/webpack.config.js b/test/cases/disable-extract-bool/webpack.config.js similarity index 90% rename from test/cases/disable-async-bool/webpack.config.js rename to test/cases/disable-extract-bool/webpack.config.js index 16c6ba06..3588e4a0 100644 --- a/test/cases/disable-async-bool/webpack.config.js +++ b/test/cases/disable-extract-bool/webpack.config.js @@ -13,7 +13,7 @@ module.exports = { plugins: [ new Self({ filename: '[name].css', - disableAsync: true, + disableExtract: true, }), ], }; diff --git a/test/cases/disable-async-func/async-import.css b/test/cases/disable-extract-func-async/async-import.css similarity index 100% rename from test/cases/disable-async-func/async-import.css rename to test/cases/disable-extract-func-async/async-import.css diff --git a/test/cases/disable-async-func/async.css b/test/cases/disable-extract-func-async/async.css similarity index 100% rename from test/cases/disable-async-func/async.css rename to test/cases/disable-extract-func-async/async.css diff --git a/test/cases/disable-async-func/async.js b/test/cases/disable-extract-func-async/async.js similarity index 100% rename from test/cases/disable-async-func/async.js rename to test/cases/disable-extract-func-async/async.js diff --git a/test/cases/disable-async-func/async2.js b/test/cases/disable-extract-func-async/async2.js similarity index 100% rename from test/cases/disable-async-func/async2.js rename to test/cases/disable-extract-func-async/async2.js diff --git a/test/cases/disable-async-func/both-async.css b/test/cases/disable-extract-func-async/both-async.css similarity index 100% rename from test/cases/disable-async-func/both-async.css rename to test/cases/disable-extract-func-async/both-async.css diff --git a/test/cases/disable-async-func/both-page-async-disabled.css b/test/cases/disable-extract-func-async/both-page-async-disabled.css similarity index 100% rename from test/cases/disable-async-func/both-page-async-disabled.css rename to test/cases/disable-extract-func-async/both-page-async-disabled.css diff --git a/test/cases/disable-async-func/both-page-async.css b/test/cases/disable-extract-func-async/both-page-async.css similarity index 100% rename from test/cases/disable-async-func/both-page-async.css rename to test/cases/disable-extract-func-async/both-page-async.css diff --git a/test/cases/disable-extract-func-async/expected/2.js b/test/cases/disable-extract-func-async/expected/2.js new file mode 100644 index 00000000..906518cd --- /dev/null +++ b/test/cases/disable-extract-func-async/expected/2.js @@ -0,0 +1,82 @@ +(window["webpackJsonp"] = window["webpackJsonp"] || []).push([[2],[ +/* 0 */, +/* 1 */, +/* 2 */, +/* 3 */, +/* 4 */ +/***/ (function(module, __webpack_exports__, __webpack_require__) { + +"use strict"; +__webpack_require__.r(__webpack_exports__); +/* harmony import */ var _in_async__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(5); +/* harmony import */ var _in_async__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(_in_async__WEBPACK_IMPORTED_MODULE_0__); +/* harmony import */ var _in_async2_css__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(6); +/* harmony import */ var _in_async2_css__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(_in_async2_css__WEBPACK_IMPORTED_MODULE_1__); +/* harmony import */ var _in_async_css__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(7); +/* harmony import */ var _in_async_css__WEBPACK_IMPORTED_MODULE_2___default = /*#__PURE__*/__webpack_require__.n(_in_async_css__WEBPACK_IMPORTED_MODULE_2__); +/* harmony import */ var _both_async_css__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(2); +/* harmony import */ var _both_async_css__WEBPACK_IMPORTED_MODULE_3___default = /*#__PURE__*/__webpack_require__.n(_both_async_css__WEBPACK_IMPORTED_MODULE_3__); +/* harmony import */ var _both_page_async_disabled_css__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(8); +/* harmony import */ var _both_page_async_disabled_css__WEBPACK_IMPORTED_MODULE_4___default = /*#__PURE__*/__webpack_require__.n(_both_page_async_disabled_css__WEBPACK_IMPORTED_MODULE_4__); +/* harmony import */ var _both_page_async_css__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(9); +/* harmony import */ var _both_page_async_css__WEBPACK_IMPORTED_MODULE_5___default = /*#__PURE__*/__webpack_require__.n(_both_page_async_css__WEBPACK_IMPORTED_MODULE_5__); + + + + + + + + +// console.log('async.js'); + + +/***/ }), +/* 5 */ +/***/ (function(module, exports) { + +// console.log('in-async.js'); + + +/***/ }), +/* 6 */ +/***/ (function(module, exports, __webpack_require__) { + +exports = module.exports = __webpack_require__(12)(false); +// Imports +exports.i(__webpack_require__(13), ""); +// Module +exports.push([module.i, ".in-async-2 {\n background: green;\n}\n", ""]); + + +/***/ }), +/* 7 */ +/***/ (function(module, exports, __webpack_require__) { + +exports = module.exports = __webpack_require__(12)(false); +// Imports +exports.i(__webpack_require__(13), ""); +// Module +exports.push([module.i, ".in-async {\n background: green;\n}\n", ""]); + + +/***/ }), +/* 8 */ +/***/ (function(module, exports, __webpack_require__) { + +exports = module.exports = __webpack_require__(12)(false); +// Module +exports.push([module.i, ".both-page-async-disabled {\n color: yellow;\n}\n", ""]); + + +/***/ }), +/* 9 */ +/***/ (function(module, exports, __webpack_require__) { + +exports = module.exports = __webpack_require__(12)(false); +// Module +exports.push([module.i, ".both-page-async {\n color: cyan;\n}\n", ""]); + + +/***/ }) +]]); \ No newline at end of file diff --git a/test/cases/disable-extract-func-async/expected/3.js b/test/cases/disable-extract-func-async/expected/3.js new file mode 100644 index 00000000..65b7676c --- /dev/null +++ b/test/cases/disable-extract-func-async/expected/3.js @@ -0,0 +1,40 @@ +(window["webpackJsonp"] = window["webpackJsonp"] || []).push([[3],{ + +/***/ 11: +/***/ (function(module, __webpack_exports__, __webpack_require__) { + +"use strict"; +__webpack_require__.r(__webpack_exports__); +/* harmony import */ var _both_page_async_disabled_css__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(8); +/* harmony import */ var _both_page_async_disabled_css__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(_both_page_async_disabled_css__WEBPACK_IMPORTED_MODULE_0__); +/* harmony import */ var _both_page_async_css__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(9); +/* harmony import */ var _both_page_async_css__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(_both_page_async_css__WEBPACK_IMPORTED_MODULE_1__); + + + +// console.log('async2.js'); + + +/***/ }), + +/***/ 8: +/***/ (function(module, exports, __webpack_require__) { + +exports = module.exports = __webpack_require__(12)(false); +// Module +exports.push([module.i, ".both-page-async-disabled {\n color: yellow;\n}\n", ""]); + + +/***/ }), + +/***/ 9: +/***/ (function(module, exports, __webpack_require__) { + +exports = module.exports = __webpack_require__(12)(false); +// Module +exports.push([module.i, ".both-page-async {\n color: cyan;\n}\n", ""]); + + +/***/ }) + +}]); \ No newline at end of file diff --git a/test/cases/disable-extract-func-async/expected/4.js b/test/cases/disable-extract-func-async/expected/4.js new file mode 100644 index 00000000..6b7b147a --- /dev/null +++ b/test/cases/disable-extract-func-async/expected/4.js @@ -0,0 +1,13 @@ +(window["webpackJsonp"] = window["webpackJsonp"] || []).push([[4],{ + +/***/ 10: +/***/ (function(module, exports, __webpack_require__) { + +exports = module.exports = __webpack_require__(12)(false); +// Module +exports.push([module.i, ".async {\n background: blue;\n}\n", ""]); + + +/***/ }) + +}]); \ No newline at end of file diff --git a/test/cases/disable-async-func/expected/index1.css b/test/cases/disable-extract-func-async/expected/index1.css similarity index 100% rename from test/cases/disable-async-func/expected/index1.css rename to test/cases/disable-extract-func-async/expected/index1.css diff --git a/test/cases/disable-extract-func-async/expected/index1.js b/test/cases/disable-extract-func-async/expected/index1.js new file mode 100644 index 00000000..0d094964 --- /dev/null +++ b/test/cases/disable-extract-func-async/expected/index1.js @@ -0,0 +1,235 @@ +/******/ (function(modules) { // webpackBootstrap +/******/ // install a JSONP callback for chunk loading +/******/ function webpackJsonpCallback(data) { +/******/ var chunkIds = data[0]; +/******/ var moreModules = data[1]; +/******/ +/******/ +/******/ // add "moreModules" to the modules object, +/******/ // then flag all "chunkIds" as loaded and fire callback +/******/ var moduleId, chunkId, i = 0, resolves = []; +/******/ for(;i < chunkIds.length; i++) { +/******/ chunkId = chunkIds[i]; +/******/ if(installedChunks[chunkId]) { +/******/ resolves.push(installedChunks[chunkId][0]); +/******/ } +/******/ installedChunks[chunkId] = 0; +/******/ } +/******/ for(moduleId in moreModules) { +/******/ if(Object.prototype.hasOwnProperty.call(moreModules, moduleId)) { +/******/ modules[moduleId] = moreModules[moduleId]; +/******/ } +/******/ } +/******/ if(parentJsonpFunction) parentJsonpFunction(data); +/******/ +/******/ while(resolves.length) { +/******/ resolves.shift()(); +/******/ } +/******/ +/******/ }; +/******/ +/******/ +/******/ // The module cache +/******/ var installedModules = {}; +/******/ +/******/ // object to store loaded and loading chunks +/******/ // undefined = chunk not loaded, null = chunk preloaded/prefetched +/******/ // Promise = chunk loading, 0 = chunk loaded +/******/ var installedChunks = { +/******/ 0: 0 +/******/ }; +/******/ +/******/ +/******/ +/******/ // script path function +/******/ function jsonpScriptSrc(chunkId) { +/******/ return __webpack_require__.p + "" + ({}[chunkId]||chunkId) + ".js" +/******/ } +/******/ +/******/ // The require function +/******/ function __webpack_require__(moduleId) { +/******/ +/******/ // Check if module is in cache +/******/ if(installedModules[moduleId]) { +/******/ return installedModules[moduleId].exports; +/******/ } +/******/ // Create a new module (and put it into the cache) +/******/ var module = installedModules[moduleId] = { +/******/ i: moduleId, +/******/ l: false, +/******/ exports: {} +/******/ }; +/******/ +/******/ // Execute the module function +/******/ modules[moduleId].call(module.exports, module, module.exports, __webpack_require__); +/******/ +/******/ // Flag the module as loaded +/******/ module.l = true; +/******/ +/******/ // Return the exports of the module +/******/ return module.exports; +/******/ } +/******/ +/******/ // This file contains only the entry chunk. +/******/ // The chunk loading function for additional chunks +/******/ __webpack_require__.e = function requireEnsure(chunkId) { +/******/ var promises = []; +/******/ +/******/ +/******/ // JSONP chunk loading for javascript +/******/ +/******/ var installedChunkData = installedChunks[chunkId]; +/******/ if(installedChunkData !== 0) { // 0 means "already installed". +/******/ +/******/ // a Promise means "currently loading". +/******/ if(installedChunkData) { +/******/ promises.push(installedChunkData[2]); +/******/ } else { +/******/ // setup Promise in chunk cache +/******/ var promise = new Promise(function(resolve, reject) { +/******/ installedChunkData = installedChunks[chunkId] = [resolve, reject]; +/******/ }); +/******/ promises.push(installedChunkData[2] = promise); +/******/ +/******/ // start chunk loading +/******/ var script = document.createElement('script'); +/******/ var onScriptComplete; +/******/ +/******/ script.charset = 'utf-8'; +/******/ script.timeout = 120; +/******/ if (__webpack_require__.nc) { +/******/ script.setAttribute("nonce", __webpack_require__.nc); +/******/ } +/******/ script.src = jsonpScriptSrc(chunkId); +/******/ +/******/ // create error before stack unwound to get useful stacktrace later +/******/ var error = new Error(); +/******/ onScriptComplete = function (event) { +/******/ // avoid mem leaks in IE. +/******/ script.onerror = script.onload = null; +/******/ clearTimeout(timeout); +/******/ var chunk = installedChunks[chunkId]; +/******/ if(chunk !== 0) { +/******/ if(chunk) { +/******/ var errorType = event && (event.type === 'load' ? 'missing' : event.type); +/******/ var realSrc = event && event.target && event.target.src; +/******/ error.message = 'Loading chunk ' + chunkId + ' failed.\n(' + errorType + ': ' + realSrc + ')'; +/******/ error.name = 'ChunkLoadError'; +/******/ error.type = errorType; +/******/ error.request = realSrc; +/******/ chunk[1](error); +/******/ } +/******/ installedChunks[chunkId] = undefined; +/******/ } +/******/ }; +/******/ var timeout = setTimeout(function(){ +/******/ onScriptComplete({ type: 'timeout', target: script }); +/******/ }, 120000); +/******/ script.onerror = script.onload = onScriptComplete; +/******/ document.head.appendChild(script); +/******/ } +/******/ } +/******/ return Promise.all(promises); +/******/ }; +/******/ +/******/ // expose the modules object (__webpack_modules__) +/******/ __webpack_require__.m = modules; +/******/ +/******/ // expose the module cache +/******/ __webpack_require__.c = installedModules; +/******/ +/******/ // define getter function for harmony exports +/******/ __webpack_require__.d = function(exports, name, getter) { +/******/ if(!__webpack_require__.o(exports, name)) { +/******/ Object.defineProperty(exports, name, { enumerable: true, get: getter }); +/******/ } +/******/ }; +/******/ +/******/ // define __esModule on exports +/******/ __webpack_require__.r = function(exports) { +/******/ if(typeof Symbol !== 'undefined' && Symbol.toStringTag) { +/******/ Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' }); +/******/ } +/******/ Object.defineProperty(exports, '__esModule', { value: true }); +/******/ }; +/******/ +/******/ // create a fake namespace object +/******/ // mode & 1: value is a module id, require it +/******/ // mode & 2: merge all properties of value into the ns +/******/ // mode & 4: return value when already ns object +/******/ // mode & 8|1: behave like require +/******/ __webpack_require__.t = function(value, mode) { +/******/ if(mode & 1) value = __webpack_require__(value); +/******/ if(mode & 8) return value; +/******/ if((mode & 4) && typeof value === 'object' && value && value.__esModule) return value; +/******/ var ns = Object.create(null); +/******/ __webpack_require__.r(ns); +/******/ Object.defineProperty(ns, 'default', { enumerable: true, value: value }); +/******/ if(mode & 2 && typeof value != 'string') for(var key in value) __webpack_require__.d(ns, key, function(key) { return value[key]; }.bind(null, key)); +/******/ return ns; +/******/ }; +/******/ +/******/ // getDefaultExport function for compatibility with non-harmony modules +/******/ __webpack_require__.n = function(module) { +/******/ var getter = module && module.__esModule ? +/******/ function getDefault() { return module['default']; } : +/******/ function getModuleExports() { return module; }; +/******/ __webpack_require__.d(getter, 'a', getter); +/******/ return getter; +/******/ }; +/******/ +/******/ // Object.prototype.hasOwnProperty.call +/******/ __webpack_require__.o = function(object, property) { return Object.prototype.hasOwnProperty.call(object, property); }; +/******/ +/******/ // __webpack_public_path__ +/******/ __webpack_require__.p = ""; +/******/ +/******/ // on error function for async loading +/******/ __webpack_require__.oe = function(err) { console.error(err); throw err; }; +/******/ +/******/ var jsonpArray = window["webpackJsonp"] = window["webpackJsonp"] || []; +/******/ var oldJsonpFunction = jsonpArray.push.bind(jsonpArray); +/******/ jsonpArray.push = webpackJsonpCallback; +/******/ jsonpArray = jsonpArray.slice(); +/******/ for(var i = 0; i < jsonpArray.length; i++) webpackJsonpCallback(jsonpArray[i]); +/******/ var parentJsonpFunction = oldJsonpFunction; +/******/ +/******/ +/******/ // Load entry module and return exports +/******/ return __webpack_require__(__webpack_require__.s = 0); +/******/ }) +/************************************************************************/ +/******/ ([ +/* 0 */ +/***/ (function(module, __webpack_exports__, __webpack_require__) { + +"use strict"; +__webpack_require__.r(__webpack_exports__); +/* harmony import */ var _main_css__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(1); +/* harmony import */ var _main_css__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(_main_css__WEBPACK_IMPORTED_MODULE_0__); +/* harmony import */ var _both_async_css__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(2); +/* harmony import */ var _both_async_css__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(_both_async_css__WEBPACK_IMPORTED_MODULE_1__); + + + +__webpack_require__.e(/* import() */ 2).then(__webpack_require__.bind(null, 4)); + +__webpack_require__.e(/* import() */ 4).then(__webpack_require__.t.bind(null, 10, 7)); + +// console.log('index.js'); + + +/***/ }), +/* 1 */ +/***/ (function(module, exports, __webpack_require__) { + +// extracted by mini-css-extract-plugin + +/***/ }), +/* 2 */ +/***/ (function(module, exports, __webpack_require__) { + +// extracted by mini-css-extract-plugin + +/***/ }) +/******/ ]); \ No newline at end of file diff --git a/test/cases/disable-extract-func-async/expected/index2.js b/test/cases/disable-extract-func-async/expected/index2.js new file mode 100644 index 00000000..e2fd7c24 --- /dev/null +++ b/test/cases/disable-extract-func-async/expected/index2.js @@ -0,0 +1,214 @@ +/******/ (function(modules) { // webpackBootstrap +/******/ // install a JSONP callback for chunk loading +/******/ function webpackJsonpCallback(data) { +/******/ var chunkIds = data[0]; +/******/ var moreModules = data[1]; +/******/ +/******/ +/******/ // add "moreModules" to the modules object, +/******/ // then flag all "chunkIds" as loaded and fire callback +/******/ var moduleId, chunkId, i = 0, resolves = []; +/******/ for(;i < chunkIds.length; i++) { +/******/ chunkId = chunkIds[i]; +/******/ if(installedChunks[chunkId]) { +/******/ resolves.push(installedChunks[chunkId][0]); +/******/ } +/******/ installedChunks[chunkId] = 0; +/******/ } +/******/ for(moduleId in moreModules) { +/******/ if(Object.prototype.hasOwnProperty.call(moreModules, moduleId)) { +/******/ modules[moduleId] = moreModules[moduleId]; +/******/ } +/******/ } +/******/ if(parentJsonpFunction) parentJsonpFunction(data); +/******/ +/******/ while(resolves.length) { +/******/ resolves.shift()(); +/******/ } +/******/ +/******/ }; +/******/ +/******/ +/******/ // The module cache +/******/ var installedModules = {}; +/******/ +/******/ // object to store loaded and loading chunks +/******/ // undefined = chunk not loaded, null = chunk preloaded/prefetched +/******/ // Promise = chunk loading, 0 = chunk loaded +/******/ var installedChunks = { +/******/ 1: 0 +/******/ }; +/******/ +/******/ +/******/ +/******/ // script path function +/******/ function jsonpScriptSrc(chunkId) { +/******/ return __webpack_require__.p + "" + ({}[chunkId]||chunkId) + ".js" +/******/ } +/******/ +/******/ // The require function +/******/ function __webpack_require__(moduleId) { +/******/ +/******/ // Check if module is in cache +/******/ if(installedModules[moduleId]) { +/******/ return installedModules[moduleId].exports; +/******/ } +/******/ // Create a new module (and put it into the cache) +/******/ var module = installedModules[moduleId] = { +/******/ i: moduleId, +/******/ l: false, +/******/ exports: {} +/******/ }; +/******/ +/******/ // Execute the module function +/******/ modules[moduleId].call(module.exports, module, module.exports, __webpack_require__); +/******/ +/******/ // Flag the module as loaded +/******/ module.l = true; +/******/ +/******/ // Return the exports of the module +/******/ return module.exports; +/******/ } +/******/ +/******/ // This file contains only the entry chunk. +/******/ // The chunk loading function for additional chunks +/******/ __webpack_require__.e = function requireEnsure(chunkId) { +/******/ var promises = []; +/******/ +/******/ +/******/ // JSONP chunk loading for javascript +/******/ +/******/ var installedChunkData = installedChunks[chunkId]; +/******/ if(installedChunkData !== 0) { // 0 means "already installed". +/******/ +/******/ // a Promise means "currently loading". +/******/ if(installedChunkData) { +/******/ promises.push(installedChunkData[2]); +/******/ } else { +/******/ // setup Promise in chunk cache +/******/ var promise = new Promise(function(resolve, reject) { +/******/ installedChunkData = installedChunks[chunkId] = [resolve, reject]; +/******/ }); +/******/ promises.push(installedChunkData[2] = promise); +/******/ +/******/ // start chunk loading +/******/ var script = document.createElement('script'); +/******/ var onScriptComplete; +/******/ +/******/ script.charset = 'utf-8'; +/******/ script.timeout = 120; +/******/ if (__webpack_require__.nc) { +/******/ script.setAttribute("nonce", __webpack_require__.nc); +/******/ } +/******/ script.src = jsonpScriptSrc(chunkId); +/******/ +/******/ // create error before stack unwound to get useful stacktrace later +/******/ var error = new Error(); +/******/ onScriptComplete = function (event) { +/******/ // avoid mem leaks in IE. +/******/ script.onerror = script.onload = null; +/******/ clearTimeout(timeout); +/******/ var chunk = installedChunks[chunkId]; +/******/ if(chunk !== 0) { +/******/ if(chunk) { +/******/ var errorType = event && (event.type === 'load' ? 'missing' : event.type); +/******/ var realSrc = event && event.target && event.target.src; +/******/ error.message = 'Loading chunk ' + chunkId + ' failed.\n(' + errorType + ': ' + realSrc + ')'; +/******/ error.name = 'ChunkLoadError'; +/******/ error.type = errorType; +/******/ error.request = realSrc; +/******/ chunk[1](error); +/******/ } +/******/ installedChunks[chunkId] = undefined; +/******/ } +/******/ }; +/******/ var timeout = setTimeout(function(){ +/******/ onScriptComplete({ type: 'timeout', target: script }); +/******/ }, 120000); +/******/ script.onerror = script.onload = onScriptComplete; +/******/ document.head.appendChild(script); +/******/ } +/******/ } +/******/ return Promise.all(promises); +/******/ }; +/******/ +/******/ // expose the modules object (__webpack_modules__) +/******/ __webpack_require__.m = modules; +/******/ +/******/ // expose the module cache +/******/ __webpack_require__.c = installedModules; +/******/ +/******/ // define getter function for harmony exports +/******/ __webpack_require__.d = function(exports, name, getter) { +/******/ if(!__webpack_require__.o(exports, name)) { +/******/ Object.defineProperty(exports, name, { enumerable: true, get: getter }); +/******/ } +/******/ }; +/******/ +/******/ // define __esModule on exports +/******/ __webpack_require__.r = function(exports) { +/******/ if(typeof Symbol !== 'undefined' && Symbol.toStringTag) { +/******/ Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' }); +/******/ } +/******/ Object.defineProperty(exports, '__esModule', { value: true }); +/******/ }; +/******/ +/******/ // create a fake namespace object +/******/ // mode & 1: value is a module id, require it +/******/ // mode & 2: merge all properties of value into the ns +/******/ // mode & 4: return value when already ns object +/******/ // mode & 8|1: behave like require +/******/ __webpack_require__.t = function(value, mode) { +/******/ if(mode & 1) value = __webpack_require__(value); +/******/ if(mode & 8) return value; +/******/ if((mode & 4) && typeof value === 'object' && value && value.__esModule) return value; +/******/ var ns = Object.create(null); +/******/ __webpack_require__.r(ns); +/******/ Object.defineProperty(ns, 'default', { enumerable: true, value: value }); +/******/ if(mode & 2 && typeof value != 'string') for(var key in value) __webpack_require__.d(ns, key, function(key) { return value[key]; }.bind(null, key)); +/******/ return ns; +/******/ }; +/******/ +/******/ // getDefaultExport function for compatibility with non-harmony modules +/******/ __webpack_require__.n = function(module) { +/******/ var getter = module && module.__esModule ? +/******/ function getDefault() { return module['default']; } : +/******/ function getModuleExports() { return module; }; +/******/ __webpack_require__.d(getter, 'a', getter); +/******/ return getter; +/******/ }; +/******/ +/******/ // Object.prototype.hasOwnProperty.call +/******/ __webpack_require__.o = function(object, property) { return Object.prototype.hasOwnProperty.call(object, property); }; +/******/ +/******/ // __webpack_public_path__ +/******/ __webpack_require__.p = ""; +/******/ +/******/ // on error function for async loading +/******/ __webpack_require__.oe = function(err) { console.error(err); throw err; }; +/******/ +/******/ var jsonpArray = window["webpackJsonp"] = window["webpackJsonp"] || []; +/******/ var oldJsonpFunction = jsonpArray.push.bind(jsonpArray); +/******/ jsonpArray.push = webpackJsonpCallback; +/******/ jsonpArray = jsonpArray.slice(); +/******/ for(var i = 0; i < jsonpArray.length; i++) webpackJsonpCallback(jsonpArray[i]); +/******/ var parentJsonpFunction = oldJsonpFunction; +/******/ +/******/ +/******/ // Load entry module and return exports +/******/ return __webpack_require__(__webpack_require__.s = 3); +/******/ }) +/************************************************************************/ +/******/ ({ + +/***/ 3: +/***/ (function(module, exports, __webpack_require__) { + +__webpack_require__.e(/* import() */ 3).then(__webpack_require__.bind(null, 11)); + +// console.log('index2'); + + +/***/ }) + +/******/ }); \ No newline at end of file diff --git a/test/cases/disable-async-func/in-async.css b/test/cases/disable-extract-func-async/in-async.css similarity index 100% rename from test/cases/disable-async-func/in-async.css rename to test/cases/disable-extract-func-async/in-async.css diff --git a/test/cases/disable-async-func/in-async.js b/test/cases/disable-extract-func-async/in-async.js similarity index 100% rename from test/cases/disable-async-func/in-async.js rename to test/cases/disable-extract-func-async/in-async.js diff --git a/test/cases/disable-async-func/in-async2.css b/test/cases/disable-extract-func-async/in-async2.css similarity index 100% rename from test/cases/disable-async-func/in-async2.css rename to test/cases/disable-extract-func-async/in-async2.css diff --git a/test/cases/disable-async-func/index.js b/test/cases/disable-extract-func-async/index.js similarity index 100% rename from test/cases/disable-async-func/index.js rename to test/cases/disable-extract-func-async/index.js diff --git a/test/cases/disable-async-func/index2.js b/test/cases/disable-extract-func-async/index2.js similarity index 100% rename from test/cases/disable-async-func/index2.js rename to test/cases/disable-extract-func-async/index2.js diff --git a/test/cases/disable-async-func/main.css b/test/cases/disable-extract-func-async/main.css similarity index 100% rename from test/cases/disable-async-func/main.css rename to test/cases/disable-extract-func-async/main.css diff --git a/test/cases/disable-async-func/shared.css b/test/cases/disable-extract-func-async/shared.css similarity index 100% rename from test/cases/disable-async-func/shared.css rename to test/cases/disable-extract-func-async/shared.css diff --git a/test/cases/disable-extract-func-async/webpack.config.js b/test/cases/disable-extract-func-async/webpack.config.js new file mode 100644 index 00000000..bb6a69a7 --- /dev/null +++ b/test/cases/disable-extract-func-async/webpack.config.js @@ -0,0 +1,24 @@ +import Self from '../../../src'; + +module.exports = { + entry: { + index1: './index.js', + index2: './index2.js', + }, + module: { + rules: [ + { + test: /\.css$/, + use: [Self.loader, 'css-loader'], + }, + ], + }, + plugins: [ + new Self({ + filename: '[name].css', + disableExtract({ isAsync }) { + return isAsync; + }, + }), + ], +}; diff --git a/test/cases/disable-extract-func/async-import.css b/test/cases/disable-extract-func/async-import.css new file mode 100644 index 00000000..107a6a79 --- /dev/null +++ b/test/cases/disable-extract-func/async-import.css @@ -0,0 +1,3 @@ +.async-import { + background: black; +} diff --git a/test/cases/disable-extract-func/async.css b/test/cases/disable-extract-func/async.css new file mode 100644 index 00000000..65bdcfa7 --- /dev/null +++ b/test/cases/disable-extract-func/async.css @@ -0,0 +1,3 @@ +.async { + background: blue; +} diff --git a/test/cases/disable-extract-func/async.js b/test/cases/disable-extract-func/async.js new file mode 100644 index 00000000..9da9a541 --- /dev/null +++ b/test/cases/disable-extract-func/async.js @@ -0,0 +1,9 @@ +import './in-async'; +import './in-async2.css'; +import './in-async.css'; +import './both-async.css'; + +import './both-page-async-disabled.css'; +import './both-page-async.css'; + +// console.log('async.js'); diff --git a/test/cases/disable-extract-func/async2.js b/test/cases/disable-extract-func/async2.js new file mode 100644 index 00000000..205be95b --- /dev/null +++ b/test/cases/disable-extract-func/async2.js @@ -0,0 +1,4 @@ +import './both-page-async-disabled.css'; +import './both-page-async.css'; + +// console.log('async2.js'); diff --git a/test/cases/disable-extract-func/both-async.css b/test/cases/disable-extract-func/both-async.css new file mode 100644 index 00000000..8a2b22cc --- /dev/null +++ b/test/cases/disable-extract-func/both-async.css @@ -0,0 +1,5 @@ +@import 'shared.css'; + +.both-async { + color: red; +} diff --git a/test/cases/disable-extract-func/both-page-async-disabled.css b/test/cases/disable-extract-func/both-page-async-disabled.css new file mode 100644 index 00000000..c4e99243 --- /dev/null +++ b/test/cases/disable-extract-func/both-page-async-disabled.css @@ -0,0 +1,3 @@ +.both-page-async-disabled { + color: yellow; +} diff --git a/test/cases/disable-extract-func/both-page-async.css b/test/cases/disable-extract-func/both-page-async.css new file mode 100644 index 00000000..b3336101 --- /dev/null +++ b/test/cases/disable-extract-func/both-page-async.css @@ -0,0 +1,3 @@ +.both-page-async { + color: cyan; +} diff --git a/test/cases/disable-async-func/expected/0.css b/test/cases/disable-extract-func/expected/1.css similarity index 100% rename from test/cases/disable-async-func/expected/0.css rename to test/cases/disable-extract-func/expected/1.css diff --git a/test/cases/disable-async-func/expected/0.js b/test/cases/disable-extract-func/expected/1.js similarity index 84% rename from test/cases/disable-async-func/expected/0.js rename to test/cases/disable-extract-func/expected/1.js index 96d1da61..c2100543 100644 --- a/test/cases/disable-async-func/expected/0.js +++ b/test/cases/disable-extract-func/expected/1.js @@ -1,4 +1,4 @@ -(window["webpackJsonp"] = window["webpackJsonp"] || []).push([[0],[ +(window["webpackJsonp"] = window["webpackJsonp"] || []).push([[1],[ /* 0 */, /* 1 */, /* 2 */, @@ -48,13 +48,21 @@ __webpack_require__.r(__webpack_exports__); /* 7 */ /***/ (function(module, exports, __webpack_require__) { -module.exports = ".in-async {\n background: green;\n}\n"; +exports = module.exports = __webpack_require__(12)(false); +// Imports +exports.i(__webpack_require__(13), ""); +// Module +exports.push([module.i, ".in-async {\n background: green;\n}\n", ""]); + /***/ }), /* 8 */ /***/ (function(module, exports, __webpack_require__) { -module.exports = ".both-page-async-disabled {\n color: yellow;\n}\n"; +exports = module.exports = __webpack_require__(12)(false); +// Module +exports.push([module.i, ".both-page-async-disabled {\n color: yellow;\n}\n", ""]); + /***/ }), /* 9 */ diff --git a/test/cases/disable-async-func/expected/2.css b/test/cases/disable-extract-func/expected/2.css similarity index 100% rename from test/cases/disable-async-func/expected/2.css rename to test/cases/disable-extract-func/expected/2.css diff --git a/test/cases/disable-async-func/expected/2.js b/test/cases/disable-extract-func/expected/2.js similarity index 86% rename from test/cases/disable-async-func/expected/2.js rename to test/cases/disable-extract-func/expected/2.js index dabf02cc..860ce999 100644 --- a/test/cases/disable-async-func/expected/2.js +++ b/test/cases/disable-extract-func/expected/2.js @@ -20,7 +20,10 @@ __webpack_require__.r(__webpack_exports__); /***/ 8: /***/ (function(module, exports, __webpack_require__) { -module.exports = ".both-page-async-disabled {\n color: yellow;\n}\n"; +exports = module.exports = __webpack_require__(12)(false); +// Module +exports.push([module.i, ".both-page-async-disabled {\n color: yellow;\n}\n", ""]); + /***/ }), diff --git a/test/cases/disable-async-func/expected/3.css b/test/cases/disable-extract-func/expected/3.css similarity index 100% rename from test/cases/disable-async-func/expected/3.css rename to test/cases/disable-extract-func/expected/3.css diff --git a/test/cases/disable-async-func/expected/3.js b/test/cases/disable-extract-func/expected/3.js similarity index 100% rename from test/cases/disable-async-func/expected/3.js rename to test/cases/disable-extract-func/expected/3.js diff --git a/test/cases/disable-async-bool/expected/main.css b/test/cases/disable-extract-func/expected/index1.css similarity index 100% rename from test/cases/disable-async-bool/expected/main.css rename to test/cases/disable-extract-func/expected/index1.css diff --git a/test/cases/disable-async-func/expected/index1.js b/test/cases/disable-extract-func/expected/index1.js similarity index 98% rename from test/cases/disable-async-func/expected/index1.js rename to test/cases/disable-extract-func/expected/index1.js index 99b1413b..b6f8ac79 100644 --- a/test/cases/disable-async-func/expected/index1.js +++ b/test/cases/disable-extract-func/expected/index1.js @@ -34,14 +34,14 @@ /******/ /******/ // object to store loaded CSS chunks /******/ var installedCssChunks = { -/******/ 1: 0 +/******/ 0: 0 /******/ } /******/ /******/ // object to store loaded and loading chunks /******/ // undefined = chunk not loaded, null = chunk preloaded/prefetched /******/ // Promise = chunk loading, 0 = chunk loaded /******/ var installedChunks = { -/******/ 1: 0 +/******/ 0: 0 /******/ }; /******/ /******/ @@ -82,7 +82,7 @@ /******/ /******/ /******/ // mini-css-extract-plugin CSS loading -/******/ var cssChunks = {"0":1,"3":1}; +/******/ var cssChunks = {"1":1,"3":1}; /******/ if(installedCssChunks[chunkId]) promises.push(installedCssChunks[chunkId]); /******/ else if(installedCssChunks[chunkId] !== 0 && cssChunks[chunkId]) { /******/ promises.push(installedCssChunks[chunkId] = new Promise(function(resolve, reject) { @@ -258,7 +258,7 @@ __webpack_require__.r(__webpack_exports__); -__webpack_require__.e(/* import() */ 0).then(__webpack_require__.bind(null, 4)); +__webpack_require__.e(/* import() */ 1).then(__webpack_require__.bind(null, 4)); __webpack_require__.e(/* import() */ 3).then(__webpack_require__.t.bind(null, 10, 7)); diff --git a/test/cases/disable-async-func/expected/index2.js b/test/cases/disable-extract-func/expected/index2.js similarity index 100% rename from test/cases/disable-async-func/expected/index2.js rename to test/cases/disable-extract-func/expected/index2.js diff --git a/test/cases/disable-extract-func/in-async.css b/test/cases/disable-extract-func/in-async.css new file mode 100644 index 00000000..922b9d89 --- /dev/null +++ b/test/cases/disable-extract-func/in-async.css @@ -0,0 +1,5 @@ +@import './async-import.css'; + +.in-async { + background: green; +} diff --git a/test/cases/disable-extract-func/in-async.js b/test/cases/disable-extract-func/in-async.js new file mode 100644 index 00000000..33611214 --- /dev/null +++ b/test/cases/disable-extract-func/in-async.js @@ -0,0 +1 @@ +// console.log('in-async.js'); diff --git a/test/cases/disable-extract-func/in-async2.css b/test/cases/disable-extract-func/in-async2.css new file mode 100644 index 00000000..28781c21 --- /dev/null +++ b/test/cases/disable-extract-func/in-async2.css @@ -0,0 +1,5 @@ +@import './async-import.css'; + +.in-async-2 { + background: green; +} diff --git a/test/cases/disable-extract-func/index.js b/test/cases/disable-extract-func/index.js new file mode 100644 index 00000000..13a5bbe1 --- /dev/null +++ b/test/cases/disable-extract-func/index.js @@ -0,0 +1,8 @@ +import './main.css'; +import './both-async.css'; + +import('./async'); + +import('./async.css'); + +// console.log('index.js'); diff --git a/test/cases/disable-extract-func/index2.js b/test/cases/disable-extract-func/index2.js new file mode 100644 index 00000000..e44b1ad9 --- /dev/null +++ b/test/cases/disable-extract-func/index2.js @@ -0,0 +1,3 @@ +import('./async2'); + +// console.log('index2'); diff --git a/test/cases/disable-extract-func/main.css b/test/cases/disable-extract-func/main.css new file mode 100644 index 00000000..584e42d4 --- /dev/null +++ b/test/cases/disable-extract-func/main.css @@ -0,0 +1,5 @@ +@import 'shared.css'; + +body { + background: red; +} diff --git a/test/cases/disable-extract-func/shared.css b/test/cases/disable-extract-func/shared.css new file mode 100644 index 00000000..0a1ca625 --- /dev/null +++ b/test/cases/disable-extract-func/shared.css @@ -0,0 +1,3 @@ +.shared { + background: pink; +} diff --git a/test/cases/disable-async-func/webpack.config.js b/test/cases/disable-extract-func/webpack.config.js similarity index 93% rename from test/cases/disable-async-func/webpack.config.js rename to test/cases/disable-extract-func/webpack.config.js index a1c89186..57e250cd 100644 --- a/test/cases/disable-async-func/webpack.config.js +++ b/test/cases/disable-extract-func/webpack.config.js @@ -16,7 +16,7 @@ module.exports = { plugins: [ new Self({ filename: '[name].css', - disableAsync({ module }) { + disableExtract({ module }) { let ret = false; if ( module.content.indexOf('in-async ') > -1 || From 81517cc8e8d750eafc6fb02388cbd4ad852bf005 Mon Sep 17 00:00:00 2001 From: Light Leung Date: Wed, 24 Jul 2019 22:10:35 +0800 Subject: [PATCH 12/23] feat: ability to disable extract modules, update doc --- README.md | 14 ++++++++------ 1 file changed, 8 insertions(+), 6 deletions(-) diff --git a/README.md b/README.md index b6194016..78bca0a9 100644 --- a/README.md +++ b/README.md @@ -343,23 +343,25 @@ module.exports = { }; ``` -#### Disable extracting css from async chunks +#### Disable Extracting Specified CSS from Chunks -You may disable extracting css from async chunks with `disableAsync` option. +You may disable extracting css from all chunks with `disableExtract` option. ```javascript const miniCssExtractPlugin = new MiniCssExtractPlugin({ - disableAsync: true, + disableExtract: true, }); ``` -You may also disable extracting async css modules programmatically by passing a function. +You may also disable extracting css modules programmatically by passing a function. ```javascript const miniCssExtractPlugin = new MiniCssExtractPlugin({ - disableAsync({ module }) { + disableExtract({ module, isAsync }) { // Do whatever you want. Disable by content size for example: - return module.content.length < 10 * 1024; + // return module.content.length < 10 * 1024; + // Or disable extracting from all async chunks + return isAsync; }, }); ``` From 5b3fbef9db422b7f3de83b0a65b2e0bb1f149ed5 Mon Sep 17 00:00:00 2001 From: Light Leung Date: Wed, 24 Jul 2019 22:45:41 +0800 Subject: [PATCH 13/23] feat: ability to disable extract modules, remove boolean type option --- src/index.js | 26 +- .../disable-extract-bool/async-import.css | 3 - test/cases/disable-extract-bool/async.css | 3 - test/cases/disable-extract-bool/async.js | 6 - .../cases/disable-extract-bool/both-async.css | 5 - test/cases/disable-extract-bool/expected/1.js | 56 ---- test/cases/disable-extract-bool/expected/2.js | 13 - .../disable-extract-bool/expected/main.js | 245 ------------------ test/cases/disable-extract-bool/in-async.css | 5 - test/cases/disable-extract-bool/in-async.js | 1 - test/cases/disable-extract-bool/in-async2.css | 5 - test/cases/disable-extract-bool/index.js | 8 - test/cases/disable-extract-bool/main.css | 5 - test/cases/disable-extract-bool/shared.css | 3 - .../disable-extract-bool/webpack.config.js | 19 -- 15 files changed, 12 insertions(+), 391 deletions(-) delete mode 100644 test/cases/disable-extract-bool/async-import.css delete mode 100644 test/cases/disable-extract-bool/async.css delete mode 100644 test/cases/disable-extract-bool/async.js delete mode 100644 test/cases/disable-extract-bool/both-async.css delete mode 100644 test/cases/disable-extract-bool/expected/1.js delete mode 100644 test/cases/disable-extract-bool/expected/2.js delete mode 100644 test/cases/disable-extract-bool/expected/main.js delete mode 100644 test/cases/disable-extract-bool/in-async.css delete mode 100644 test/cases/disable-extract-bool/in-async.js delete mode 100644 test/cases/disable-extract-bool/in-async2.css delete mode 100644 test/cases/disable-extract-bool/index.js delete mode 100644 test/cases/disable-extract-bool/main.css delete mode 100644 test/cases/disable-extract-bool/shared.css delete mode 100644 test/cases/disable-extract-bool/webpack.config.js diff --git a/src/index.js b/src/index.js index 12c180a0..a03ab8d1 100644 --- a/src/index.js +++ b/src/index.js @@ -177,6 +177,10 @@ class MiniCssExtractPlugin { ); } + if (module[`${MODULE_TYPE}/disableExtract`]) { + return; + } + const identifierCountMap = new Map(); for (const line of content) { @@ -206,8 +210,7 @@ class MiniCssExtractPlugin { pluginName, (result, { chunk }) => { const renderedModules = Array.from(chunk.modulesIterable).filter( - (module) => - module.type === MODULE_TYPE && !moduleToBeRebuild.has(module) + (module) => module.type === MODULE_TYPE ); if (renderedModules.length > 0) { @@ -236,8 +239,7 @@ class MiniCssExtractPlugin { pluginName, (result, { chunk }) => { const renderedModules = Array.from(chunk.modulesIterable).filter( - (module) => - module.type === MODULE_TYPE && !moduleToBeRebuild.has(module) + (module) => module.type === MODULE_TYPE ); if (renderedModules.length > 0) { @@ -305,7 +307,7 @@ class MiniCssExtractPlugin { const { mainTemplate } = compilation; mainTemplate.hooks.localVars.tap(pluginName, (source, chunk) => { - const chunkMap = this.getCssChunkObject(chunk, compilation); + const chunkMap = this.getCssChunkObject(chunk); if (Object.keys(chunkMap).length > 0) { return Template.asString([ @@ -326,7 +328,7 @@ class MiniCssExtractPlugin { mainTemplate.hooks.requireEnsure.tap( pluginName, (source, chunk, hash) => { - const chunkMap = this.getCssChunkObject(chunk, compilation); + const chunkMap = this.getCssChunkObject(chunk); if (Object.keys(chunkMap).length > 0) { const chunkMaps = chunk.getChunkMaps(); @@ -499,25 +501,21 @@ class MiniCssExtractPlugin { shouldDisableExtract({ module, isAsync }) { const { disableExtract } = this.options; let shouldDisable = false; - if (disableExtract === true) { - shouldDisable = true; - } else if (typeof disableExtract === 'function') { + if (typeof disableExtract === 'function') { shouldDisable = disableExtract({ module, isAsync }); } return shouldDisable; } - getCssChunkObject(mainChunk, compilation) { + getCssChunkObject(mainChunk) { const obj = {}; for (const chunk of mainChunk.getAllAsyncChunks()) { for (const module of chunk.modulesIterable) { if (module.type === MODULE_TYPE) { - if (!compilation[MODULE_TYPE].moduleToBeRebuild.has(module)) { - obj[chunk.id] = 1; - break; - } + obj[chunk.id] = 1; + break; } } } diff --git a/test/cases/disable-extract-bool/async-import.css b/test/cases/disable-extract-bool/async-import.css deleted file mode 100644 index 107a6a79..00000000 --- a/test/cases/disable-extract-bool/async-import.css +++ /dev/null @@ -1,3 +0,0 @@ -.async-import { - background: black; -} diff --git a/test/cases/disable-extract-bool/async.css b/test/cases/disable-extract-bool/async.css deleted file mode 100644 index 65bdcfa7..00000000 --- a/test/cases/disable-extract-bool/async.css +++ /dev/null @@ -1,3 +0,0 @@ -.async { - background: blue; -} diff --git a/test/cases/disable-extract-bool/async.js b/test/cases/disable-extract-bool/async.js deleted file mode 100644 index 4455a5e0..00000000 --- a/test/cases/disable-extract-bool/async.js +++ /dev/null @@ -1,6 +0,0 @@ -import './in-async'; -import './in-async.css'; -import './in-async2.css'; -import './both-async.css'; - -// console.log('async.js'); diff --git a/test/cases/disable-extract-bool/both-async.css b/test/cases/disable-extract-bool/both-async.css deleted file mode 100644 index 8a2b22cc..00000000 --- a/test/cases/disable-extract-bool/both-async.css +++ /dev/null @@ -1,5 +0,0 @@ -@import 'shared.css'; - -.both-async { - color: red; -} diff --git a/test/cases/disable-extract-bool/expected/1.js b/test/cases/disable-extract-bool/expected/1.js deleted file mode 100644 index e2a529ee..00000000 --- a/test/cases/disable-extract-bool/expected/1.js +++ /dev/null @@ -1,56 +0,0 @@ -(window["webpackJsonp"] = window["webpackJsonp"] || []).push([[1],[ -/* 0 */, -/* 1 */, -/* 2 */, -/* 3 */ -/***/ (function(module, __webpack_exports__, __webpack_require__) { - -"use strict"; -__webpack_require__.r(__webpack_exports__); -/* harmony import */ var _in_async__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(4); -/* harmony import */ var _in_async__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(_in_async__WEBPACK_IMPORTED_MODULE_0__); -/* harmony import */ var _in_async_css__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(5); -/* harmony import */ var _in_async_css__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(_in_async_css__WEBPACK_IMPORTED_MODULE_1__); -/* harmony import */ var _in_async2_css__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(6); -/* harmony import */ var _in_async2_css__WEBPACK_IMPORTED_MODULE_2___default = /*#__PURE__*/__webpack_require__.n(_in_async2_css__WEBPACK_IMPORTED_MODULE_2__); -/* harmony import */ var _both_async_css__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(2); -/* harmony import */ var _both_async_css__WEBPACK_IMPORTED_MODULE_3___default = /*#__PURE__*/__webpack_require__.n(_both_async_css__WEBPACK_IMPORTED_MODULE_3__); - - - - - -// console.log('async.js'); - - -/***/ }), -/* 4 */ -/***/ (function(module, exports) { - -// console.log('in-async.js'); - - -/***/ }), -/* 5 */ -/***/ (function(module, exports, __webpack_require__) { - -exports = module.exports = __webpack_require__(8)(false); -// Imports -exports.i(__webpack_require__(10), ""); -// Module -exports.push([module.i, ".in-async {\n background: green;\n}\n", ""]); - - -/***/ }), -/* 6 */ -/***/ (function(module, exports, __webpack_require__) { - -exports = module.exports = __webpack_require__(8)(false); -// Imports -exports.i(__webpack_require__(10), ""); -// Module -exports.push([module.i, ".in-async-2 {\n background: green;\n}\n", ""]); - - -/***/ }) -]]); \ No newline at end of file diff --git a/test/cases/disable-extract-bool/expected/2.js b/test/cases/disable-extract-bool/expected/2.js deleted file mode 100644 index 5770fdfc..00000000 --- a/test/cases/disable-extract-bool/expected/2.js +++ /dev/null @@ -1,13 +0,0 @@ -(window["webpackJsonp"] = window["webpackJsonp"] || []).push([[2],{ - -/***/ 7: -/***/ (function(module, exports, __webpack_require__) { - -exports = module.exports = __webpack_require__(8)(false); -// Module -exports.push([module.i, ".async {\n background: blue;\n}\n", ""]); - - -/***/ }) - -}]); \ No newline at end of file diff --git a/test/cases/disable-extract-bool/expected/main.js b/test/cases/disable-extract-bool/expected/main.js deleted file mode 100644 index b6c5864a..00000000 --- a/test/cases/disable-extract-bool/expected/main.js +++ /dev/null @@ -1,245 +0,0 @@ -/******/ (function(modules) { // webpackBootstrap -/******/ // install a JSONP callback for chunk loading -/******/ function webpackJsonpCallback(data) { -/******/ var chunkIds = data[0]; -/******/ var moreModules = data[1]; -/******/ -/******/ -/******/ // add "moreModules" to the modules object, -/******/ // then flag all "chunkIds" as loaded and fire callback -/******/ var moduleId, chunkId, i = 0, resolves = []; -/******/ for(;i < chunkIds.length; i++) { -/******/ chunkId = chunkIds[i]; -/******/ if(installedChunks[chunkId]) { -/******/ resolves.push(installedChunks[chunkId][0]); -/******/ } -/******/ installedChunks[chunkId] = 0; -/******/ } -/******/ for(moduleId in moreModules) { -/******/ if(Object.prototype.hasOwnProperty.call(moreModules, moduleId)) { -/******/ modules[moduleId] = moreModules[moduleId]; -/******/ } -/******/ } -/******/ if(parentJsonpFunction) parentJsonpFunction(data); -/******/ -/******/ while(resolves.length) { -/******/ resolves.shift()(); -/******/ } -/******/ -/******/ }; -/******/ -/******/ -/******/ // The module cache -/******/ var installedModules = {}; -/******/ -/******/ // object to store loaded and loading chunks -/******/ // undefined = chunk not loaded, null = chunk preloaded/prefetched -/******/ // Promise = chunk loading, 0 = chunk loaded -/******/ var installedChunks = { -/******/ 0: 0 -/******/ }; -/******/ -/******/ -/******/ -/******/ // script path function -/******/ function jsonpScriptSrc(chunkId) { -/******/ return __webpack_require__.p + "" + ({}[chunkId]||chunkId) + ".js" -/******/ } -/******/ -/******/ // The require function -/******/ function __webpack_require__(moduleId) { -/******/ -/******/ // Check if module is in cache -/******/ if(installedModules[moduleId]) { -/******/ return installedModules[moduleId].exports; -/******/ } -/******/ // Create a new module (and put it into the cache) -/******/ var module = installedModules[moduleId] = { -/******/ i: moduleId, -/******/ l: false, -/******/ exports: {} -/******/ }; -/******/ -/******/ // Execute the module function -/******/ modules[moduleId].call(module.exports, module, module.exports, __webpack_require__); -/******/ -/******/ // Flag the module as loaded -/******/ module.l = true; -/******/ -/******/ // Return the exports of the module -/******/ return module.exports; -/******/ } -/******/ -/******/ // This file contains only the entry chunk. -/******/ // The chunk loading function for additional chunks -/******/ __webpack_require__.e = function requireEnsure(chunkId) { -/******/ var promises = []; -/******/ -/******/ -/******/ // JSONP chunk loading for javascript -/******/ -/******/ var installedChunkData = installedChunks[chunkId]; -/******/ if(installedChunkData !== 0) { // 0 means "already installed". -/******/ -/******/ // a Promise means "currently loading". -/******/ if(installedChunkData) { -/******/ promises.push(installedChunkData[2]); -/******/ } else { -/******/ // setup Promise in chunk cache -/******/ var promise = new Promise(function(resolve, reject) { -/******/ installedChunkData = installedChunks[chunkId] = [resolve, reject]; -/******/ }); -/******/ promises.push(installedChunkData[2] = promise); -/******/ -/******/ // start chunk loading -/******/ var script = document.createElement('script'); -/******/ var onScriptComplete; -/******/ -/******/ script.charset = 'utf-8'; -/******/ script.timeout = 120; -/******/ if (__webpack_require__.nc) { -/******/ script.setAttribute("nonce", __webpack_require__.nc); -/******/ } -/******/ script.src = jsonpScriptSrc(chunkId); -/******/ -/******/ // create error before stack unwound to get useful stacktrace later -/******/ var error = new Error(); -/******/ onScriptComplete = function (event) { -/******/ // avoid mem leaks in IE. -/******/ script.onerror = script.onload = null; -/******/ clearTimeout(timeout); -/******/ var chunk = installedChunks[chunkId]; -/******/ if(chunk !== 0) { -/******/ if(chunk) { -/******/ var errorType = event && (event.type === 'load' ? 'missing' : event.type); -/******/ var realSrc = event && event.target && event.target.src; -/******/ error.message = 'Loading chunk ' + chunkId + ' failed.\n(' + errorType + ': ' + realSrc + ')'; -/******/ error.name = 'ChunkLoadError'; -/******/ error.type = errorType; -/******/ error.request = realSrc; -/******/ chunk[1](error); -/******/ } -/******/ installedChunks[chunkId] = undefined; -/******/ } -/******/ }; -/******/ var timeout = setTimeout(function(){ -/******/ onScriptComplete({ type: 'timeout', target: script }); -/******/ }, 120000); -/******/ script.onerror = script.onload = onScriptComplete; -/******/ document.head.appendChild(script); -/******/ } -/******/ } -/******/ return Promise.all(promises); -/******/ }; -/******/ -/******/ // expose the modules object (__webpack_modules__) -/******/ __webpack_require__.m = modules; -/******/ -/******/ // expose the module cache -/******/ __webpack_require__.c = installedModules; -/******/ -/******/ // define getter function for harmony exports -/******/ __webpack_require__.d = function(exports, name, getter) { -/******/ if(!__webpack_require__.o(exports, name)) { -/******/ Object.defineProperty(exports, name, { enumerable: true, get: getter }); -/******/ } -/******/ }; -/******/ -/******/ // define __esModule on exports -/******/ __webpack_require__.r = function(exports) { -/******/ if(typeof Symbol !== 'undefined' && Symbol.toStringTag) { -/******/ Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' }); -/******/ } -/******/ Object.defineProperty(exports, '__esModule', { value: true }); -/******/ }; -/******/ -/******/ // create a fake namespace object -/******/ // mode & 1: value is a module id, require it -/******/ // mode & 2: merge all properties of value into the ns -/******/ // mode & 4: return value when already ns object -/******/ // mode & 8|1: behave like require -/******/ __webpack_require__.t = function(value, mode) { -/******/ if(mode & 1) value = __webpack_require__(value); -/******/ if(mode & 8) return value; -/******/ if((mode & 4) && typeof value === 'object' && value && value.__esModule) return value; -/******/ var ns = Object.create(null); -/******/ __webpack_require__.r(ns); -/******/ Object.defineProperty(ns, 'default', { enumerable: true, value: value }); -/******/ if(mode & 2 && typeof value != 'string') for(var key in value) __webpack_require__.d(ns, key, function(key) { return value[key]; }.bind(null, key)); -/******/ return ns; -/******/ }; -/******/ -/******/ // getDefaultExport function for compatibility with non-harmony modules -/******/ __webpack_require__.n = function(module) { -/******/ var getter = module && module.__esModule ? -/******/ function getDefault() { return module['default']; } : -/******/ function getModuleExports() { return module; }; -/******/ __webpack_require__.d(getter, 'a', getter); -/******/ return getter; -/******/ }; -/******/ -/******/ // Object.prototype.hasOwnProperty.call -/******/ __webpack_require__.o = function(object, property) { return Object.prototype.hasOwnProperty.call(object, property); }; -/******/ -/******/ // __webpack_public_path__ -/******/ __webpack_require__.p = ""; -/******/ -/******/ // on error function for async loading -/******/ __webpack_require__.oe = function(err) { console.error(err); throw err; }; -/******/ -/******/ var jsonpArray = window["webpackJsonp"] = window["webpackJsonp"] || []; -/******/ var oldJsonpFunction = jsonpArray.push.bind(jsonpArray); -/******/ jsonpArray.push = webpackJsonpCallback; -/******/ jsonpArray = jsonpArray.slice(); -/******/ for(var i = 0; i < jsonpArray.length; i++) webpackJsonpCallback(jsonpArray[i]); -/******/ var parentJsonpFunction = oldJsonpFunction; -/******/ -/******/ -/******/ // Load entry module and return exports -/******/ return __webpack_require__(__webpack_require__.s = 0); -/******/ }) -/************************************************************************/ -/******/ ([ -/* 0 */ -/***/ (function(module, __webpack_exports__, __webpack_require__) { - -"use strict"; -__webpack_require__.r(__webpack_exports__); -/* harmony import */ var _main_css__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(1); -/* harmony import */ var _main_css__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(_main_css__WEBPACK_IMPORTED_MODULE_0__); -/* harmony import */ var _both_async_css__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(2); -/* harmony import */ var _both_async_css__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(_both_async_css__WEBPACK_IMPORTED_MODULE_1__); - - - -__webpack_require__.e(/* import() */ 1).then(__webpack_require__.bind(null, 3)); - -__webpack_require__.e(/* import() */ 2).then(__webpack_require__.t.bind(null, 7, 7)); - -// console.log('index.js'); - - -/***/ }), -/* 1 */ -/***/ (function(module, exports, __webpack_require__) { - -exports = module.exports = __webpack_require__(8)(false); -// Imports -exports.i(__webpack_require__(9), ""); -// Module -exports.push([module.i, "body {\n background: red;\n}\n", ""]); - - -/***/ }), -/* 2 */ -/***/ (function(module, exports, __webpack_require__) { - -exports = module.exports = __webpack_require__(8)(false); -// Imports -exports.i(__webpack_require__(9), ""); -// Module -exports.push([module.i, ".both-async {\n color: red;\n}\n", ""]); - - -/***/ }) -/******/ ]); \ No newline at end of file diff --git a/test/cases/disable-extract-bool/in-async.css b/test/cases/disable-extract-bool/in-async.css deleted file mode 100644 index 922b9d89..00000000 --- a/test/cases/disable-extract-bool/in-async.css +++ /dev/null @@ -1,5 +0,0 @@ -@import './async-import.css'; - -.in-async { - background: green; -} diff --git a/test/cases/disable-extract-bool/in-async.js b/test/cases/disable-extract-bool/in-async.js deleted file mode 100644 index 33611214..00000000 --- a/test/cases/disable-extract-bool/in-async.js +++ /dev/null @@ -1 +0,0 @@ -// console.log('in-async.js'); diff --git a/test/cases/disable-extract-bool/in-async2.css b/test/cases/disable-extract-bool/in-async2.css deleted file mode 100644 index 28781c21..00000000 --- a/test/cases/disable-extract-bool/in-async2.css +++ /dev/null @@ -1,5 +0,0 @@ -@import './async-import.css'; - -.in-async-2 { - background: green; -} diff --git a/test/cases/disable-extract-bool/index.js b/test/cases/disable-extract-bool/index.js deleted file mode 100644 index 13a5bbe1..00000000 --- a/test/cases/disable-extract-bool/index.js +++ /dev/null @@ -1,8 +0,0 @@ -import './main.css'; -import './both-async.css'; - -import('./async'); - -import('./async.css'); - -// console.log('index.js'); diff --git a/test/cases/disable-extract-bool/main.css b/test/cases/disable-extract-bool/main.css deleted file mode 100644 index 584e42d4..00000000 --- a/test/cases/disable-extract-bool/main.css +++ /dev/null @@ -1,5 +0,0 @@ -@import 'shared.css'; - -body { - background: red; -} diff --git a/test/cases/disable-extract-bool/shared.css b/test/cases/disable-extract-bool/shared.css deleted file mode 100644 index 0a1ca625..00000000 --- a/test/cases/disable-extract-bool/shared.css +++ /dev/null @@ -1,3 +0,0 @@ -.shared { - background: pink; -} diff --git a/test/cases/disable-extract-bool/webpack.config.js b/test/cases/disable-extract-bool/webpack.config.js deleted file mode 100644 index 3588e4a0..00000000 --- a/test/cases/disable-extract-bool/webpack.config.js +++ /dev/null @@ -1,19 +0,0 @@ -import Self from '../../../src'; - -module.exports = { - entry: './index.js', - module: { - rules: [ - { - test: /\.css$/, - use: [Self.loader, 'css-loader'], - }, - ], - }, - plugins: [ - new Self({ - filename: '[name].css', - disableExtract: true, - }), - ], -}; From 1da949eab91a749737ed4542a2a290a887e2d6de Mon Sep 17 00:00:00 2001 From: Light Leung Date: Wed, 24 Jul 2019 22:51:45 +0800 Subject: [PATCH 14/23] feat: ability to disable extract modules, less code difference --- src/loader.js | 221 +++++++++++++++++++++++++------------------------- 1 file changed, 111 insertions(+), 110 deletions(-) diff --git a/src/loader.js b/src/loader.js index 147c7abb..c10b5419 100644 --- a/src/loader.js +++ b/src/loader.js @@ -69,133 +69,134 @@ export function pitch(request) { if (this[`${MODULE_TYPE}/disableExtract`]()) { callback(); - } else { - const childFilename = '*'; // eslint-disable-line no-path-concat - const publicPath = - typeof options.publicPath === 'string' - ? options.publicPath === '' || options.publicPath.endsWith('/') - ? options.publicPath - : `${options.publicPath}/` - : typeof options.publicPath === 'function' - ? options.publicPath(this.resourcePath, this.rootContext) - : this._compilation.outputOptions.publicPath; - const outputOptions = { - filename: childFilename, - publicPath, - }; - const childCompiler = this._compilation.createChildCompiler( - `${pluginName} ${request}`, - outputOptions - ); - - new NodeTemplatePlugin(outputOptions).apply(childCompiler); - new LibraryTemplatePlugin(null, 'commonjs2').apply(childCompiler); - new NodeTargetPlugin().apply(childCompiler); - new SingleEntryPlugin(this.context, `!!${request}`, pluginName).apply( - childCompiler - ); - new LimitChunkCountPlugin({ maxChunks: 1 }).apply(childCompiler); - - // We set loaderContext[MODULE_TYPE] = false to indicate we already in - // a child compiler so we don't spawn another child compilers from there. - childCompiler.hooks.thisCompilation.tap( - `${pluginName} loader`, - (compilation) => { - compilation.hooks.normalModuleLoader.tap( - `${pluginName} loader`, - (loaderContext, module) => { + return; + } + + const childFilename = '*'; // eslint-disable-line no-path-concat + const publicPath = + typeof options.publicPath === 'string' + ? options.publicPath === '' || options.publicPath.endsWith('/') + ? options.publicPath + : `${options.publicPath}/` + : typeof options.publicPath === 'function' + ? options.publicPath(this.resourcePath, this.rootContext) + : this._compilation.outputOptions.publicPath; + const outputOptions = { + filename: childFilename, + publicPath, + }; + const childCompiler = this._compilation.createChildCompiler( + `${pluginName} ${request}`, + outputOptions + ); + + new NodeTemplatePlugin(outputOptions).apply(childCompiler); + new LibraryTemplatePlugin(null, 'commonjs2').apply(childCompiler); + new NodeTargetPlugin().apply(childCompiler); + new SingleEntryPlugin(this.context, `!!${request}`, pluginName).apply( + childCompiler + ); + new LimitChunkCountPlugin({ maxChunks: 1 }).apply(childCompiler); + + // We set loaderContext[MODULE_TYPE] = false to indicate we already in + // a child compiler so we don't spawn another child compilers from there. + childCompiler.hooks.thisCompilation.tap( + `${pluginName} loader`, + (compilation) => { + compilation.hooks.normalModuleLoader.tap( + `${pluginName} loader`, + (loaderContext, module) => { + // eslint-disable-next-line no-param-reassign + loaderContext.emitFile = this.emitFile; + loaderContext[MODULE_TYPE] = false; // eslint-disable-line no-param-reassign + + if (module.request === request) { // eslint-disable-next-line no-param-reassign - loaderContext.emitFile = this.emitFile; - loaderContext[MODULE_TYPE] = false; // eslint-disable-line no-param-reassign - - if (module.request === request) { - // eslint-disable-next-line no-param-reassign - module.loaders = loaders.map((loader) => { - return { - loader: loader.path, - options: loader.options, - ident: loader.ident, - }; - }); - } + module.loaders = loaders.map((loader) => { + return { + loader: loader.path, + options: loader.options, + ident: loader.ident, + }; + }); } - ); - } - ); + } + ); + } + ); - let source; + let source; - childCompiler.hooks.afterCompile.tap(pluginName, (compilation) => { - source = - compilation.assets[childFilename] && - compilation.assets[childFilename].source(); + childCompiler.hooks.afterCompile.tap(pluginName, (compilation) => { + source = + compilation.assets[childFilename] && + compilation.assets[childFilename].source(); - // Remove all chunk assets - compilation.chunks.forEach((chunk) => { - chunk.files.forEach((file) => { - delete compilation.assets[file]; // eslint-disable-line no-param-reassign - }); + // Remove all chunk assets + compilation.chunks.forEach((chunk) => { + chunk.files.forEach((file) => { + delete compilation.assets[file]; // eslint-disable-line no-param-reassign }); }); + }); - childCompiler.runAsChild((err, entries, compilation) => { - if (err) { - return callback(err); - } + childCompiler.runAsChild((err, entries, compilation) => { + if (err) { + return callback(err); + } - if (compilation.errors.length > 0) { - return callback(compilation.errors[0]); - } + if (compilation.errors.length > 0) { + return callback(compilation.errors[0]); + } - compilation.fileDependencies.forEach((dep) => { - this.addDependency(dep); - }, this); + compilation.fileDependencies.forEach((dep) => { + this.addDependency(dep); + }, this); - compilation.contextDependencies.forEach((dep) => { - this.addContextDependency(dep); - }, this); + compilation.contextDependencies.forEach((dep) => { + this.addContextDependency(dep); + }, this); - if (!source) { - return callback(new Error("Didn't get a result from child compiler")); - } + if (!source) { + return callback(new Error("Didn't get a result from child compiler")); + } - let text; - let locals; - - try { - text = exec(this, source, request); - locals = text && text.locals; - if (!Array.isArray(text)) { - text = [[null, text]]; - } else { - text = text.map((line) => { - const module = findModuleById(compilation.modules, line[0]); - - return { - identifier: module.identifier(), - content: line[1], - media: line[2], - sourceMap: line[3], - }; - }); - } - this[MODULE_TYPE](text); - } catch (e) { - return callback(e); + let text; + let locals; + + try { + text = exec(this, source, request); + locals = text && text.locals; + if (!Array.isArray(text)) { + text = [[null, text]]; + } else { + text = text.map((line) => { + const module = findModuleById(compilation.modules, line[0]); + + return { + identifier: module.identifier(), + content: line[1], + media: line[2], + sourceMap: line[3], + }; + }); } + this[MODULE_TYPE](text); + } catch (e) { + return callback(e); + } - let resultSource = `// extracted by ${pluginName}`; - const result = locals - ? `\nmodule.exports = ${JSON.stringify(locals)};` - : ''; + let resultSource = `// extracted by ${pluginName}`; + const result = locals + ? `\nmodule.exports = ${JSON.stringify(locals)};` + : ''; - resultSource += options.hmr - ? hotLoader(result, { context: this.context, options, locals }) - : result; + resultSource += options.hmr + ? hotLoader(result, { context: this.context, options, locals }) + : result; - return callback(null, resultSource); - }); - } + return callback(null, resultSource); + }); } export default function(source) { From e59a0e1f3ea94c26e66350e6d922d40882cf4c71 Mon Sep 17 00:00:00 2001 From: Light Leung Date: Wed, 24 Jul 2019 22:51:45 +0800 Subject: [PATCH 15/23] feat: ability to disable extract modules, less code difference --- README.md | 10 +-- src/loader.js | 221 +++++++++++++++++++++++++------------------------- 2 files changed, 112 insertions(+), 119 deletions(-) diff --git a/README.md b/README.md index 78bca0a9..87415504 100644 --- a/README.md +++ b/README.md @@ -345,15 +345,7 @@ module.exports = { #### Disable Extracting Specified CSS from Chunks -You may disable extracting css from all chunks with `disableExtract` option. - -```javascript -const miniCssExtractPlugin = new MiniCssExtractPlugin({ - disableExtract: true, -}); -``` - -You may also disable extracting css modules programmatically by passing a function. +You may disable extracting css modules programmatically by passing a function. ```javascript const miniCssExtractPlugin = new MiniCssExtractPlugin({ diff --git a/src/loader.js b/src/loader.js index 147c7abb..c10b5419 100644 --- a/src/loader.js +++ b/src/loader.js @@ -69,133 +69,134 @@ export function pitch(request) { if (this[`${MODULE_TYPE}/disableExtract`]()) { callback(); - } else { - const childFilename = '*'; // eslint-disable-line no-path-concat - const publicPath = - typeof options.publicPath === 'string' - ? options.publicPath === '' || options.publicPath.endsWith('/') - ? options.publicPath - : `${options.publicPath}/` - : typeof options.publicPath === 'function' - ? options.publicPath(this.resourcePath, this.rootContext) - : this._compilation.outputOptions.publicPath; - const outputOptions = { - filename: childFilename, - publicPath, - }; - const childCompiler = this._compilation.createChildCompiler( - `${pluginName} ${request}`, - outputOptions - ); - - new NodeTemplatePlugin(outputOptions).apply(childCompiler); - new LibraryTemplatePlugin(null, 'commonjs2').apply(childCompiler); - new NodeTargetPlugin().apply(childCompiler); - new SingleEntryPlugin(this.context, `!!${request}`, pluginName).apply( - childCompiler - ); - new LimitChunkCountPlugin({ maxChunks: 1 }).apply(childCompiler); - - // We set loaderContext[MODULE_TYPE] = false to indicate we already in - // a child compiler so we don't spawn another child compilers from there. - childCompiler.hooks.thisCompilation.tap( - `${pluginName} loader`, - (compilation) => { - compilation.hooks.normalModuleLoader.tap( - `${pluginName} loader`, - (loaderContext, module) => { + return; + } + + const childFilename = '*'; // eslint-disable-line no-path-concat + const publicPath = + typeof options.publicPath === 'string' + ? options.publicPath === '' || options.publicPath.endsWith('/') + ? options.publicPath + : `${options.publicPath}/` + : typeof options.publicPath === 'function' + ? options.publicPath(this.resourcePath, this.rootContext) + : this._compilation.outputOptions.publicPath; + const outputOptions = { + filename: childFilename, + publicPath, + }; + const childCompiler = this._compilation.createChildCompiler( + `${pluginName} ${request}`, + outputOptions + ); + + new NodeTemplatePlugin(outputOptions).apply(childCompiler); + new LibraryTemplatePlugin(null, 'commonjs2').apply(childCompiler); + new NodeTargetPlugin().apply(childCompiler); + new SingleEntryPlugin(this.context, `!!${request}`, pluginName).apply( + childCompiler + ); + new LimitChunkCountPlugin({ maxChunks: 1 }).apply(childCompiler); + + // We set loaderContext[MODULE_TYPE] = false to indicate we already in + // a child compiler so we don't spawn another child compilers from there. + childCompiler.hooks.thisCompilation.tap( + `${pluginName} loader`, + (compilation) => { + compilation.hooks.normalModuleLoader.tap( + `${pluginName} loader`, + (loaderContext, module) => { + // eslint-disable-next-line no-param-reassign + loaderContext.emitFile = this.emitFile; + loaderContext[MODULE_TYPE] = false; // eslint-disable-line no-param-reassign + + if (module.request === request) { // eslint-disable-next-line no-param-reassign - loaderContext.emitFile = this.emitFile; - loaderContext[MODULE_TYPE] = false; // eslint-disable-line no-param-reassign - - if (module.request === request) { - // eslint-disable-next-line no-param-reassign - module.loaders = loaders.map((loader) => { - return { - loader: loader.path, - options: loader.options, - ident: loader.ident, - }; - }); - } + module.loaders = loaders.map((loader) => { + return { + loader: loader.path, + options: loader.options, + ident: loader.ident, + }; + }); } - ); - } - ); + } + ); + } + ); - let source; + let source; - childCompiler.hooks.afterCompile.tap(pluginName, (compilation) => { - source = - compilation.assets[childFilename] && - compilation.assets[childFilename].source(); + childCompiler.hooks.afterCompile.tap(pluginName, (compilation) => { + source = + compilation.assets[childFilename] && + compilation.assets[childFilename].source(); - // Remove all chunk assets - compilation.chunks.forEach((chunk) => { - chunk.files.forEach((file) => { - delete compilation.assets[file]; // eslint-disable-line no-param-reassign - }); + // Remove all chunk assets + compilation.chunks.forEach((chunk) => { + chunk.files.forEach((file) => { + delete compilation.assets[file]; // eslint-disable-line no-param-reassign }); }); + }); - childCompiler.runAsChild((err, entries, compilation) => { - if (err) { - return callback(err); - } + childCompiler.runAsChild((err, entries, compilation) => { + if (err) { + return callback(err); + } - if (compilation.errors.length > 0) { - return callback(compilation.errors[0]); - } + if (compilation.errors.length > 0) { + return callback(compilation.errors[0]); + } - compilation.fileDependencies.forEach((dep) => { - this.addDependency(dep); - }, this); + compilation.fileDependencies.forEach((dep) => { + this.addDependency(dep); + }, this); - compilation.contextDependencies.forEach((dep) => { - this.addContextDependency(dep); - }, this); + compilation.contextDependencies.forEach((dep) => { + this.addContextDependency(dep); + }, this); - if (!source) { - return callback(new Error("Didn't get a result from child compiler")); - } + if (!source) { + return callback(new Error("Didn't get a result from child compiler")); + } - let text; - let locals; - - try { - text = exec(this, source, request); - locals = text && text.locals; - if (!Array.isArray(text)) { - text = [[null, text]]; - } else { - text = text.map((line) => { - const module = findModuleById(compilation.modules, line[0]); - - return { - identifier: module.identifier(), - content: line[1], - media: line[2], - sourceMap: line[3], - }; - }); - } - this[MODULE_TYPE](text); - } catch (e) { - return callback(e); + let text; + let locals; + + try { + text = exec(this, source, request); + locals = text && text.locals; + if (!Array.isArray(text)) { + text = [[null, text]]; + } else { + text = text.map((line) => { + const module = findModuleById(compilation.modules, line[0]); + + return { + identifier: module.identifier(), + content: line[1], + media: line[2], + sourceMap: line[3], + }; + }); } + this[MODULE_TYPE](text); + } catch (e) { + return callback(e); + } - let resultSource = `// extracted by ${pluginName}`; - const result = locals - ? `\nmodule.exports = ${JSON.stringify(locals)};` - : ''; + let resultSource = `// extracted by ${pluginName}`; + const result = locals + ? `\nmodule.exports = ${JSON.stringify(locals)};` + : ''; - resultSource += options.hmr - ? hotLoader(result, { context: this.context, options, locals }) - : result; + resultSource += options.hmr + ? hotLoader(result, { context: this.context, options, locals }) + : result; - return callback(null, resultSource); - }); - } + return callback(null, resultSource); + }); } export default function(source) { From 6001569d51ff504c6a259804b4d83abfe8dfc175 Mon Sep 17 00:00:00 2001 From: Light Leung Date: Fri, 26 Jul 2019 08:39:21 +0800 Subject: [PATCH 16/23] feat: ability to disable extract modules, less regressions --- src/loader.js | 7 +- .../async-import.css | 3 - .../disable-extract-func-async/async.css | 3 - .../cases/disable-extract-func-async/async.js | 9 - .../disable-extract-func-async/async2.js | 4 - .../disable-extract-func-async/both-async.css | 5 - .../both-page-async-disabled.css | 3 - .../both-page-async.css | 3 - .../disable-extract-func-async/expected/2.js | 82 ------ .../disable-extract-func-async/expected/3.js | 40 --- .../disable-extract-func-async/expected/4.js | 13 - .../expected/index1.css | 12 - .../expected/index1.js | 235 ------------------ .../expected/index2.js | 214 ---------------- .../disable-extract-func-async/in-async.css | 5 - .../disable-extract-func-async/in-async.js | 1 - .../disable-extract-func-async/in-async2.css | 5 - .../cases/disable-extract-func-async/index.js | 8 - .../disable-extract-func-async/index2.js | 3 - .../cases/disable-extract-func-async/main.css | 5 - .../disable-extract-func-async/shared.css | 3 - .../webpack.config.js | 24 -- test/cases/disable-extract-func/async2.js | 1 + test/cases/disable-extract-func/index2.js | 2 + test/cases/disable-extract-func/is-async1.css | 3 + test/cases/disable-extract-func/is-async2.css | 3 + .../disable-extract-func/webpack.config.js | 5 +- 27 files changed, 15 insertions(+), 686 deletions(-) delete mode 100644 test/cases/disable-extract-func-async/async-import.css delete mode 100644 test/cases/disable-extract-func-async/async.css delete mode 100644 test/cases/disable-extract-func-async/async.js delete mode 100644 test/cases/disable-extract-func-async/async2.js delete mode 100644 test/cases/disable-extract-func-async/both-async.css delete mode 100644 test/cases/disable-extract-func-async/both-page-async-disabled.css delete mode 100644 test/cases/disable-extract-func-async/both-page-async.css delete mode 100644 test/cases/disable-extract-func-async/expected/2.js delete mode 100644 test/cases/disable-extract-func-async/expected/3.js delete mode 100644 test/cases/disable-extract-func-async/expected/4.js delete mode 100644 test/cases/disable-extract-func-async/expected/index1.css delete mode 100644 test/cases/disable-extract-func-async/expected/index1.js delete mode 100644 test/cases/disable-extract-func-async/expected/index2.js delete mode 100644 test/cases/disable-extract-func-async/in-async.css delete mode 100644 test/cases/disable-extract-func-async/in-async.js delete mode 100644 test/cases/disable-extract-func-async/in-async2.css delete mode 100644 test/cases/disable-extract-func-async/index.js delete mode 100644 test/cases/disable-extract-func-async/index2.js delete mode 100644 test/cases/disable-extract-func-async/main.css delete mode 100644 test/cases/disable-extract-func-async/shared.css delete mode 100644 test/cases/disable-extract-func-async/webpack.config.js create mode 100644 test/cases/disable-extract-func/is-async1.css create mode 100644 test/cases/disable-extract-func/is-async2.css diff --git a/src/loader.js b/src/loader.js index c10b5419..e75618e1 100644 --- a/src/loader.js +++ b/src/loader.js @@ -61,14 +61,11 @@ export function pitch(request) { validateOptions(schema, options, 'Mini CSS Extract Plugin Loader'); - this.addDependency(this.resourcePath); - const loaders = this.loaders.slice(this.loaderIndex + 1); - const callback = this.async(); + this.addDependency(this.resourcePath); if (this[`${MODULE_TYPE}/disableExtract`]()) { - callback(); return; } @@ -140,6 +137,8 @@ export function pitch(request) { }); }); + const callback = this.async(); + childCompiler.runAsChild((err, entries, compilation) => { if (err) { return callback(err); diff --git a/test/cases/disable-extract-func-async/async-import.css b/test/cases/disable-extract-func-async/async-import.css deleted file mode 100644 index 107a6a79..00000000 --- a/test/cases/disable-extract-func-async/async-import.css +++ /dev/null @@ -1,3 +0,0 @@ -.async-import { - background: black; -} diff --git a/test/cases/disable-extract-func-async/async.css b/test/cases/disable-extract-func-async/async.css deleted file mode 100644 index 65bdcfa7..00000000 --- a/test/cases/disable-extract-func-async/async.css +++ /dev/null @@ -1,3 +0,0 @@ -.async { - background: blue; -} diff --git a/test/cases/disable-extract-func-async/async.js b/test/cases/disable-extract-func-async/async.js deleted file mode 100644 index 9da9a541..00000000 --- a/test/cases/disable-extract-func-async/async.js +++ /dev/null @@ -1,9 +0,0 @@ -import './in-async'; -import './in-async2.css'; -import './in-async.css'; -import './both-async.css'; - -import './both-page-async-disabled.css'; -import './both-page-async.css'; - -// console.log('async.js'); diff --git a/test/cases/disable-extract-func-async/async2.js b/test/cases/disable-extract-func-async/async2.js deleted file mode 100644 index 205be95b..00000000 --- a/test/cases/disable-extract-func-async/async2.js +++ /dev/null @@ -1,4 +0,0 @@ -import './both-page-async-disabled.css'; -import './both-page-async.css'; - -// console.log('async2.js'); diff --git a/test/cases/disable-extract-func-async/both-async.css b/test/cases/disable-extract-func-async/both-async.css deleted file mode 100644 index 8a2b22cc..00000000 --- a/test/cases/disable-extract-func-async/both-async.css +++ /dev/null @@ -1,5 +0,0 @@ -@import 'shared.css'; - -.both-async { - color: red; -} diff --git a/test/cases/disable-extract-func-async/both-page-async-disabled.css b/test/cases/disable-extract-func-async/both-page-async-disabled.css deleted file mode 100644 index c4e99243..00000000 --- a/test/cases/disable-extract-func-async/both-page-async-disabled.css +++ /dev/null @@ -1,3 +0,0 @@ -.both-page-async-disabled { - color: yellow; -} diff --git a/test/cases/disable-extract-func-async/both-page-async.css b/test/cases/disable-extract-func-async/both-page-async.css deleted file mode 100644 index b3336101..00000000 --- a/test/cases/disable-extract-func-async/both-page-async.css +++ /dev/null @@ -1,3 +0,0 @@ -.both-page-async { - color: cyan; -} diff --git a/test/cases/disable-extract-func-async/expected/2.js b/test/cases/disable-extract-func-async/expected/2.js deleted file mode 100644 index 906518cd..00000000 --- a/test/cases/disable-extract-func-async/expected/2.js +++ /dev/null @@ -1,82 +0,0 @@ -(window["webpackJsonp"] = window["webpackJsonp"] || []).push([[2],[ -/* 0 */, -/* 1 */, -/* 2 */, -/* 3 */, -/* 4 */ -/***/ (function(module, __webpack_exports__, __webpack_require__) { - -"use strict"; -__webpack_require__.r(__webpack_exports__); -/* harmony import */ var _in_async__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(5); -/* harmony import */ var _in_async__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(_in_async__WEBPACK_IMPORTED_MODULE_0__); -/* harmony import */ var _in_async2_css__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(6); -/* harmony import */ var _in_async2_css__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(_in_async2_css__WEBPACK_IMPORTED_MODULE_1__); -/* harmony import */ var _in_async_css__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(7); -/* harmony import */ var _in_async_css__WEBPACK_IMPORTED_MODULE_2___default = /*#__PURE__*/__webpack_require__.n(_in_async_css__WEBPACK_IMPORTED_MODULE_2__); -/* harmony import */ var _both_async_css__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(2); -/* harmony import */ var _both_async_css__WEBPACK_IMPORTED_MODULE_3___default = /*#__PURE__*/__webpack_require__.n(_both_async_css__WEBPACK_IMPORTED_MODULE_3__); -/* harmony import */ var _both_page_async_disabled_css__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(8); -/* harmony import */ var _both_page_async_disabled_css__WEBPACK_IMPORTED_MODULE_4___default = /*#__PURE__*/__webpack_require__.n(_both_page_async_disabled_css__WEBPACK_IMPORTED_MODULE_4__); -/* harmony import */ var _both_page_async_css__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(9); -/* harmony import */ var _both_page_async_css__WEBPACK_IMPORTED_MODULE_5___default = /*#__PURE__*/__webpack_require__.n(_both_page_async_css__WEBPACK_IMPORTED_MODULE_5__); - - - - - - - - -// console.log('async.js'); - - -/***/ }), -/* 5 */ -/***/ (function(module, exports) { - -// console.log('in-async.js'); - - -/***/ }), -/* 6 */ -/***/ (function(module, exports, __webpack_require__) { - -exports = module.exports = __webpack_require__(12)(false); -// Imports -exports.i(__webpack_require__(13), ""); -// Module -exports.push([module.i, ".in-async-2 {\n background: green;\n}\n", ""]); - - -/***/ }), -/* 7 */ -/***/ (function(module, exports, __webpack_require__) { - -exports = module.exports = __webpack_require__(12)(false); -// Imports -exports.i(__webpack_require__(13), ""); -// Module -exports.push([module.i, ".in-async {\n background: green;\n}\n", ""]); - - -/***/ }), -/* 8 */ -/***/ (function(module, exports, __webpack_require__) { - -exports = module.exports = __webpack_require__(12)(false); -// Module -exports.push([module.i, ".both-page-async-disabled {\n color: yellow;\n}\n", ""]); - - -/***/ }), -/* 9 */ -/***/ (function(module, exports, __webpack_require__) { - -exports = module.exports = __webpack_require__(12)(false); -// Module -exports.push([module.i, ".both-page-async {\n color: cyan;\n}\n", ""]); - - -/***/ }) -]]); \ No newline at end of file diff --git a/test/cases/disable-extract-func-async/expected/3.js b/test/cases/disable-extract-func-async/expected/3.js deleted file mode 100644 index 65b7676c..00000000 --- a/test/cases/disable-extract-func-async/expected/3.js +++ /dev/null @@ -1,40 +0,0 @@ -(window["webpackJsonp"] = window["webpackJsonp"] || []).push([[3],{ - -/***/ 11: -/***/ (function(module, __webpack_exports__, __webpack_require__) { - -"use strict"; -__webpack_require__.r(__webpack_exports__); -/* harmony import */ var _both_page_async_disabled_css__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(8); -/* harmony import */ var _both_page_async_disabled_css__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(_both_page_async_disabled_css__WEBPACK_IMPORTED_MODULE_0__); -/* harmony import */ var _both_page_async_css__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(9); -/* harmony import */ var _both_page_async_css__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(_both_page_async_css__WEBPACK_IMPORTED_MODULE_1__); - - - -// console.log('async2.js'); - - -/***/ }), - -/***/ 8: -/***/ (function(module, exports, __webpack_require__) { - -exports = module.exports = __webpack_require__(12)(false); -// Module -exports.push([module.i, ".both-page-async-disabled {\n color: yellow;\n}\n", ""]); - - -/***/ }), - -/***/ 9: -/***/ (function(module, exports, __webpack_require__) { - -exports = module.exports = __webpack_require__(12)(false); -// Module -exports.push([module.i, ".both-page-async {\n color: cyan;\n}\n", ""]); - - -/***/ }) - -}]); \ No newline at end of file diff --git a/test/cases/disable-extract-func-async/expected/4.js b/test/cases/disable-extract-func-async/expected/4.js deleted file mode 100644 index 6b7b147a..00000000 --- a/test/cases/disable-extract-func-async/expected/4.js +++ /dev/null @@ -1,13 +0,0 @@ -(window["webpackJsonp"] = window["webpackJsonp"] || []).push([[4],{ - -/***/ 10: -/***/ (function(module, exports, __webpack_require__) { - -exports = module.exports = __webpack_require__(12)(false); -// Module -exports.push([module.i, ".async {\n background: blue;\n}\n", ""]); - - -/***/ }) - -}]); \ No newline at end of file diff --git a/test/cases/disable-extract-func-async/expected/index1.css b/test/cases/disable-extract-func-async/expected/index1.css deleted file mode 100644 index c7bfe98b..00000000 --- a/test/cases/disable-extract-func-async/expected/index1.css +++ /dev/null @@ -1,12 +0,0 @@ -.shared { - background: pink; -} - -body { - background: red; -} - -.both-async { - color: red; -} - diff --git a/test/cases/disable-extract-func-async/expected/index1.js b/test/cases/disable-extract-func-async/expected/index1.js deleted file mode 100644 index 0d094964..00000000 --- a/test/cases/disable-extract-func-async/expected/index1.js +++ /dev/null @@ -1,235 +0,0 @@ -/******/ (function(modules) { // webpackBootstrap -/******/ // install a JSONP callback for chunk loading -/******/ function webpackJsonpCallback(data) { -/******/ var chunkIds = data[0]; -/******/ var moreModules = data[1]; -/******/ -/******/ -/******/ // add "moreModules" to the modules object, -/******/ // then flag all "chunkIds" as loaded and fire callback -/******/ var moduleId, chunkId, i = 0, resolves = []; -/******/ for(;i < chunkIds.length; i++) { -/******/ chunkId = chunkIds[i]; -/******/ if(installedChunks[chunkId]) { -/******/ resolves.push(installedChunks[chunkId][0]); -/******/ } -/******/ installedChunks[chunkId] = 0; -/******/ } -/******/ for(moduleId in moreModules) { -/******/ if(Object.prototype.hasOwnProperty.call(moreModules, moduleId)) { -/******/ modules[moduleId] = moreModules[moduleId]; -/******/ } -/******/ } -/******/ if(parentJsonpFunction) parentJsonpFunction(data); -/******/ -/******/ while(resolves.length) { -/******/ resolves.shift()(); -/******/ } -/******/ -/******/ }; -/******/ -/******/ -/******/ // The module cache -/******/ var installedModules = {}; -/******/ -/******/ // object to store loaded and loading chunks -/******/ // undefined = chunk not loaded, null = chunk preloaded/prefetched -/******/ // Promise = chunk loading, 0 = chunk loaded -/******/ var installedChunks = { -/******/ 0: 0 -/******/ }; -/******/ -/******/ -/******/ -/******/ // script path function -/******/ function jsonpScriptSrc(chunkId) { -/******/ return __webpack_require__.p + "" + ({}[chunkId]||chunkId) + ".js" -/******/ } -/******/ -/******/ // The require function -/******/ function __webpack_require__(moduleId) { -/******/ -/******/ // Check if module is in cache -/******/ if(installedModules[moduleId]) { -/******/ return installedModules[moduleId].exports; -/******/ } -/******/ // Create a new module (and put it into the cache) -/******/ var module = installedModules[moduleId] = { -/******/ i: moduleId, -/******/ l: false, -/******/ exports: {} -/******/ }; -/******/ -/******/ // Execute the module function -/******/ modules[moduleId].call(module.exports, module, module.exports, __webpack_require__); -/******/ -/******/ // Flag the module as loaded -/******/ module.l = true; -/******/ -/******/ // Return the exports of the module -/******/ return module.exports; -/******/ } -/******/ -/******/ // This file contains only the entry chunk. -/******/ // The chunk loading function for additional chunks -/******/ __webpack_require__.e = function requireEnsure(chunkId) { -/******/ var promises = []; -/******/ -/******/ -/******/ // JSONP chunk loading for javascript -/******/ -/******/ var installedChunkData = installedChunks[chunkId]; -/******/ if(installedChunkData !== 0) { // 0 means "already installed". -/******/ -/******/ // a Promise means "currently loading". -/******/ if(installedChunkData) { -/******/ promises.push(installedChunkData[2]); -/******/ } else { -/******/ // setup Promise in chunk cache -/******/ var promise = new Promise(function(resolve, reject) { -/******/ installedChunkData = installedChunks[chunkId] = [resolve, reject]; -/******/ }); -/******/ promises.push(installedChunkData[2] = promise); -/******/ -/******/ // start chunk loading -/******/ var script = document.createElement('script'); -/******/ var onScriptComplete; -/******/ -/******/ script.charset = 'utf-8'; -/******/ script.timeout = 120; -/******/ if (__webpack_require__.nc) { -/******/ script.setAttribute("nonce", __webpack_require__.nc); -/******/ } -/******/ script.src = jsonpScriptSrc(chunkId); -/******/ -/******/ // create error before stack unwound to get useful stacktrace later -/******/ var error = new Error(); -/******/ onScriptComplete = function (event) { -/******/ // avoid mem leaks in IE. -/******/ script.onerror = script.onload = null; -/******/ clearTimeout(timeout); -/******/ var chunk = installedChunks[chunkId]; -/******/ if(chunk !== 0) { -/******/ if(chunk) { -/******/ var errorType = event && (event.type === 'load' ? 'missing' : event.type); -/******/ var realSrc = event && event.target && event.target.src; -/******/ error.message = 'Loading chunk ' + chunkId + ' failed.\n(' + errorType + ': ' + realSrc + ')'; -/******/ error.name = 'ChunkLoadError'; -/******/ error.type = errorType; -/******/ error.request = realSrc; -/******/ chunk[1](error); -/******/ } -/******/ installedChunks[chunkId] = undefined; -/******/ } -/******/ }; -/******/ var timeout = setTimeout(function(){ -/******/ onScriptComplete({ type: 'timeout', target: script }); -/******/ }, 120000); -/******/ script.onerror = script.onload = onScriptComplete; -/******/ document.head.appendChild(script); -/******/ } -/******/ } -/******/ return Promise.all(promises); -/******/ }; -/******/ -/******/ // expose the modules object (__webpack_modules__) -/******/ __webpack_require__.m = modules; -/******/ -/******/ // expose the module cache -/******/ __webpack_require__.c = installedModules; -/******/ -/******/ // define getter function for harmony exports -/******/ __webpack_require__.d = function(exports, name, getter) { -/******/ if(!__webpack_require__.o(exports, name)) { -/******/ Object.defineProperty(exports, name, { enumerable: true, get: getter }); -/******/ } -/******/ }; -/******/ -/******/ // define __esModule on exports -/******/ __webpack_require__.r = function(exports) { -/******/ if(typeof Symbol !== 'undefined' && Symbol.toStringTag) { -/******/ Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' }); -/******/ } -/******/ Object.defineProperty(exports, '__esModule', { value: true }); -/******/ }; -/******/ -/******/ // create a fake namespace object -/******/ // mode & 1: value is a module id, require it -/******/ // mode & 2: merge all properties of value into the ns -/******/ // mode & 4: return value when already ns object -/******/ // mode & 8|1: behave like require -/******/ __webpack_require__.t = function(value, mode) { -/******/ if(mode & 1) value = __webpack_require__(value); -/******/ if(mode & 8) return value; -/******/ if((mode & 4) && typeof value === 'object' && value && value.__esModule) return value; -/******/ var ns = Object.create(null); -/******/ __webpack_require__.r(ns); -/******/ Object.defineProperty(ns, 'default', { enumerable: true, value: value }); -/******/ if(mode & 2 && typeof value != 'string') for(var key in value) __webpack_require__.d(ns, key, function(key) { return value[key]; }.bind(null, key)); -/******/ return ns; -/******/ }; -/******/ -/******/ // getDefaultExport function for compatibility with non-harmony modules -/******/ __webpack_require__.n = function(module) { -/******/ var getter = module && module.__esModule ? -/******/ function getDefault() { return module['default']; } : -/******/ function getModuleExports() { return module; }; -/******/ __webpack_require__.d(getter, 'a', getter); -/******/ return getter; -/******/ }; -/******/ -/******/ // Object.prototype.hasOwnProperty.call -/******/ __webpack_require__.o = function(object, property) { return Object.prototype.hasOwnProperty.call(object, property); }; -/******/ -/******/ // __webpack_public_path__ -/******/ __webpack_require__.p = ""; -/******/ -/******/ // on error function for async loading -/******/ __webpack_require__.oe = function(err) { console.error(err); throw err; }; -/******/ -/******/ var jsonpArray = window["webpackJsonp"] = window["webpackJsonp"] || []; -/******/ var oldJsonpFunction = jsonpArray.push.bind(jsonpArray); -/******/ jsonpArray.push = webpackJsonpCallback; -/******/ jsonpArray = jsonpArray.slice(); -/******/ for(var i = 0; i < jsonpArray.length; i++) webpackJsonpCallback(jsonpArray[i]); -/******/ var parentJsonpFunction = oldJsonpFunction; -/******/ -/******/ -/******/ // Load entry module and return exports -/******/ return __webpack_require__(__webpack_require__.s = 0); -/******/ }) -/************************************************************************/ -/******/ ([ -/* 0 */ -/***/ (function(module, __webpack_exports__, __webpack_require__) { - -"use strict"; -__webpack_require__.r(__webpack_exports__); -/* harmony import */ var _main_css__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(1); -/* harmony import */ var _main_css__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(_main_css__WEBPACK_IMPORTED_MODULE_0__); -/* harmony import */ var _both_async_css__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(2); -/* harmony import */ var _both_async_css__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(_both_async_css__WEBPACK_IMPORTED_MODULE_1__); - - - -__webpack_require__.e(/* import() */ 2).then(__webpack_require__.bind(null, 4)); - -__webpack_require__.e(/* import() */ 4).then(__webpack_require__.t.bind(null, 10, 7)); - -// console.log('index.js'); - - -/***/ }), -/* 1 */ -/***/ (function(module, exports, __webpack_require__) { - -// extracted by mini-css-extract-plugin - -/***/ }), -/* 2 */ -/***/ (function(module, exports, __webpack_require__) { - -// extracted by mini-css-extract-plugin - -/***/ }) -/******/ ]); \ No newline at end of file diff --git a/test/cases/disable-extract-func-async/expected/index2.js b/test/cases/disable-extract-func-async/expected/index2.js deleted file mode 100644 index e2fd7c24..00000000 --- a/test/cases/disable-extract-func-async/expected/index2.js +++ /dev/null @@ -1,214 +0,0 @@ -/******/ (function(modules) { // webpackBootstrap -/******/ // install a JSONP callback for chunk loading -/******/ function webpackJsonpCallback(data) { -/******/ var chunkIds = data[0]; -/******/ var moreModules = data[1]; -/******/ -/******/ -/******/ // add "moreModules" to the modules object, -/******/ // then flag all "chunkIds" as loaded and fire callback -/******/ var moduleId, chunkId, i = 0, resolves = []; -/******/ for(;i < chunkIds.length; i++) { -/******/ chunkId = chunkIds[i]; -/******/ if(installedChunks[chunkId]) { -/******/ resolves.push(installedChunks[chunkId][0]); -/******/ } -/******/ installedChunks[chunkId] = 0; -/******/ } -/******/ for(moduleId in moreModules) { -/******/ if(Object.prototype.hasOwnProperty.call(moreModules, moduleId)) { -/******/ modules[moduleId] = moreModules[moduleId]; -/******/ } -/******/ } -/******/ if(parentJsonpFunction) parentJsonpFunction(data); -/******/ -/******/ while(resolves.length) { -/******/ resolves.shift()(); -/******/ } -/******/ -/******/ }; -/******/ -/******/ -/******/ // The module cache -/******/ var installedModules = {}; -/******/ -/******/ // object to store loaded and loading chunks -/******/ // undefined = chunk not loaded, null = chunk preloaded/prefetched -/******/ // Promise = chunk loading, 0 = chunk loaded -/******/ var installedChunks = { -/******/ 1: 0 -/******/ }; -/******/ -/******/ -/******/ -/******/ // script path function -/******/ function jsonpScriptSrc(chunkId) { -/******/ return __webpack_require__.p + "" + ({}[chunkId]||chunkId) + ".js" -/******/ } -/******/ -/******/ // The require function -/******/ function __webpack_require__(moduleId) { -/******/ -/******/ // Check if module is in cache -/******/ if(installedModules[moduleId]) { -/******/ return installedModules[moduleId].exports; -/******/ } -/******/ // Create a new module (and put it into the cache) -/******/ var module = installedModules[moduleId] = { -/******/ i: moduleId, -/******/ l: false, -/******/ exports: {} -/******/ }; -/******/ -/******/ // Execute the module function -/******/ modules[moduleId].call(module.exports, module, module.exports, __webpack_require__); -/******/ -/******/ // Flag the module as loaded -/******/ module.l = true; -/******/ -/******/ // Return the exports of the module -/******/ return module.exports; -/******/ } -/******/ -/******/ // This file contains only the entry chunk. -/******/ // The chunk loading function for additional chunks -/******/ __webpack_require__.e = function requireEnsure(chunkId) { -/******/ var promises = []; -/******/ -/******/ -/******/ // JSONP chunk loading for javascript -/******/ -/******/ var installedChunkData = installedChunks[chunkId]; -/******/ if(installedChunkData !== 0) { // 0 means "already installed". -/******/ -/******/ // a Promise means "currently loading". -/******/ if(installedChunkData) { -/******/ promises.push(installedChunkData[2]); -/******/ } else { -/******/ // setup Promise in chunk cache -/******/ var promise = new Promise(function(resolve, reject) { -/******/ installedChunkData = installedChunks[chunkId] = [resolve, reject]; -/******/ }); -/******/ promises.push(installedChunkData[2] = promise); -/******/ -/******/ // start chunk loading -/******/ var script = document.createElement('script'); -/******/ var onScriptComplete; -/******/ -/******/ script.charset = 'utf-8'; -/******/ script.timeout = 120; -/******/ if (__webpack_require__.nc) { -/******/ script.setAttribute("nonce", __webpack_require__.nc); -/******/ } -/******/ script.src = jsonpScriptSrc(chunkId); -/******/ -/******/ // create error before stack unwound to get useful stacktrace later -/******/ var error = new Error(); -/******/ onScriptComplete = function (event) { -/******/ // avoid mem leaks in IE. -/******/ script.onerror = script.onload = null; -/******/ clearTimeout(timeout); -/******/ var chunk = installedChunks[chunkId]; -/******/ if(chunk !== 0) { -/******/ if(chunk) { -/******/ var errorType = event && (event.type === 'load' ? 'missing' : event.type); -/******/ var realSrc = event && event.target && event.target.src; -/******/ error.message = 'Loading chunk ' + chunkId + ' failed.\n(' + errorType + ': ' + realSrc + ')'; -/******/ error.name = 'ChunkLoadError'; -/******/ error.type = errorType; -/******/ error.request = realSrc; -/******/ chunk[1](error); -/******/ } -/******/ installedChunks[chunkId] = undefined; -/******/ } -/******/ }; -/******/ var timeout = setTimeout(function(){ -/******/ onScriptComplete({ type: 'timeout', target: script }); -/******/ }, 120000); -/******/ script.onerror = script.onload = onScriptComplete; -/******/ document.head.appendChild(script); -/******/ } -/******/ } -/******/ return Promise.all(promises); -/******/ }; -/******/ -/******/ // expose the modules object (__webpack_modules__) -/******/ __webpack_require__.m = modules; -/******/ -/******/ // expose the module cache -/******/ __webpack_require__.c = installedModules; -/******/ -/******/ // define getter function for harmony exports -/******/ __webpack_require__.d = function(exports, name, getter) { -/******/ if(!__webpack_require__.o(exports, name)) { -/******/ Object.defineProperty(exports, name, { enumerable: true, get: getter }); -/******/ } -/******/ }; -/******/ -/******/ // define __esModule on exports -/******/ __webpack_require__.r = function(exports) { -/******/ if(typeof Symbol !== 'undefined' && Symbol.toStringTag) { -/******/ Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' }); -/******/ } -/******/ Object.defineProperty(exports, '__esModule', { value: true }); -/******/ }; -/******/ -/******/ // create a fake namespace object -/******/ // mode & 1: value is a module id, require it -/******/ // mode & 2: merge all properties of value into the ns -/******/ // mode & 4: return value when already ns object -/******/ // mode & 8|1: behave like require -/******/ __webpack_require__.t = function(value, mode) { -/******/ if(mode & 1) value = __webpack_require__(value); -/******/ if(mode & 8) return value; -/******/ if((mode & 4) && typeof value === 'object' && value && value.__esModule) return value; -/******/ var ns = Object.create(null); -/******/ __webpack_require__.r(ns); -/******/ Object.defineProperty(ns, 'default', { enumerable: true, value: value }); -/******/ if(mode & 2 && typeof value != 'string') for(var key in value) __webpack_require__.d(ns, key, function(key) { return value[key]; }.bind(null, key)); -/******/ return ns; -/******/ }; -/******/ -/******/ // getDefaultExport function for compatibility with non-harmony modules -/******/ __webpack_require__.n = function(module) { -/******/ var getter = module && module.__esModule ? -/******/ function getDefault() { return module['default']; } : -/******/ function getModuleExports() { return module; }; -/******/ __webpack_require__.d(getter, 'a', getter); -/******/ return getter; -/******/ }; -/******/ -/******/ // Object.prototype.hasOwnProperty.call -/******/ __webpack_require__.o = function(object, property) { return Object.prototype.hasOwnProperty.call(object, property); }; -/******/ -/******/ // __webpack_public_path__ -/******/ __webpack_require__.p = ""; -/******/ -/******/ // on error function for async loading -/******/ __webpack_require__.oe = function(err) { console.error(err); throw err; }; -/******/ -/******/ var jsonpArray = window["webpackJsonp"] = window["webpackJsonp"] || []; -/******/ var oldJsonpFunction = jsonpArray.push.bind(jsonpArray); -/******/ jsonpArray.push = webpackJsonpCallback; -/******/ jsonpArray = jsonpArray.slice(); -/******/ for(var i = 0; i < jsonpArray.length; i++) webpackJsonpCallback(jsonpArray[i]); -/******/ var parentJsonpFunction = oldJsonpFunction; -/******/ -/******/ -/******/ // Load entry module and return exports -/******/ return __webpack_require__(__webpack_require__.s = 3); -/******/ }) -/************************************************************************/ -/******/ ({ - -/***/ 3: -/***/ (function(module, exports, __webpack_require__) { - -__webpack_require__.e(/* import() */ 3).then(__webpack_require__.bind(null, 11)); - -// console.log('index2'); - - -/***/ }) - -/******/ }); \ No newline at end of file diff --git a/test/cases/disable-extract-func-async/in-async.css b/test/cases/disable-extract-func-async/in-async.css deleted file mode 100644 index 922b9d89..00000000 --- a/test/cases/disable-extract-func-async/in-async.css +++ /dev/null @@ -1,5 +0,0 @@ -@import './async-import.css'; - -.in-async { - background: green; -} diff --git a/test/cases/disable-extract-func-async/in-async.js b/test/cases/disable-extract-func-async/in-async.js deleted file mode 100644 index 33611214..00000000 --- a/test/cases/disable-extract-func-async/in-async.js +++ /dev/null @@ -1 +0,0 @@ -// console.log('in-async.js'); diff --git a/test/cases/disable-extract-func-async/in-async2.css b/test/cases/disable-extract-func-async/in-async2.css deleted file mode 100644 index 28781c21..00000000 --- a/test/cases/disable-extract-func-async/in-async2.css +++ /dev/null @@ -1,5 +0,0 @@ -@import './async-import.css'; - -.in-async-2 { - background: green; -} diff --git a/test/cases/disable-extract-func-async/index.js b/test/cases/disable-extract-func-async/index.js deleted file mode 100644 index 13a5bbe1..00000000 --- a/test/cases/disable-extract-func-async/index.js +++ /dev/null @@ -1,8 +0,0 @@ -import './main.css'; -import './both-async.css'; - -import('./async'); - -import('./async.css'); - -// console.log('index.js'); diff --git a/test/cases/disable-extract-func-async/index2.js b/test/cases/disable-extract-func-async/index2.js deleted file mode 100644 index e44b1ad9..00000000 --- a/test/cases/disable-extract-func-async/index2.js +++ /dev/null @@ -1,3 +0,0 @@ -import('./async2'); - -// console.log('index2'); diff --git a/test/cases/disable-extract-func-async/main.css b/test/cases/disable-extract-func-async/main.css deleted file mode 100644 index 584e42d4..00000000 --- a/test/cases/disable-extract-func-async/main.css +++ /dev/null @@ -1,5 +0,0 @@ -@import 'shared.css'; - -body { - background: red; -} diff --git a/test/cases/disable-extract-func-async/shared.css b/test/cases/disable-extract-func-async/shared.css deleted file mode 100644 index 0a1ca625..00000000 --- a/test/cases/disable-extract-func-async/shared.css +++ /dev/null @@ -1,3 +0,0 @@ -.shared { - background: pink; -} diff --git a/test/cases/disable-extract-func-async/webpack.config.js b/test/cases/disable-extract-func-async/webpack.config.js deleted file mode 100644 index bb6a69a7..00000000 --- a/test/cases/disable-extract-func-async/webpack.config.js +++ /dev/null @@ -1,24 +0,0 @@ -import Self from '../../../src'; - -module.exports = { - entry: { - index1: './index.js', - index2: './index2.js', - }, - module: { - rules: [ - { - test: /\.css$/, - use: [Self.loader, 'css-loader'], - }, - ], - }, - plugins: [ - new Self({ - filename: '[name].css', - disableExtract({ isAsync }) { - return isAsync; - }, - }), - ], -}; diff --git a/test/cases/disable-extract-func/async2.js b/test/cases/disable-extract-func/async2.js index 205be95b..f3b92994 100644 --- a/test/cases/disable-extract-func/async2.js +++ b/test/cases/disable-extract-func/async2.js @@ -1,4 +1,5 @@ import './both-page-async-disabled.css'; import './both-page-async.css'; +import './is-async1.css'; // console.log('async2.js'); diff --git a/test/cases/disable-extract-func/index2.js b/test/cases/disable-extract-func/index2.js index e44b1ad9..3a4cea27 100644 --- a/test/cases/disable-extract-func/index2.js +++ b/test/cases/disable-extract-func/index2.js @@ -1,3 +1,5 @@ +import './is-async2.css'; + import('./async2'); // console.log('index2'); diff --git a/test/cases/disable-extract-func/is-async1.css b/test/cases/disable-extract-func/is-async1.css new file mode 100644 index 00000000..ca7b2c9c --- /dev/null +++ b/test/cases/disable-extract-func/is-async1.css @@ -0,0 +1,3 @@ +.is-async-1 { + background: magenta; +} diff --git a/test/cases/disable-extract-func/is-async2.css b/test/cases/disable-extract-func/is-async2.css new file mode 100644 index 00000000..f815dcf1 --- /dev/null +++ b/test/cases/disable-extract-func/is-async2.css @@ -0,0 +1,3 @@ +.is-async-2 { + background: brown; +} diff --git a/test/cases/disable-extract-func/webpack.config.js b/test/cases/disable-extract-func/webpack.config.js index 57e250cd..ade3522a 100644 --- a/test/cases/disable-extract-func/webpack.config.js +++ b/test/cases/disable-extract-func/webpack.config.js @@ -16,11 +16,12 @@ module.exports = { plugins: [ new Self({ filename: '[name].css', - disableExtract({ module }) { + disableExtract({ module, isAsync }) { let ret = false; if ( module.content.indexOf('in-async ') > -1 || - module.content.indexOf('both-page-async-disabled') > -1 + module.content.indexOf('both-page-async-disabled') > -1 || + (module.content.indexOf('is-async') > -1 && isAsync) ) { ret = true; } From b986c5426b2025add1c331dadcadc14feb13d0b0 Mon Sep 17 00:00:00 2001 From: Light Leung Date: Fri, 26 Jul 2019 08:48:45 +0800 Subject: [PATCH 17/23] feat: ability to disable extract modules, ci fix --- test/cases/disable-extract-func/expected/1.js | 29 +++++----- test/cases/disable-extract-func/expected/2.js | 51 ++++++++++++++---- .../cases/disable-extract-func/expected/3.css | 4 +- test/cases/disable-extract-func/expected/3.js | 53 +++++++++++++++++-- .../cases/disable-extract-func/expected/4.css | 4 ++ test/cases/disable-extract-func/expected/4.js | 10 ++++ .../disable-extract-func/expected/index1.js | 6 +-- .../disable-extract-func/expected/index2.css | 3 ++ .../disable-extract-func/expected/index2.js | 30 +++++++---- 9 files changed, 147 insertions(+), 43 deletions(-) create mode 100644 test/cases/disable-extract-func/expected/4.css create mode 100644 test/cases/disable-extract-func/expected/4.js create mode 100644 test/cases/disable-extract-func/expected/index2.css diff --git a/test/cases/disable-extract-func/expected/1.js b/test/cases/disable-extract-func/expected/1.js index c2100543..2898fc14 100644 --- a/test/cases/disable-extract-func/expected/1.js +++ b/test/cases/disable-extract-func/expected/1.js @@ -3,22 +3,23 @@ /* 1 */, /* 2 */, /* 3 */, -/* 4 */ +/* 4 */, +/* 5 */ /***/ (function(module, __webpack_exports__, __webpack_require__) { "use strict"; __webpack_require__.r(__webpack_exports__); -/* harmony import */ var _in_async__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(5); +/* harmony import */ var _in_async__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(6); /* harmony import */ var _in_async__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(_in_async__WEBPACK_IMPORTED_MODULE_0__); -/* harmony import */ var _in_async2_css__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(6); +/* harmony import */ var _in_async2_css__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(7); /* harmony import */ var _in_async2_css__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(_in_async2_css__WEBPACK_IMPORTED_MODULE_1__); -/* harmony import */ var _in_async_css__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(7); +/* harmony import */ var _in_async_css__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(8); /* harmony import */ var _in_async_css__WEBPACK_IMPORTED_MODULE_2___default = /*#__PURE__*/__webpack_require__.n(_in_async_css__WEBPACK_IMPORTED_MODULE_2__); /* harmony import */ var _both_async_css__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(2); /* harmony import */ var _both_async_css__WEBPACK_IMPORTED_MODULE_3___default = /*#__PURE__*/__webpack_require__.n(_both_async_css__WEBPACK_IMPORTED_MODULE_3__); -/* harmony import */ var _both_page_async_disabled_css__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(8); +/* harmony import */ var _both_page_async_disabled_css__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(9); /* harmony import */ var _both_page_async_disabled_css__WEBPACK_IMPORTED_MODULE_4___default = /*#__PURE__*/__webpack_require__.n(_both_page_async_disabled_css__WEBPACK_IMPORTED_MODULE_4__); -/* harmony import */ var _both_page_async_css__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(9); +/* harmony import */ var _both_page_async_css__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(10); /* harmony import */ var _both_page_async_css__WEBPACK_IMPORTED_MODULE_5___default = /*#__PURE__*/__webpack_require__.n(_both_page_async_css__WEBPACK_IMPORTED_MODULE_5__); @@ -32,40 +33,40 @@ __webpack_require__.r(__webpack_exports__); /***/ }), -/* 5 */ +/* 6 */ /***/ (function(module, exports) { // console.log('in-async.js'); /***/ }), -/* 6 */ +/* 7 */ /***/ (function(module, exports, __webpack_require__) { // extracted by mini-css-extract-plugin /***/ }), -/* 7 */ +/* 8 */ /***/ (function(module, exports, __webpack_require__) { -exports = module.exports = __webpack_require__(12)(false); +exports = module.exports = __webpack_require__(14)(false); // Imports -exports.i(__webpack_require__(13), ""); +exports.i(__webpack_require__(15), ""); // Module exports.push([module.i, ".in-async {\n background: green;\n}\n", ""]); /***/ }), -/* 8 */ +/* 9 */ /***/ (function(module, exports, __webpack_require__) { -exports = module.exports = __webpack_require__(12)(false); +exports = module.exports = __webpack_require__(14)(false); // Module exports.push([module.i, ".both-page-async-disabled {\n color: yellow;\n}\n", ""]); /***/ }), -/* 9 */ +/* 10 */ /***/ (function(module, exports, __webpack_require__) { // extracted by mini-css-extract-plugin diff --git a/test/cases/disable-extract-func/expected/2.js b/test/cases/disable-extract-func/expected/2.js index 860ce999..5695be1e 100644 --- a/test/cases/disable-extract-func/expected/2.js +++ b/test/cases/disable-extract-func/expected/2.js @@ -1,6 +1,29 @@ -(window["webpackJsonp"] = window["webpackJsonp"] || []).push([[2],{ +(window["webpackJsonp"] = window["webpackJsonp"] || []).push([[2],[ +/* 0 */, +/* 1 */, +/* 2 */, +/* 3 */, +/* 4 */, +/* 5 */, +/* 6 */, +/* 7 */, +/* 8 */ +/***/ (function(module, exports, __webpack_require__) { + +exports = module.exports = __webpack_require__(14)(false); +// Module +exports.push([module.i, ".both-page-async-disabled {\n color: yellow;\n}\n", ""]); + + +/***/ }), +/* 9 */ +/***/ (function(module, exports, __webpack_require__) { + +// extracted by mini-css-extract-plugin -/***/ 11: +/***/ }), +/* 10 */, +/* 11 */ /***/ (function(module, __webpack_exports__, __webpack_require__) { "use strict"; @@ -9,6 +32,12 @@ __webpack_require__.r(__webpack_exports__); /* harmony import */ var _both_page_async_disabled_css__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(_both_page_async_disabled_css__WEBPACK_IMPORTED_MODULE_0__); /* harmony import */ var _both_page_async_css__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(9); /* harmony import */ var _both_page_async_css__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(_both_page_async_css__WEBPACK_IMPORTED_MODULE_1__); +/* harmony import */ var _is_async1_css__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(12); +/* harmony import */ var _is_async1_css__WEBPACK_IMPORTED_MODULE_2___default = /*#__PURE__*/__webpack_require__.n(_is_async1_css__WEBPACK_IMPORTED_MODULE_2__); +/* harmony import */ var _is_async2_css__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(13); +/* harmony import */ var _is_async2_css__WEBPACK_IMPORTED_MODULE_3___default = /*#__PURE__*/__webpack_require__.n(_is_async2_css__WEBPACK_IMPORTED_MODULE_3__); + + @@ -16,22 +45,22 @@ __webpack_require__.r(__webpack_exports__); /***/ }), - -/***/ 8: +/* 12 */ /***/ (function(module, exports, __webpack_require__) { -exports = module.exports = __webpack_require__(12)(false); +exports = module.exports = __webpack_require__(14)(false); // Module -exports.push([module.i, ".both-page-async-disabled {\n color: yellow;\n}\n", ""]); +exports.push([module.i, ".is-async-1 {\r\n background: magenta;\r\n}", ""]); /***/ }), - -/***/ 9: +/* 13 */ /***/ (function(module, exports, __webpack_require__) { -// extracted by mini-css-extract-plugin +exports = module.exports = __webpack_require__(14)(false); +// Module +exports.push([module.i, ".is-async-2 {\r\n background: brown;\r\n}", ""]); -/***/ }) -}]); \ No newline at end of file +/***/ }) +]]); \ No newline at end of file diff --git a/test/cases/disable-extract-func/expected/3.css b/test/cases/disable-extract-func/expected/3.css index 67332816..38c3dcad 100644 --- a/test/cases/disable-extract-func/expected/3.css +++ b/test/cases/disable-extract-func/expected/3.css @@ -1,4 +1,4 @@ -.async { - background: blue; +.both-page-async { + color: cyan; } diff --git a/test/cases/disable-extract-func/expected/3.js b/test/cases/disable-extract-func/expected/3.js index 754504c8..5f36b2b6 100644 --- a/test/cases/disable-extract-func/expected/3.js +++ b/test/cases/disable-extract-func/expected/3.js @@ -1,10 +1,55 @@ -(window["webpackJsonp"] = window["webpackJsonp"] || []).push([[3],{ +(window["webpackJsonp"] = window["webpackJsonp"] || []).push([[3],[ +/* 0 */, +/* 1 */, +/* 2 */, +/* 3 */, +/* 4 */, +/* 5 */, +/* 6 */, +/* 7 */, +/* 8 */, +/* 9 */ +/***/ (function(module, exports, __webpack_require__) { + +exports = module.exports = __webpack_require__(14)(false); +// Module +exports.push([module.i, ".both-page-async-disabled {\n color: yellow;\n}\n", ""]); -/***/ 10: + +/***/ }), +/* 10 */ /***/ (function(module, exports, __webpack_require__) { // extracted by mini-css-extract-plugin -/***/ }) +/***/ }), +/* 11 */, +/* 12 */ +/***/ (function(module, __webpack_exports__, __webpack_require__) { + +"use strict"; +__webpack_require__.r(__webpack_exports__); +/* harmony import */ var _both_page_async_disabled_css__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(9); +/* harmony import */ var _both_page_async_disabled_css__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(_both_page_async_disabled_css__WEBPACK_IMPORTED_MODULE_0__); +/* harmony import */ var _both_page_async_css__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(10); +/* harmony import */ var _both_page_async_css__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(_both_page_async_css__WEBPACK_IMPORTED_MODULE_1__); +/* harmony import */ var _is_async1_css__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(13); +/* harmony import */ var _is_async1_css__WEBPACK_IMPORTED_MODULE_2___default = /*#__PURE__*/__webpack_require__.n(_is_async1_css__WEBPACK_IMPORTED_MODULE_2__); + + + -}]); \ No newline at end of file +// console.log('async2.js'); + + +/***/ }), +/* 13 */ +/***/ (function(module, exports, __webpack_require__) { + +exports = module.exports = __webpack_require__(14)(false); +// Module +exports.push([module.i, ".is-async-1 {\r\n background: magenta;\r\n}", ""]); + + +/***/ }) +]]); \ No newline at end of file diff --git a/test/cases/disable-extract-func/expected/4.css b/test/cases/disable-extract-func/expected/4.css new file mode 100644 index 00000000..67332816 --- /dev/null +++ b/test/cases/disable-extract-func/expected/4.css @@ -0,0 +1,4 @@ +.async { + background: blue; +} + diff --git a/test/cases/disable-extract-func/expected/4.js b/test/cases/disable-extract-func/expected/4.js new file mode 100644 index 00000000..0391d394 --- /dev/null +++ b/test/cases/disable-extract-func/expected/4.js @@ -0,0 +1,10 @@ +(window["webpackJsonp"] = window["webpackJsonp"] || []).push([[4],{ + +/***/ 11: +/***/ (function(module, exports, __webpack_require__) { + +// extracted by mini-css-extract-plugin + +/***/ }) + +}]); \ No newline at end of file diff --git a/test/cases/disable-extract-func/expected/index1.js b/test/cases/disable-extract-func/expected/index1.js index b6f8ac79..a3c91ae5 100644 --- a/test/cases/disable-extract-func/expected/index1.js +++ b/test/cases/disable-extract-func/expected/index1.js @@ -82,7 +82,7 @@ /******/ /******/ /******/ // mini-css-extract-plugin CSS loading -/******/ var cssChunks = {"1":1,"3":1}; +/******/ var cssChunks = {"1":1,"4":1}; /******/ if(installedCssChunks[chunkId]) promises.push(installedCssChunks[chunkId]); /******/ else if(installedCssChunks[chunkId] !== 0 && cssChunks[chunkId]) { /******/ promises.push(installedCssChunks[chunkId] = new Promise(function(resolve, reject) { @@ -258,9 +258,9 @@ __webpack_require__.r(__webpack_exports__); -__webpack_require__.e(/* import() */ 1).then(__webpack_require__.bind(null, 4)); +__webpack_require__.e(/* import() */ 1).then(__webpack_require__.bind(null, 5)); -__webpack_require__.e(/* import() */ 3).then(__webpack_require__.t.bind(null, 10, 7)); +__webpack_require__.e(/* import() */ 4).then(__webpack_require__.t.bind(null, 11, 7)); // console.log('index.js'); diff --git a/test/cases/disable-extract-func/expected/index2.css b/test/cases/disable-extract-func/expected/index2.css new file mode 100644 index 00000000..505c934d --- /dev/null +++ b/test/cases/disable-extract-func/expected/index2.css @@ -0,0 +1,3 @@ +.is-async-2 { + background: brown; +} diff --git a/test/cases/disable-extract-func/expected/index2.js b/test/cases/disable-extract-func/expected/index2.js index e7cf264a..0054bc8d 100644 --- a/test/cases/disable-extract-func/expected/index2.js +++ b/test/cases/disable-extract-func/expected/index2.js @@ -34,14 +34,14 @@ /******/ /******/ // object to store loaded CSS chunks /******/ var installedCssChunks = { -/******/ 4: 0 +/******/ 2: 0 /******/ } /******/ /******/ // object to store loaded and loading chunks /******/ // undefined = chunk not loaded, null = chunk preloaded/prefetched /******/ // Promise = chunk loading, 0 = chunk loaded /******/ var installedChunks = { -/******/ 4: 0 +/******/ 2: 0 /******/ }; /******/ /******/ @@ -82,7 +82,7 @@ /******/ /******/ /******/ // mini-css-extract-plugin CSS loading -/******/ var cssChunks = {"2":1}; +/******/ var cssChunks = {"3":1}; /******/ if(installedCssChunks[chunkId]) promises.push(installedCssChunks[chunkId]); /******/ else if(installedCssChunks[chunkId] !== 0 && cssChunks[chunkId]) { /******/ promises.push(installedCssChunks[chunkId] = new Promise(function(resolve, reject) { @@ -245,16 +245,28 @@ /******/ return __webpack_require__(__webpack_require__.s = 3); /******/ }) /************************************************************************/ -/******/ ({ +/******/ ([ +/* 0 */, +/* 1 */, +/* 2 */, +/* 3 */ +/***/ (function(module, __webpack_exports__, __webpack_require__) { -/***/ 3: -/***/ (function(module, exports, __webpack_require__) { +"use strict"; +__webpack_require__.r(__webpack_exports__); +/* harmony import */ var _is_async2_css__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(4); +/* harmony import */ var _is_async2_css__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(_is_async2_css__WEBPACK_IMPORTED_MODULE_0__); +__webpack_require__.e(/* import() */ 3).then(__webpack_require__.bind(null, 12)); -__webpack_require__.e(/* import() */ 2).then(__webpack_require__.bind(null, 11)); // console.log('index2'); -/***/ }) +/***/ }), +/* 4 */ +/***/ (function(module, exports, __webpack_require__) { -/******/ }); \ No newline at end of file +// extracted by mini-css-extract-plugin + +/***/ }) +/******/ ]); \ No newline at end of file From fa5831085a767da6e550d6df645e23542605fee8 Mon Sep 17 00:00:00 2001 From: Light Leung Date: Fri, 26 Jul 2019 08:58:10 +0800 Subject: [PATCH 18/23] feat: ability to disable extract modules, ci fix --- .../cases/disable-extract-func/expected/2.css | 4 -- test/cases/disable-extract-func/expected/2.js | 66 ------------------- test/cases/disable-extract-func/expected/3.js | 2 +- .../disable-extract-func/expected/index2.css | 3 +- .../disable-extract-func/expected/index2.js | 3 +- 5 files changed, 5 insertions(+), 73 deletions(-) delete mode 100644 test/cases/disable-extract-func/expected/2.css delete mode 100644 test/cases/disable-extract-func/expected/2.js diff --git a/test/cases/disable-extract-func/expected/2.css b/test/cases/disable-extract-func/expected/2.css deleted file mode 100644 index 38c3dcad..00000000 --- a/test/cases/disable-extract-func/expected/2.css +++ /dev/null @@ -1,4 +0,0 @@ -.both-page-async { - color: cyan; -} - diff --git a/test/cases/disable-extract-func/expected/2.js b/test/cases/disable-extract-func/expected/2.js deleted file mode 100644 index 5695be1e..00000000 --- a/test/cases/disable-extract-func/expected/2.js +++ /dev/null @@ -1,66 +0,0 @@ -(window["webpackJsonp"] = window["webpackJsonp"] || []).push([[2],[ -/* 0 */, -/* 1 */, -/* 2 */, -/* 3 */, -/* 4 */, -/* 5 */, -/* 6 */, -/* 7 */, -/* 8 */ -/***/ (function(module, exports, __webpack_require__) { - -exports = module.exports = __webpack_require__(14)(false); -// Module -exports.push([module.i, ".both-page-async-disabled {\n color: yellow;\n}\n", ""]); - - -/***/ }), -/* 9 */ -/***/ (function(module, exports, __webpack_require__) { - -// extracted by mini-css-extract-plugin - -/***/ }), -/* 10 */, -/* 11 */ -/***/ (function(module, __webpack_exports__, __webpack_require__) { - -"use strict"; -__webpack_require__.r(__webpack_exports__); -/* harmony import */ var _both_page_async_disabled_css__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(8); -/* harmony import */ var _both_page_async_disabled_css__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(_both_page_async_disabled_css__WEBPACK_IMPORTED_MODULE_0__); -/* harmony import */ var _both_page_async_css__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(9); -/* harmony import */ var _both_page_async_css__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(_both_page_async_css__WEBPACK_IMPORTED_MODULE_1__); -/* harmony import */ var _is_async1_css__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(12); -/* harmony import */ var _is_async1_css__WEBPACK_IMPORTED_MODULE_2___default = /*#__PURE__*/__webpack_require__.n(_is_async1_css__WEBPACK_IMPORTED_MODULE_2__); -/* harmony import */ var _is_async2_css__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(13); -/* harmony import */ var _is_async2_css__WEBPACK_IMPORTED_MODULE_3___default = /*#__PURE__*/__webpack_require__.n(_is_async2_css__WEBPACK_IMPORTED_MODULE_3__); - - - - - -// console.log('async2.js'); - - -/***/ }), -/* 12 */ -/***/ (function(module, exports, __webpack_require__) { - -exports = module.exports = __webpack_require__(14)(false); -// Module -exports.push([module.i, ".is-async-1 {\r\n background: magenta;\r\n}", ""]); - - -/***/ }), -/* 13 */ -/***/ (function(module, exports, __webpack_require__) { - -exports = module.exports = __webpack_require__(14)(false); -// Module -exports.push([module.i, ".is-async-2 {\r\n background: brown;\r\n}", ""]); - - -/***/ }) -]]); \ No newline at end of file diff --git a/test/cases/disable-extract-func/expected/3.js b/test/cases/disable-extract-func/expected/3.js index 5f36b2b6..dc131e1f 100644 --- a/test/cases/disable-extract-func/expected/3.js +++ b/test/cases/disable-extract-func/expected/3.js @@ -48,7 +48,7 @@ __webpack_require__.r(__webpack_exports__); exports = module.exports = __webpack_require__(14)(false); // Module -exports.push([module.i, ".is-async-1 {\r\n background: magenta;\r\n}", ""]); +exports.push([module.i, ".is-async-1 {\n background: magenta;\n}\n", ""]); /***/ }) diff --git a/test/cases/disable-extract-func/expected/index2.css b/test/cases/disable-extract-func/expected/index2.css index 505c934d..566323a7 100644 --- a/test/cases/disable-extract-func/expected/index2.css +++ b/test/cases/disable-extract-func/expected/index2.css @@ -1,3 +1,4 @@ .is-async-2 { - background: brown; + background: brown; } + diff --git a/test/cases/disable-extract-func/expected/index2.js b/test/cases/disable-extract-func/expected/index2.js index 0054bc8d..ac920f76 100644 --- a/test/cases/disable-extract-func/expected/index2.js +++ b/test/cases/disable-extract-func/expected/index2.js @@ -256,9 +256,10 @@ __webpack_require__.r(__webpack_exports__); /* harmony import */ var _is_async2_css__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(4); /* harmony import */ var _is_async2_css__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(_is_async2_css__WEBPACK_IMPORTED_MODULE_0__); -__webpack_require__.e(/* import() */ 3).then(__webpack_require__.bind(null, 12)); +__webpack_require__.e(/* import() */ 3).then(__webpack_require__.bind(null, 12)); + // console.log('index2'); From 5de657273f0d3ef74999a7f0373152ecba33f8d8 Mon Sep 17 00:00:00 2001 From: Light Leung Date: Sat, 27 Jul 2019 13:45:15 +0800 Subject: [PATCH 19/23] feat: ability to disable extract modules, replace private property --- src/index.js | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/src/index.js b/src/index.js index a03ab8d1..791ecd4e 100644 --- a/src/index.js +++ b/src/index.js @@ -465,8 +465,7 @@ class MiniCssExtractPlugin { for (const chunk of chunks) { const isAsync = !isInitialOrHasNoParents(chunk); - // eslint-disable-next-line no-underscore-dangle - for (const module of chunk._modules) { + for (const module of chunk.modulesIterable) { if (module.type === MODULE_TYPE) { if (this.shouldDisableExtract({ module, isAsync })) { moduleToBeRebuild.add(module); From 5b2c6d3ac2da0ac236820e40b2fbb7f417f2f68b Mon Sep 17 00:00:00 2001 From: Light Leung Date: Wed, 31 Jul 2019 14:23:55 +0800 Subject: [PATCH 20/23] feat: ability to disable extract modules, remove useless code --- src/index.js | 4 ---- 1 file changed, 4 deletions(-) diff --git a/src/index.js b/src/index.js index 791ecd4e..6f2c1412 100644 --- a/src/index.js +++ b/src/index.js @@ -177,10 +177,6 @@ class MiniCssExtractPlugin { ); } - if (module[`${MODULE_TYPE}/disableExtract`]) { - return; - } - const identifierCountMap = new Map(); for (const line of content) { From 2f29038b647d007643aabdcc00dda8706bb5cc0d Mon Sep 17 00:00:00 2001 From: Light Leung Date: Tue, 4 Feb 2020 01:22:25 +0800 Subject: [PATCH 21/23] merge from master WIP --- CHANGELOG.md | 23 + README.md | 285 +- azure-pipelines.yml | 48 +- package-lock.json | 4713 ++++++++++------- package.json | 30 +- src/CssDependency.js | 22 + src/index.js | 96 +- src/{options.json => loader-options.json} | 16 +- src/loader.js | 72 +- src/plugin-options.json | 18 + test/TestCases.test.js | 31 +- test/TestMemoryFS.test.js | 14 +- .../validate-loader-options.test.js.snap | 31 + .../validate-plugin-options.test.js.snap | 29 + test/cases/chunkFilename/async.css | 3 + test/cases/chunkFilename/expected/1.async.css | 4 + test/cases/chunkFilename/expected/main.css | 4 + test/cases/chunkFilename/index.js | 4 + test/cases/chunkFilename/style.css | 3 + test/cases/chunkFilename/webpack.config.js | 19 + .../commonjs-module-syntax/expected/main.css | 12 + test/cases/commonjs-module-syntax/index.js | 1 + test/cases/commonjs-module-syntax/style.css | 11 + .../commonjs-module-syntax/webpack.config.js | 32 + .../expected/{2.css => async-1.css} | 0 .../expected/{1.css => dedupe.css} | 0 test/cases/composes-async/index.js | 6 +- test/cases/composes-async/webpack.config.js | 1 + test/cases/disable-extract-func/expected/1.js | 14 +- test/cases/disable-extract-func/expected/3.js | 12 +- .../disable-extract-func/expected/index1.js | 2 +- .../disable-extract-func/expected/index2.js | 2 +- test/cases/es-module-syntax/expected/main.css | 12 + test/cases/es-module-syntax/index.js | 1 + test/cases/es-module-syntax/style.css | 11 + test/cases/es-module-syntax/webpack.config.js | 32 + test/cases/filename-with-template/async.css | 3 + .../filename-with-template/expected/async.css | 4 + .../filename-with-template/expected/main.css | 4 + test/cases/filename-with-template/index.js | 4 + test/cases/filename-with-template/style.css | 3 + .../filename-with-template/webpack.config.js | 18 + .../cases/filename-without-template/async.css | 3 + .../expected/1.main.css | 4 + .../expected/main.css | 4 + test/cases/filename-without-template/index.js | 4 + .../cases/filename-without-template/style.css | 3 + .../webpack.config.js | 18 + .../hmr/expected/{ => webpack-4}/main.css | 0 .../hmr/expected/{ => webpack-4}/main.js | 0 test/cases/hmr/expected/webpack-5/main.css | 24 + test/cases/hmr/expected/webpack-5/main.js | 7 + test/cases/ignoreOrderFalse/e3.css | 3 + .../ignoreOrderFalse/expected/styles.css | 4 + test/cases/ignoreOrderFalse/index3.js | 2 + test/cases/ignoreOrderFalse/warnings.js | 12 + test/cases/ignoreOrderFalse/webpack.config.js | 1 + .../ignoreOrderFalseWithoutGoodChunks/e1.css | 3 + .../ignoreOrderFalseWithoutGoodChunks/e2.css | 3 + .../ignoreOrderFalseWithoutGoodChunks/e3.css | 3 + .../ignoreOrderFalseWithoutGoodChunks/e4.css | 3 + .../expected/styles.css | 16 + .../index.js | 1 + .../index2.js | 2 + .../index3.js | 3 + .../index4.js | 3 + .../warnings.js | 27 + .../webpack.config.js | 35 + ...0.css => style.922798e08e96756adb4a.1.css} | 0 ...f.css => style.fe78b7a6c50df391f00c.2.css} | 0 test/cases/js-hash/index.js | 1 + test/cases/js-hash/webpack.config.js | 4 +- test/cases/multiple-entry/index-one.js | 1 + test/cases/multiple-entry/index-two.js | 1 + test/cases/no-source-map/expected/main.css | 4 + test/cases/no-source-map/index.js | 1 + test/cases/no-source-map/style.css | 3 + test/cases/no-source-map/webpack.config.js | 30 + test/cases/shared-import/index.js | 1 + .../simple-async-load-css-fallback/index.js | 2 + test/cases/simple-async-load-css/index.js | 2 + test/cases/simple-async-source-map/index.js | 2 + test/cases/simple-async/index.js | 2 + .../simple-commonjs-syntax/expected/main.css | 4 + test/cases/simple-commonjs-syntax/index.js | 1 + test/cases/simple-commonjs-syntax/style.css | 3 + .../simple-commonjs-syntax/webpack.config.js | 25 + .../expected/main.css | 12 + .../simple-css-modules-mode-global/index.js | 1 + .../simple-css-modules-mode-global/style.css | 11 + .../webpack.config.js | 29 + .../expected/main.css | 12 + .../simple-css-modules-mode-local/index.js | 1 + .../simple-css-modules-mode-local/style.css | 11 + .../webpack.config.js | 29 + .../expected/main.css | 4 + .../simple-css-modules-mode-pure/index.js | 1 + .../simple-css-modules-mode-pure/style.css | 3 + .../webpack.config.js | 29 + .../simple-es-module-syntax/expected/main.css | 4 + test/cases/simple-es-module-syntax/index.js | 1 + test/cases/simple-es-module-syntax/style.css | 3 + .../simple-es-module-syntax/webpack.config.js | 25 + test/cases/source-map/webpack.config.js | 3 - test/cases/split-chunks-single/entry1.js | 2 + .../{vendors~main.css => vendors.css} | 0 test/cases/split-chunks/webpack.config.js | 1 + test/fixtures/simple.css | 3 + test/fixtures/simple.js | 3 + test/helpers/compile.js | 11 + test/helpers/getCompiler.js | 57 + test/helpers/index.js | 4 + test/manual/index.html | 12 + test/manual/src/index.js | 19 + test/manual/src/simple.css | 11 + test/manual/src/simple.module.css | 11 + test/manual/webpack.config.js | 50 +- test/validate-loader-options.test.js | 73 + test/validate-plugin-options.test.js | 73 + 119 files changed, 4345 insertions(+), 2089 deletions(-) create mode 100644 src/CssDependency.js rename src/{options.json => loader-options.json} (54%) create mode 100644 src/plugin-options.json create mode 100644 test/__snapshots__/validate-loader-options.test.js.snap create mode 100644 test/__snapshots__/validate-plugin-options.test.js.snap create mode 100644 test/cases/chunkFilename/async.css create mode 100644 test/cases/chunkFilename/expected/1.async.css create mode 100644 test/cases/chunkFilename/expected/main.css create mode 100644 test/cases/chunkFilename/index.js create mode 100644 test/cases/chunkFilename/style.css create mode 100644 test/cases/chunkFilename/webpack.config.js create mode 100644 test/cases/commonjs-module-syntax/expected/main.css create mode 100644 test/cases/commonjs-module-syntax/index.js create mode 100644 test/cases/commonjs-module-syntax/style.css create mode 100644 test/cases/commonjs-module-syntax/webpack.config.js rename test/cases/composes-async/expected/{2.css => async-1.css} (100%) rename test/cases/composes-async/expected/{1.css => dedupe.css} (100%) create mode 100644 test/cases/es-module-syntax/expected/main.css create mode 100644 test/cases/es-module-syntax/index.js create mode 100644 test/cases/es-module-syntax/style.css create mode 100644 test/cases/es-module-syntax/webpack.config.js create mode 100644 test/cases/filename-with-template/async.css create mode 100644 test/cases/filename-with-template/expected/async.css create mode 100644 test/cases/filename-with-template/expected/main.css create mode 100644 test/cases/filename-with-template/index.js create mode 100644 test/cases/filename-with-template/style.css create mode 100644 test/cases/filename-with-template/webpack.config.js create mode 100644 test/cases/filename-without-template/async.css create mode 100644 test/cases/filename-without-template/expected/1.main.css create mode 100644 test/cases/filename-without-template/expected/main.css create mode 100644 test/cases/filename-without-template/index.js create mode 100644 test/cases/filename-without-template/style.css create mode 100644 test/cases/filename-without-template/webpack.config.js rename test/cases/hmr/expected/{ => webpack-4}/main.css (100%) rename test/cases/hmr/expected/{ => webpack-4}/main.js (100%) create mode 100644 test/cases/hmr/expected/webpack-5/main.css create mode 100644 test/cases/hmr/expected/webpack-5/main.js create mode 100644 test/cases/ignoreOrderFalse/e3.css create mode 100644 test/cases/ignoreOrderFalse/index3.js create mode 100644 test/cases/ignoreOrderFalse/warnings.js create mode 100644 test/cases/ignoreOrderFalseWithoutGoodChunks/e1.css create mode 100644 test/cases/ignoreOrderFalseWithoutGoodChunks/e2.css create mode 100644 test/cases/ignoreOrderFalseWithoutGoodChunks/e3.css create mode 100644 test/cases/ignoreOrderFalseWithoutGoodChunks/e4.css create mode 100644 test/cases/ignoreOrderFalseWithoutGoodChunks/expected/styles.css create mode 100644 test/cases/ignoreOrderFalseWithoutGoodChunks/index.js create mode 100644 test/cases/ignoreOrderFalseWithoutGoodChunks/index2.js create mode 100644 test/cases/ignoreOrderFalseWithoutGoodChunks/index3.js create mode 100644 test/cases/ignoreOrderFalseWithoutGoodChunks/index4.js create mode 100644 test/cases/ignoreOrderFalseWithoutGoodChunks/warnings.js create mode 100644 test/cases/ignoreOrderFalseWithoutGoodChunks/webpack.config.js rename test/cases/js-hash/expected/{style.bd79177c6f3a3eac7e30.css => style.922798e08e96756adb4a.1.css} (100%) rename test/cases/js-hash/expected/{style.797a7f363182ad9c5fdf.css => style.fe78b7a6c50df391f00c.2.css} (100%) create mode 100644 test/cases/no-source-map/expected/main.css create mode 100644 test/cases/no-source-map/index.js create mode 100644 test/cases/no-source-map/style.css create mode 100644 test/cases/no-source-map/webpack.config.js create mode 100644 test/cases/simple-commonjs-syntax/expected/main.css create mode 100644 test/cases/simple-commonjs-syntax/index.js create mode 100644 test/cases/simple-commonjs-syntax/style.css create mode 100644 test/cases/simple-commonjs-syntax/webpack.config.js create mode 100644 test/cases/simple-css-modules-mode-global/expected/main.css create mode 100644 test/cases/simple-css-modules-mode-global/index.js create mode 100644 test/cases/simple-css-modules-mode-global/style.css create mode 100644 test/cases/simple-css-modules-mode-global/webpack.config.js create mode 100644 test/cases/simple-css-modules-mode-local/expected/main.css create mode 100644 test/cases/simple-css-modules-mode-local/index.js create mode 100644 test/cases/simple-css-modules-mode-local/style.css create mode 100644 test/cases/simple-css-modules-mode-local/webpack.config.js create mode 100644 test/cases/simple-css-modules-mode-pure/expected/main.css create mode 100644 test/cases/simple-css-modules-mode-pure/index.js create mode 100644 test/cases/simple-css-modules-mode-pure/style.css create mode 100644 test/cases/simple-css-modules-mode-pure/webpack.config.js create mode 100644 test/cases/simple-es-module-syntax/expected/main.css create mode 100644 test/cases/simple-es-module-syntax/index.js create mode 100644 test/cases/simple-es-module-syntax/style.css create mode 100644 test/cases/simple-es-module-syntax/webpack.config.js rename test/cases/split-chunks/expected/{vendors~main.css => vendors.css} (100%) create mode 100644 test/fixtures/simple.css create mode 100644 test/fixtures/simple.js create mode 100644 test/helpers/compile.js create mode 100644 test/helpers/getCompiler.js create mode 100644 test/helpers/index.js create mode 100644 test/manual/src/simple.css create mode 100644 test/manual/src/simple.module.css create mode 100644 test/validate-loader-options.test.js create mode 100644 test/validate-plugin-options.test.js diff --git a/CHANGELOG.md b/CHANGELOG.md index 3572439c..e4056fb7 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -2,6 +2,29 @@ All notable changes to this project will be documented in this file. See [standard-version](https://github.com/conventional-changelog/standard-version) for commit guidelines. +### [0.9.0](https://github.com/webpack-contrib/mini-css-extract-plugin/compare/v0.8.2...v0.9.0) (2019-12-20) + + +### Features + +* new `esModule` option ([#475](https://github.com/webpack-contrib/mini-css-extract-plugin/issues/475)) ([596e47a](https://github.com/webpack-contrib/mini-css-extract-plugin/commit/596e47a8aead53f9cc0e2b1e09a2c20e455e45c1)) + +### [0.8.2](https://github.com/webpack-contrib/mini-css-extract-plugin/compare/v0.8.1...v0.8.2) (2019-12-17) + + +### Bug Fixes + +* context for dependencies ([#474](https://github.com/webpack-contrib/mini-css-extract-plugin/issues/474)) ([0269860](https://github.com/webpack-contrib/mini-css-extract-plugin/commit/0269860adb0eaad477901188eea66693fedf7769)) + +### [0.8.1](https://github.com/webpack-contrib/mini-css-extract-plugin/compare/v0.8.0...v0.8.1) (2019-12-17) + + +### Bug Fixes + +* use filename mutated after instantiation ([#430](https://github.com/webpack-contrib/mini-css-extract-plugin/issues/430)) ([0bacfac](https://github.com/webpack-contrib/mini-css-extract-plugin/commit/0bacfac7ef4a06b4810fbc140875f7a038caa5bc)) +* improve warning of conflict order ([#465](https://github.com/webpack-contrib/mini-css-extract-plugin/issues/465)) ([357d073](https://github.com/webpack-contrib/mini-css-extract-plugin/commit/357d073bf0259f2c44e613ad4dfcbcc8354e4be3)) +* support ES module syntax ([#472](https://github.com/webpack-contrib/mini-css-extract-plugin/issues/472)) ([2f72e1a](https://github.com/webpack-contrib/mini-css-extract-plugin/commit/2f72e1aa267de23f121441714e88406f579e77b2)) + ## [0.8.0](https://github.com/webpack-contrib/mini-css-extract-plugin/compare/v0.7.0...v0.8.0) (2019-07-16) diff --git a/README.md b/README.md index 87415504..094b97a0 100644 --- a/README.md +++ b/README.md @@ -1,5 +1,4 @@ [![npm][npm]][npm-url] +[![node][node]][node-url] [![deps][deps]][deps-url] [![tests][tests]][tests-url] [![coverage][cover]][cover-url] [![chat][chat]][chat-url] +[![size][size]][size-url] + +# mini-css-extract-plugin This plugin extracts CSS into separate files. It creates a CSS file per JS file which contains CSS. It supports On-Demand-Loading of CSS and SourceMaps. @@ -24,29 +27,176 @@ Compared to the extract-text-webpack-plugin: - Easier to use - Specific to CSS -

Install

+## Getting Started + +To begin, you'll need to install `mini-css-extract-plugin`: ```bash npm install --save-dev mini-css-extract-plugin ``` -

Usage

+It's recommended to combine `mini-css-extract-plugin` with the [`css-loader`](https://github.com/webpack-contrib/css-loader) + +Then add the loader and the plugin to your `webpack` config. For example: + +**style.css** + +```css +body { + background: green; +} +``` + +**component.js** + +```js +import './style.css'; +``` + +**webpack.config.js** + +```js +const MiniCssExtractPlugin = require('mini-css-extract-plugin'); + +module.exports = { + plugins: [new MiniCssExtractPlugin()], + module: { + rules: [ + { + test: /\.css$/i, + use: [MiniCssExtractPlugin.loader, 'css-loader'], + }, + ], + }, +}; +``` -### Configuration +## Options -#### `publicPath` +### `publicPath` Type: `String|Function` Default: the `publicPath` in `webpackOptions.output` Specifies a custom public path for the target file(s). -#### Minimal example +#### `String` **webpack.config.js** ```js const MiniCssExtractPlugin = require('mini-css-extract-plugin'); + +module.exports = { + plugins: [ + new MiniCssExtractPlugin({ + // Options similar to the same options in webpackOptions.output + // both options are optional + filename: '[name].css', + chunkFilename: '[id].css', + }), + ], + module: { + rules: [ + { + test: /\.css$/, + use: [ + { + loader: MiniCssExtractPlugin.loader, + options: { + publicPath: '/public/path/to/', + }, + }, + 'css-loader', + ], + }, + ], + }, +}; +``` + +#### `Function` + +**webpack.config.js** + +```js +const MiniCssExtractPlugin = require('mini-css-extract-plugin'); + +module.exports = { + plugins: [ + new MiniCssExtractPlugin({ + // Options similar to the same options in webpackOptions.output + // both options are optional + filename: '[name].css', + chunkFilename: '[id].css', + }), + ], + module: { + rules: [ + { + test: /\.css$/, + use: [ + { + loader: MiniCssExtractPlugin.loader, + options: { + publicPath: (resourcePath, context) => { + return path.relative(path.dirname(resourcePath), context) + '/'; + }, + }, + }, + 'css-loader', + ], + }, + ], + }, +}; +``` + +### `esModule` + +Type: `Boolean` +Default: `false` + +By default, `mini-css-extract-plugin` generates JS modules that use the CommonJS modules syntax. +There are some cases in which using ES modules is beneficial, like in the case of [module concatenation](https://webpack.js.org/plugins/module-concatenation-plugin/) and [tree shaking](https://webpack.js.org/guides/tree-shaking/). + +You can enable a ES module syntax using: + +**webpack.config.js** + +```js +const MiniCssExtractPlugin = require('mini-css-extract-plugin'); + +module.exports = { + plugins: [new MiniCssExtractPlugin()], + module: { + rules: [ + { + test: /\.css$/i, + use: [ + { + loader: MiniCssExtractPlugin.loader, + options: { + esModule: true, + }, + }, + 'css-loader', + ], + }, + ], + }, +}; +``` + +## Examples + +### Minimal example + +**webpack.config.js** + +```js +const MiniCssExtractPlugin = require('mini-css-extract-plugin'); + module.exports = { plugins: [ new MiniCssExtractPlugin({ @@ -79,12 +229,13 @@ module.exports = { }; ``` -#### `publicPath` function example +### The `publicPath` option as function **webpack.config.js** ```js const MiniCssExtractPlugin = require('mini-css-extract-plugin'); + module.exports = { plugins: [ new MiniCssExtractPlugin({ @@ -118,7 +269,7 @@ module.exports = { }; ``` -#### Advanced configuration example +### Advanced configuration example This plugin should be used only on `production` builds without `style-loader` in the loaders chain, especially if you want to have HMR in `development`. @@ -162,16 +313,21 @@ module.exports = { }; ``` -#### Hot Module Reloading (HMR) +### Hot Module Reloading (HMR) -extract-mini-css-plugin supports hot reloading of actual css files in development. Some options are provided to enable HMR of both standard stylesheets and locally scoped CSS or CSS modules. Below is an example configuration of mini-css for HMR use with CSS modules. +The `mini-css-extract-plugin` supports hot reloading of actual css files in development. +Some options are provided to enable HMR of both standard stylesheets and locally scoped CSS or CSS modules. +Below is an example configuration of mini-css for HMR use with CSS modules. -While we attempt to hmr css-modules. It is not easy to perform when code-splitting with custom chunk names. `reloadAll` is an option that should only be enabled if HMR isn't working correctly. The core challenge with css-modules is that when code-split, the chunk ids can and do end up different compared to the filename. +While we attempt to hmr css-modules. It is not easy to perform when code-splitting with custom chunk names. +`reloadAll` is an option that should only be enabled if HMR isn't working correctly. +The core challenge with css-modules is that when code-split, the chunk ids can and do end up different compared to the filename. **webpack.config.js** ```js const MiniCssExtractPlugin = require('mini-css-extract-plugin'); + module.exports = { plugins: [ new MiniCssExtractPlugin({ @@ -205,7 +361,8 @@ module.exports = { ### Minimizing For Production -To minify the output, use a plugin like [optimize-css-assets-webpack-plugin](https://github.com/NMFR/optimize-css-assets-webpack-plugin). Setting `optimization.minimizer` overrides the defaults provided by webpack, so make sure to also specify a JS minimizer: +To minify the output, use a plugin like [optimize-css-assets-webpack-plugin](https://github.com/NMFR/optimize-css-assets-webpack-plugin). +Setting `optimization.minimizer` overrides the defaults provided by webpack, so make sure to also specify a JS minimizer: **webpack.config.js** @@ -213,6 +370,7 @@ To minify the output, use a plugin like [optimize-css-assets-webpack-plugin](htt const TerserJSPlugin = require('terser-webpack-plugin'); const MiniCssExtractPlugin = require('mini-css-extract-plugin'); const OptimizeCSSAssetsPlugin = require('optimize-css-assets-webpack-plugin'); + module.exports = { optimization: { minimizer: [new TerserJSPlugin({}), new OptimizeCSSAssetsPlugin({})], @@ -234,9 +392,7 @@ module.exports = { }; ``` -### Features - -#### Using preloaded or inlined CSS +### Using preloaded or inlined CSS The runtime code detects already added CSS via `` or `