root
/
ice
mirror of https://github.com/alibaba/ice.git
1
0
Fork 0
Code Issues Actions Packages Projects Releases Wiki Activity

fix: remove deprecated apis of webpack5 (#4081) 

* fix: auto detect for webpack5

* refactor: plugin-webpack5

* fix: remove dependencies
This commit is contained in:
ClarkXia 2021-02-22 14:05:41 +08:00 committed by GitHub
parent b486cf07f1
commit 0248042e68
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
13 changed files with 100 additions and 95 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
packages/build-user-config/package.json
View File

@ -7,7 +7,9 @@
"main": "lib/index.js",
"dependencies": {
"@babel/plugin-transform-runtime": "^7.6.2",
"@builder/app-helpers": "^2.0.0",
"add-asset-html-webpack-plugin": "^3.1.3",
"babel-loader": "^8.0.6",
"chalk": "^4.0.0",
"copy-webpack-plugin": "^5.0.4",
"core-js": "^3.3.1",
@ -26,9 +28,7 @@
"regenerator-runtime": "^0.13.3",
"webpack-bundle-analyzer": "^3.6.0",
"webpack-dev-mock": "^1.0.1",
"webpack-plugin-import": "^0.2.6",
"@builder/app-helpers": "^2.0.0",
"babel-loader": "^8.0.6"
"webpack-plugin-import": "^0.2.6"
},
"files": [
"lib"

2
packages/build-user-config/src/config/user.config.js
View File

@ -224,5 +224,5 @@ module.exports = [
{
name: 'modularImportRuntime',
validation: 'boolean',
}
},
];

2
packages/plugin-fusion/package.json
View File

@ -24,7 +24,7 @@
"resolve-sass-import": "^0.1.0",
"semver": "^6.1.0",
"webpack-plugin-import": "^0.2.5",
"webpack-sources": "^1.3.0"
"webpack-sources": "^2.0.0"
},
"peerDependencies": {
"node-sass": "^4.9.0",

2
packages/plugin-fusion/src/index.js
View File

@ -9,7 +9,7 @@ const getThemeCode = require('./utils/getThemeCode');
const getCalcVars = require('./utils/getCalcVars');
function normalizeEntry(entry, preparedChunks) {
const preparedName = preparedChunks
const preparedName = (preparedChunks || [])
.filter((module) => {
return typeof module.name !== 'undefined';
})

50
packages/plugin-fusion/src/webpackPlugins/appendStyleWebpackPlugin.js
View File

@ -1,7 +1,7 @@
/* eslint-disable no-underscore-dangle, no-useless-escape */
const assert = require('assert');
const ConcatSource = require('webpack-sources').ConcatSource;
const { ConcatSource, RawSource } = require('webpack-sources');
const fs = require('fs');
const path = require('path');
const sass = require('node-sass');
@ -86,22 +86,17 @@ module.exports = class AppendStylePlugin {
}
compiler.hooks.compilation.tap('compilation', (compilation) => {
const processEntryChunk = (chunks, done) => {
chunks.forEach((chunk) => {
chunk.files.forEach((fileName) => {
if (
distMatch(
fileName,
compilerEntry,
compilation.preparedEntrypoints || compilation._preparedEntrypoints,
)
) {
const css = this.compileToCSS(srcFile, variableFile);
this.wrapFile(compilation, fileName, css);
}
});
});
done();
const wrapStyleContent = (fileName) => {
if (
distMatch(
fileName,
compilerEntry,
compilation._preparedEntrypoints,
)
) {
const css = this.compileToCSS(srcFile, variableFile);
this.wrapFile(compilation, fileName, css);
}
};
// compatible with webpack 5
if (typeof compilation.hooks.processAssets !== 'undefined') {
@ -110,11 +105,24 @@ module.exports = class AppendStylePlugin {
compilation.hooks.processAssets.tapAsync({
name: 'optimize-chunk-assets',
stage: Compilation.PROCESS_ASSETS_STAGE_OPTIMIZE
}, processEntryChunk);
}, (assets, done) => {
const fileNames = Object.keys(assets);
fileNames.forEach((fileName) => {
wrapStyleContent(fileName);
});
done();
});
} else {
compilation.hooks.optimizeChunkAssets.tapAsync(
'optimize-chunk-assets',
processEntryChunk,
(chunks, done) => {
chunks.forEach((chunk) => {
chunk.files.forEach((fileName) => {
wrapStyleContent(fileName);
});
});
done();
},
);
}
});
@ -124,13 +132,13 @@ module.exports = class AppendStylePlugin {
// 默认按照底部添加的来
if (this.appendPosition === 'header') {
compilation.assets[fileName] = new ConcatSource(
String(content),
new RawSource(String(content)),
compilation.assets[fileName],
);
} else {
compilation.assets[fileName] = new ConcatSource(
compilation.assets[fileName],
String(content),
new RawSource(String(content)),
);
}
}

1
packages/plugin-webpack5/package.json
View File

@ -20,7 +20,6 @@
"typescript": "^4.0.0"
},
"dependencies": {
"html-webpack-plugin": "^4.3.0",
"path-browserify": "^1.0.1"
}
}

22
packages/plugin-webpack5/src/index.ts
View File

@ -1,31 +1,23 @@
import { IPlugin } from '@alib/build-scripts';
import * as HtmlWebpackPlugin from 'html-webpack-plugin';
const plugin: IPlugin = ({ onGetWebpackConfig }) => {
onGetWebpackConfig((config) => {
if (config.plugins.get('HtmlWebpackPlugin')) {
// use html-webpack-plugin which compatible with webpack5
const pluginConfig = { ...config.plugin('HtmlWebpackPlugin').get('args')[0] };
config.plugins.delete('HtmlWebpackPlugin');
config.plugin('HtmlWebpackPlugin').use(HtmlWebpackPlugin, [pluginConfig]);
}
// compatible with process
config
.plugin('DefinePlugin')
// @ts-ignore
.tap(([args]) => [{
...args,
.tap(([args]) => [{
process: JSON.stringify({}),
'process.env': JSON.stringify({})},
]);
if (config.plugins.get('WebpackPluginImport')) {
// WebpackPluginImport is not compatible with webpack5
config.plugins.delete('WebpackPluginImport');
}
'process.env': JSON.stringify({}),
...args,
}]);
// BREAKING CHANGE: webpack < 5 used to include polyfills for node.js core modules by default.
// This is no longer the case. Verify if you need these module and configure a polyfill for it.
config.resolve.alias.set('path', 'path-browserify');
// remove CaseSensitivePathsPlugin which do not compatible with webpack 5
config.plugins.delete('CaseSensitivePathsPlugin');
});
};

4
packages/plugin-wrap-code/package.json
View File

@ -1,6 +1,6 @@
{
"name": "build-plugin-wrap-code",
"version": "0.1.1",
"version": "0.1.2",
"description": "build plugin for inject code to files",
"main": "lib/index.js",
"scripts": {
@ -13,7 +13,7 @@
"author": "",
"license": "ISC",
"dependencies": {
"webpack-sources": "^1.3.0"
"webpack-sources": "^2.0.0"
},
"peerDependencies": {
"webpack": "^4.0.0"

29
packages/plugin-wrap-code/src/wrapCodeWebpackPlugin.js
View File

@ -1,5 +1,5 @@
const assert = require('assert');
const ConcatSource = require('webpack-sources').ConcatSource;
const { ConcatSource, RawSource } = require('webpack-sources');
module.exports = class WrapCodePlugin {
constructor(options) {
@ -24,20 +24,18 @@ module.exports = class WrapCodePlugin {
const codeAfter = typeof addCodeAfter === 'function' ?
addCodeAfter(fileName, entry, compilation) : addCodeAfter;
compilation.assets[fileName] = new ConcatSource(
String(codeBefore),
new RawSource(String(codeBefore)),
compilation.assets[fileName],
String(codeAfter),
new RawSource(String(codeAfter)),
);
};
const wrapChunks = (compilation, chunks) => {
chunks.forEach((chunk) => {
chunk.files.forEach((fileName) => {
// only wrap code when file is match
if (this.fileMatch(fileName, entry, compilation)) {
wrapFile(compilation, fileName);
}
});
const wrapChunks = (compilation, fileNames) => {
fileNames.forEach((fileName) => {
// only wrap code when file is match
if (this.fileMatch(fileName, entry, compilation)) {
wrapFile(compilation, fileName);
}
});
};
@ -49,12 +47,15 @@ module.exports = class WrapCodePlugin {
compilation.hooks.processAssets.tap({
name: 'WrapCodePlugin',
stage: Compilation.PROCESS_ASSETS_STAGE_OPTIMIZE
}, (chunks) => {
wrapChunks(compilation, chunks);
}, (assets) => {
const fileNames = Object.keys(assets);
wrapChunks(compilation, fileNames);
});
} else {
compilation.hooks.optimizeChunkAssets.tap('WrapCodePlugin', (chunks) => {
wrapChunks(compilation, chunks);
chunks.forEach((chunk) => {
wrapChunks(compilation, chunk.files);
});
});
}
});

2
packages/webpack-plugin-extract-css-assets/package.json
View File

@ -27,6 +27,6 @@
"postcss": "^7.0.32",
"request": "^2.87.0",
"request-promise": "^4.2.2",
"webpack-sources": "^1.1.0"
"webpack-sources": "^2.0.0"
}
}

4
packages/webpack-plugin-import/package.json
View File

@ -1,6 +1,6 @@
{
"name": "webpack-plugin-import",
"version": "0.2.6",
"version": "0.2.7",
"main": "lib/index.js",
"scripts": {
"test": "echo \"test\"",
@ -19,4 +19,4 @@
"publishConfig": {
"access": "public"
}
}
}

61
packages/webpack-plugin-import/src/webpack-plugin-import.js
View File

@ -56,49 +56,46 @@ module.exports = class WebpackPluginImport {
compiler.hooks.normalModuleFactory.tap(
'normal-module-factory',
(NormalModuleFactory) => {
NormalModuleFactory.hooks.afterResolve.tapPromise(
NormalModuleFactory.hooks.afterResolve.tap(
'after-resolve',
(result = {}) => {
return new Promise((resolve) => {
if (result.loaders && /\.(ts|js)x?$/i.test(result.resource)) {
let needAdditionalStyle = false;
let stylePath = 'style.js';
if (result.loaders && /\.(ts|js)x?$/i.test(result.resource)) {
let needAdditionalStyle = false;
let stylePath = 'style.js';
const matchedIndex = this.options.findIndex((opt) => {
return this.libraryCheck(result, opt);
});
const matchedIndex = this.options.findIndex((opt) => {
return this.libraryCheck(result, opt);
});
if (matchedIndex > -1) {
const matchedLibrary = this.options[matchedIndex];
if (matchedLibrary.stylePath) {
stylePath = matchedLibrary.stylePath;
}
if (matchedIndex > -1) {
const matchedLibrary = this.options[matchedIndex];
if (matchedLibrary.stylePath) {
stylePath = matchedLibrary.stylePath;
}
needAdditionalStyle = true;
}
if (!needAdditionalStyle) {
const customStylePath = this.getStylePath(result);
if (customStylePath) {
stylePath = customStylePath;
needAdditionalStyle = true;
}
}
if (!needAdditionalStyle) {
const customStylePath = this.getStylePath(result);
if (customStylePath) {
stylePath = customStylePath;
needAdditionalStyle = true;
}
}
if (needAdditionalStyle) {
const modPath = path.join(
path.dirname(result.resource),
stylePath
);
if (needAdditionalStyle) {
const modPath = path.join(
path.dirname(result.resource),
stylePath
if (fileExists(modPath)) {
result.loaders.push(
`${webpackLoaderRequire}?mod=${modPath}`
);
if (fileExists(modPath)) {
result.loaders.push(
`${webpackLoaderRequire}?mod=${modPath}`
);
}
}
}
resolve(result);
});
}
}
);
}

10
yarn.lock
View File

@ -15998,7 +15998,7 @@ sort-keys@^2.0.0:
dependencies:
is-plain-obj "^1.0.0"
source-list-map@^2.0.0:
source-list-map@^2.0.0, source-list-map@^2.0.1:
version "2.0.1"
resolved "https://registry.npm.taobao.org/source-list-map/download/source-list-map-2.0.1.tgz#3993bd873bfc48479cca9ea3a547835c7c154b34"
integrity sha1-OZO9hzv8SEecyp6jpUeDXHwVSzQ=
@ -18028,6 +18028,14 @@ webpack-sources@^1.1.0, webpack-sources@^1.3.0, webpack-sources@^1.4.0, webpack-
source-list-map "^2.0.0"
source-map "~0.6.1"
webpack-sources@^2.0.0:
version "2.2.0"
resolved "https://registry.npm.taobao.org/webpack-sources/download/webpack-sources-2.2.0.tgz?cache=0&sync_timestamp=1603965313080&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fwebpack-sources%2Fdownload%2Fwebpack-sources-2.2.0.tgz#058926f39e3d443193b6c31547229806ffd02bac"
integrity sha1-BYkm8549RDGTtsMVRyKYBv/QK6w=
dependencies:
source-list-map "^2.0.1"
source-map "^0.6.1"
webpack@^4.27.1, webpack@^4.35.3, webpack@^4.41.1:
version "4.46.0"
resolved "https://registry.npm.taobao.org/webpack/download/webpack-4.46.0.tgz?cache=0&sync_timestamp=1611699118823&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fwebpack%2Fdownload%2Fwebpack-4.46.0.tgz#bf9b4404ea20a073605e0a011d188d77cb6ad542"