Commit 4457fd4a authored by 邓晓峰's avatar 邓晓峰

chore: 升级webpack5

parent dc11cf7b
const { join } = require('path');
const proxy = require('./proxy'); const proxy = require('./proxy');
const slash = require('slash2'); const slash = require('slash2');
const defaultSetting = require('./defaultSetting'); const defaultSetting = require('./defaultSetting');
function resolve (dir) {
return join(__dirname, '../', dir)
}
const { REACT_APP_ENV } = process.env; const { REACT_APP_ENV } = process.env;
module.exports = { module.exports = {
// mfsu: {},
webpack5: {},
base: '/civbase', base: '/civbase',
title: '熊猫智慧城市监控管理解决方案', title: '熊猫智慧城市监控管理解决方案',
hash: true, hash: true,
...@@ -29,8 +28,8 @@ module.exports = { ...@@ -29,8 +28,8 @@ module.exports = {
// }, // },
ignoreMomentLocale: true, ignoreMomentLocale: true,
nodeModulesTransform: { nodeModulesTransform: {
type: 'all', type: 'none',
// exclude: ['@wisdom-map/arcgismap', '@wisdom-map/arcgismap/lib/arcgisapi'], exclude: ['@wisdom-map/arcgismap', '@wisdom-map/arcgismap/lib/arcgisapi', 'swagger-ui-react'],
}, },
proxy: proxy[REACT_APP_ENV || 'dev'], proxy: proxy[REACT_APP_ENV || 'dev'],
// openAPI: { // openAPI: {
...@@ -77,5 +76,6 @@ module.exports = { ...@@ -77,5 +76,6 @@ module.exports = {
}, },
javascriptEnabled: true javascriptEnabled: true
}, },
workerLoader: {}
// esbuild: {} // esbuild: {}
}; };
/* eslint-disable */ /* eslint-disable */
// const proxyURL = process.env.NODE_ENV !== 'production' ? 'http://192.168.10.150:8777' : window.location.origin; // const proxyURL = process.env.NODE_ENV !== 'production' ? 'http://192.168.10.150:8777' : window.location.origin;
const proxyURL = 'http://192.168.10.156:8666'; const proxyURL = 'http://192.168.10.156:8666';
module.exports = { module.exports = {
assetsRoot: process.env.NODE_ENV !== 'production' ? proxyURL : './', assetsRoot: process.env.NODE_ENV !== 'production' ? proxyURL : './',
dev: { dev: {
......
...@@ -13,9 +13,6 @@ class DevCompileDonePlugin { ...@@ -13,9 +13,6 @@ class DevCompileDonePlugin {
if (process.env.SYSTEM_BELL !== 'none') { if (process.env.SYSTEM_BELL !== 'none') {
process.stdout.write('\x07'); process.stdout.write('\x07');
} }
this.opts.onCompileFail && this.opts.onCompileFail({
stats,
});
return; return;
} }
...@@ -34,7 +31,6 @@ class DevCompileDonePlugin { ...@@ -34,7 +31,6 @@ class DevCompileDonePlugin {
copied = chalk.red(`(copy to clipboard failed)`); copied = chalk.red(`(copy to clipboard failed)`);
} }
console.log();
console.log( console.log(
[ [
` App running at:`, ` App running at:`,
...@@ -44,13 +40,17 @@ class DevCompileDonePlugin { ...@@ -44,13 +40,17 @@ class DevCompileDonePlugin {
.filter(Boolean) .filter(Boolean)
.join('\n'), .join('\n'),
); );
process.send && process.send({
type: 'DONE'
});
isFirstCompile = false;
} }
this.opts.onCompileDone && this.opts.onCompileDone({ // this.opts.onCompileDone && this.opts.onCompileDone({
isFirstCompile, // isFirstCompile,
stats, // stats,
}); // });
if(isFirstCompile) { if(isFirstCompile) {
isFirstCompile = false; isFirstCompile = false;
// process.send({ // process.send({
......
...@@ -103,15 +103,45 @@ module.exports = options => { ...@@ -103,15 +103,45 @@ module.exports = options => {
useHash ? `[name].[contenthash:8].async.js` : `[name].js`, useHash ? `[name].[contenthash:8].async.js` : `[name].js`,
) )
.publicPath(`/${pkg.name.toLocaleLowerCase()}/`) .publicPath(`/${pkg.name.toLocaleLowerCase()}/`)
.futureEmitAssets(true) // .futureEmitAssets(true)
.crossOriginLoading('anonymous') .crossOriginLoading('anonymous')
.pathinfo(isDev || disableCompress); .pathinfo(isDev || disableCompress);
if(!isWebpack5) {
chainConfig.output.futureEmitAssets(true)
}
if(isWebpack5) {
chainConfig.cache({
type: 'filesystem',
buildDependencies: {
config: [
__filename,
path.join(process.cwd(), 'package.json')
]
},
cacheDirectory: path.resolve(process.cwd(), 'node_modules/.cache')
})
}
chainConfig.resolve.modules chainConfig.resolve.modules
.add('node_modules') .add('node_modules')
.add('src') .add('src')
.end() .end()
.extensions.merge(['.js', '.jsx', '.react.js']) .extensions.merge([
'.js',
'.jsx',
'.react.js',
'.web.js',
'.wasm',
'.mjs',
'.js',
'.web.jsx',
'.jsx',
'.web.ts',
'.ts',
'.web.tsx',
'.tsx',
'.json'
])
.end() .end()
.mainFields.merge(['browser', 'jsnext:main', 'main']); .mainFields.merge(['browser', 'jsnext:main', 'main']);
...@@ -171,8 +201,7 @@ module.exports = options => { ...@@ -171,8 +201,7 @@ module.exports = options => {
reactRequire: true, reactRequire: true,
lockCoreJS3: {}, lockCoreJS3: {},
import: (presetOpts.import || []).concat([ import: (presetOpts.import || []).concat([
{ libraryName: 'antd', libraryDirectory: 'es', style: true }, { libraryName: 'antd', libraryDirectory: 'es', style: true }
{ libraryName: 'antd-mobile', libraryDirectory: 'es', style: true },
]), ]),
}); });
...@@ -197,6 +226,7 @@ module.exports = options => { ...@@ -197,6 +226,7 @@ module.exports = options => {
]).end() ]).end()
.exclude .exclude
.add(/node_modules/) .add(/node_modules/)
.add(/\.mfsu/)
.end() .end()
.use('babel-loader') .use('babel-loader')
.loader(require.resolve('@umijs/deps/compiled/babel-loader')) .loader(require.resolve('@umijs/deps/compiled/babel-loader'))
...@@ -297,7 +327,7 @@ module.exports = options => { ...@@ -297,7 +327,7 @@ module.exports = options => {
.rule('worker') .rule('worker')
.test(/.*worker.(ts|js)/) .test(/.*worker.(ts|js)/)
.use('worker-loader') .use('worker-loader')
.loader(require.resolve('worker-loader')) .loader(require.resolve('@umijs/deps/compiled/worker-loader'))
.options(defineConfig.workerLoader); .options(defineConfig.workerLoader);
} }
...@@ -315,7 +345,7 @@ module.exports = options => { ...@@ -315,7 +345,7 @@ module.exports = options => {
if (defineConfig.externals) { if (defineConfig.externals) {
chainConfig.externals(defineConfig.externals); chainConfig.externals(defineConfig.externals);
} }
if(!isWebpack5) {
chainConfig.node.merge({ chainConfig.node.merge({
setImmediate: false, setImmediate: false,
module: 'empty', module: 'empty',
...@@ -329,6 +359,8 @@ module.exports = options => { ...@@ -329,6 +359,8 @@ module.exports = options => {
child_process: 'empty', child_process: 'empty',
...options.node, ...options.node,
}); });
}
if (defineConfig.ignoreMomentLocale) { if (defineConfig.ignoreMomentLocale) {
chainConfig.plugin('ignore-moment-locale').use(webpack.IgnorePlugin, [ chainConfig.plugin('ignore-moment-locale').use(webpack.IgnorePlugin, [
...@@ -655,6 +687,8 @@ module.exports = options => { ...@@ -655,6 +687,8 @@ module.exports = options => {
}); });
} }
// if (defineConfig.chunks) { // if (defineConfig.chunks) {
// chainConfig // chainConfig
// .plugin('htmlPlugins') // .plugin('htmlPlugins')
...@@ -686,33 +720,29 @@ module.exports = options => { ...@@ -686,33 +720,29 @@ module.exports = options => {
entry.push(require.resolve('./runtimePublicPathEntry')); entry.push(require.resolve('./runtimePublicPathEntry'));
} }
// const nodeLibs = require('node-libs-browser');
const nodeLibs = require('node-libs-browser');
// const ProvidePlugin = webpack.ProvidePlugin; // const ProvidePlugin = webpack.ProvidePlugin;
// if(isWebpack5) { if(isWebpack5) {
// // ret.plugins.push({ ret.plugins.push(
// // new ProvidePlugin({ new webpack.ProvidePlugin({
// // process: nodeLibs['process'] process: nodeLibs['process']
// // }) })
// // }); );
// // ret.plugins.push({ ret.resolve.fallback = {
// // new ProvidePlugin({ ...ret.resolve.fallback,
// // Buffer: ['buffer', 'Buffer'], ...Object.keys(nodeLibs).reduce((memo, key) => {
// // }) if(nodeLibs[key]) {
// // }); memo[key] = nodeLibs[key]
// ret.resolve.fallback = { } else {
// ...ret.resolve.fallback, memo[key] = false
// ...Object.keys(nodeLibs).reduce((memo, key) => { };
// if(nodeLibs[key]) { return memo
// memo[key] = nodeLibs[key] }, {}),
// } else { http: false,
// memo[key] = false https: false,
// }; }
// return memo }
// }, {}),
// http: false,
// https: false,
// }
// }
ret = { ret = {
...ret, ...ret,
......
...@@ -13,8 +13,9 @@ module.exports = require('./webpack.base.babel')({ ...@@ -13,8 +13,9 @@ module.exports = require('./webpack.base.babel')({
path.join(process.cwd(), 'src/app.js'), // Start with js/app.js path.join(process.cwd(), 'src/app.js'), // Start with js/app.js
], ],
optimization: { optimization: {
namedModules: true, // namedModules: true,
namedChunks: true, // namedChunks: true,
chunkIds: "named",
runtimeChunk: { runtimeChunk: {
name: 'runtime', name: 'runtime',
}, },
...@@ -53,13 +54,13 @@ module.exports = require('./webpack.base.babel')({ ...@@ -53,13 +54,13 @@ module.exports = require('./webpack.base.babel')({
}, },
}, },
plugins: [ plugins: [
new CircularDependencyPlugin({ // new CircularDependencyPlugin({
exclude: /node_modules/, // exclude: /node_modules/,
include: /src/, // include: /src/,
failOnError: false, // failOnError: false,
allowAsyncCycles: false, // allowAsyncCycles: false,
cwd: process.cwd(), // cwd: process.cwd(),
}), // }),
], ],
devtool: 'cheap-module-source-map', devtool: 'cheap-module-source-map',
node: { node: {
......
// Important modules this config uses // Important modules this config uses
const path = require('path'); const path = require('path');
const { HashedModuleIdsPlugin } = require('webpack'); const webpack = require('webpack');
const TerserPlugin = require('terser-webpack-plugin'); const TerserPlugin = require('terser-webpack-plugin');
const CompressionPlugin = require('compression-webpack-plugin'); const CompressionPlugin = require('compression-webpack-plugin');
module.exports = require('./webpack.base.babel')({ module.exports = require('./webpack.base.babel')({
...@@ -27,6 +27,9 @@ module.exports = require('./webpack.base.babel')({ ...@@ -27,6 +27,9 @@ module.exports = require('./webpack.base.babel')({
compress: { compress: {
comparisons: false, comparisons: false,
}, },
drop_debugger: true,
drop_console: true,
pure_funcs: ['console.log'],
parse: {}, parse: {},
mangle: true, mangle: true,
output: { output: {
...@@ -40,7 +43,8 @@ module.exports = require('./webpack.base.babel')({ ...@@ -40,7 +43,8 @@ module.exports = require('./webpack.base.babel')({
}), }),
], ],
nodeEnv: 'production', nodeEnv: 'production',
namedModules: true, chunkIds: "deterministic",
moduleIds: "deterministic",
usedExports: true, usedExports: true,
sideEffects: true, sideEffects: true,
concatenateModules: true, concatenateModules: true,
...@@ -88,7 +92,7 @@ module.exports = require('./webpack.base.babel')({ ...@@ -88,7 +92,7 @@ module.exports = require('./webpack.base.babel')({
minRatio: 0.8, minRatio: 0.8,
}), }),
new HashedModuleIdsPlugin({ new webpack.ids.HashedModuleIdsPlugin({
hashFunction: 'sha256', hashFunction: 'sha256',
hashDigest: 'hex', hashDigest: 'hex',
hashDigestLength: 20, hashDigestLength: 20,
......
This diff is collapsed.
...@@ -172,9 +172,6 @@ ...@@ -172,9 +172,6 @@
"@umijs/fabric": "^2.2.0", "@umijs/fabric": "^2.2.0",
"@umijs/runtime": "3.3.7", "@umijs/runtime": "3.3.7",
"@umijs/utils": "3.3.7", "@umijs/utils": "3.3.7",
"add-asset-html-webpack-plugin": "3.1.3",
"antd-icon-reduce-loader": "^1.0.6",
"antd-icon-reduce-plugin": "^1.1.1",
"babel-core": "7.0.0-bridge.0", "babel-core": "7.0.0-bridge.0",
"babel-eslint": "10.0.1", "babel-eslint": "10.0.1",
"babel-loader": "8.0.5", "babel-loader": "8.0.5",
...@@ -217,10 +214,9 @@ ...@@ -217,10 +214,9 @@
"express": "^4.17.1", "express": "^4.17.1",
"file-loader": "3.0.1", "file-loader": "3.0.1",
"friendly-errors-webpack-plugin": "^1.7.0", "friendly-errors-webpack-plugin": "^1.7.0",
"fs": "0.0.1-security",
"fs-extra": "^9.0.1", "fs-extra": "^9.0.1",
"html-loader": "0.5.5", "html-loader": "0.5.5",
"html-webpack-plugin": "4.4.0", "html-webpack-plugin": "5.5.0",
"http-proxy-middleware": "^1.0.5", "http-proxy-middleware": "^1.0.5",
"husky": "^2.3.0", "husky": "^2.3.0",
"imports-loader": "0.8.0", "imports-loader": "0.8.0",
...@@ -287,10 +283,10 @@ ...@@ -287,10 +283,10 @@
"traverse": "^0.6.6", "traverse": "^0.6.6",
"umi-webpack-bundle-analyzer": "3.6.0", "umi-webpack-bundle-analyzer": "3.6.0",
"url-loader": "1.1.2", "url-loader": "1.1.2",
"webpack": "4.44.1", "webpack": "^5.65.0",
"webpack-chain": "6.5.1", "webpack-chain": "6.5.1",
"webpack-cli": "3.3.0", "webpack-cli": "4.2.0",
"webpack-dev-middleware": "3.6.2", "webpack-dev-middleware": "5.3.0",
"webpack-hot-middleware": "2.24.3", "webpack-hot-middleware": "2.24.3",
"webpack-manifest-plugin": "^3.0.0", "webpack-manifest-plugin": "^3.0.0",
"webpack-theme-color-replacer": "^1.3.15", "webpack-theme-color-replacer": "^1.3.15",
......
...@@ -10,30 +10,36 @@ function getIgnoredWatchRegExp() { ...@@ -10,30 +10,36 @@ function getIgnoredWatchRegExp() {
} }
function createWebpackMiddleware(compiler, output, config) { function createWebpackMiddleware(compiler, output, config) {
return webpackDevMiddleware(compiler, { return webpackDevMiddleware(compiler, {
logLevel: 'warn', // logLevel: 'warn',
publicPath: output.publicPath, publicPath: output.publicPath,
silent: true, // silent: true,
stats: 'errors-only', stats: 'errors-only',
writeToDisk: config && config.devServer && config.devServer.writeToDisk, writeToDisk: config && config.devServer && config.devServer.writeToDisk,
watchOptions: { // watchOptions: {
ignored: getIgnoredWatchRegExp() // ignored: getIgnoredWatchRegExp()
} // }
}); });
} }
module.exports = function addDevMiddlewares(app, webpackConfig, config, { port= 8080, hostname = '127.0.0.1' }) { module.exports = function addDevMiddlewares(app, webpackConfig, config, { port= 8080, hostname = '127.0.0.1' }) {
if(!config.mfsu) {
webpackConfig.plugins.push( webpackConfig.plugins.push(
new DevCompileDonePlugin({ new DevCompileDonePlugin({
port: (webpackConfig.devServer && webpackConfig.devServer.port) ? (webpackConfig.devServer.port || port): port, port: (webpackConfig.devServer && webpackConfig.devServer.port) ? (webpackConfig.devServer.port || port): port,
hostname: (webpackConfig.devServer && webpackConfig.devServer.hostname ) ? (webpackConfig.devServer.hostname || '127.0.0.1'): hostname, hostname: (webpackConfig.devServer && webpackConfig.devServer.hostname ) ? (webpackConfig.devServer.hostname || '127.0.0.1'): hostname,
onCompileDone({ isFirstCompile, stats }) { onCompileDone({ isFirstCompile, stats }) {
if(isFirstCompile) {
emitter.emit('onDevCompileDone', { isFirstCompile, stats }); emitter.emit('onDevCompileDone', { isFirstCompile, stats });
}
}, },
onCompileFail(error) { onCompileFail(error) {
console.log(error); console.log(error);
}, },
}), }),
) )
}
const compiler = webpack(webpackConfig); const compiler = webpack(webpackConfig);
const middleware = createWebpackMiddleware( const middleware = createWebpackMiddleware(
compiler, compiler,
...@@ -44,8 +50,7 @@ module.exports = function addDevMiddlewares(app, webpackConfig, config, { port= ...@@ -44,8 +50,7 @@ module.exports = function addDevMiddlewares(app, webpackConfig, config, { port=
app.use(middleware); app.use(middleware);
app.use(webpackHotMiddleware(compiler)); app.use(webpackHotMiddleware(compiler));
const fs = middleware.context.outputFileSystem;
const fs = middleware.fileSystem;
app.get('*', (req, res) => { app.get('*', (req, res) => {
fs.readFile(path.join(compiler.outputPath, 'index.html'), (err, file) => { fs.readFile(path.join(compiler.outputPath, 'index.html'), (err, file) => {
......
const { const {
lodash, lodash,
portfinder, portfinder,
createDebug,
} = require('@umijs/utils'); } = require('@umijs/utils');
const express = require('express'); const express = require('express');
const { createProxyMiddleware } = require('http-proxy-middleware'); const { createProxyMiddleware } = require('http-proxy-middleware');
...@@ -10,6 +11,7 @@ const url = require('url'); ...@@ -10,6 +11,7 @@ const url = require('url');
const http = require('http'); const http = require('http');
// const https = require('https'); // const https = require('https');
const sockjs = require('sockjs'); const sockjs = require('sockjs');
const debug = createDebug('umi:server:Server');
const defaultOpts = { const defaultOpts = {
afterMiddlewares: [], afterMiddlewares: [],
beforeMiddlewares: [], beforeMiddlewares: [],
...@@ -135,7 +137,7 @@ class Server { ...@@ -135,7 +137,7 @@ class Server {
); );
} }
setupProxy(proxyOpts, isWatch = false) { setupProxy(proxyOpts, isWatch = true) {
let proxy = proxyOpts || this.opts.proxy; let proxy = proxyOpts || this.opts.proxy;
if (!Array.isArray(proxy)) { if (!Array.isArray(proxy)) {
if (proxy && 'target' in proxy) { if (proxy && 'target' in proxy) {
......
...@@ -2,7 +2,6 @@ import 'whatwg-fetch'; ...@@ -2,7 +2,6 @@ import 'whatwg-fetch';
import './public-path' import './public-path'
import '!file-loader?name=[name].[ext]!./images/favicon.ico'; import '!file-loader?name=[name].[ext]!./images/favicon.ico';
import './global.less'; import './global.less';
// import '@babel/polyfill';
import 'animate.css/animate.css'; import 'animate.css/animate.css';
import 'antd/dist/antd.less'; import 'antd/dist/antd.less';
import 'file-loader?name=.htaccess!./.htaccess'; // eslint-disable-line import/extensions import 'file-loader?name=.htaccess!./.htaccess'; // eslint-disable-line import/extensions
......
...@@ -3,10 +3,10 @@ import 'swagger-ui-react/swagger-ui.css'; ...@@ -3,10 +3,10 @@ import 'swagger-ui-react/swagger-ui.css';
import React from 'react'; import React from 'react';
import { Card } from 'antd'; import { Card } from 'antd';
import SwaggerUI from 'swagger-ui-react'; // import SwaggerUI from 'swagger-ui-react';
export default () => ( export default () => (
<Card> <Card>
<SwaggerUI url={`${window.location.origin}/civ-plugins_openapi.json`} /> {/* <SwaggerUI url={`${window.location.origin}/civ-plugins_openapi.json`} /> */}
</Card> </Card>
); );
...@@ -9,6 +9,7 @@ import Login from './pages/user/login/login'; ...@@ -9,6 +9,7 @@ import Login from './pages/user/login/login';
const namespace = `__PANDA_STORE__${location.hostname}`; const namespace = `__PANDA_STORE__${location.hostname}`;
window.createStoreage = new Storeage(namespace); window.createStoreage = new Storeage(namespace);
export const initGlobalConfig = () => { export const initGlobalConfig = () => {
// eslint-disable-next-line no-debugger // eslint-disable-next-line no-debugger
// eslint-disable-next-line no-undef // eslint-disable-next-line no-undef
createStoreage.remove(`__PANDA_STORE__${location.hostname}`); createStoreage.remove(`__PANDA_STORE__${location.hostname}`);
......
...@@ -39,6 +39,7 @@ class SecurityLayout extends React.Component { ...@@ -39,6 +39,7 @@ class SecurityLayout extends React.Component {
); );
} }
if ((!isLogin && loading) || !isReady) { if ((!isLogin && loading) || !isReady) {
return <PageLoading />; return <PageLoading />;
} }
......
...@@ -487,7 +487,7 @@ window.app.define('@ant-design/pro-utils', require.context('../node_modules/@ant ...@@ -487,7 +487,7 @@ window.app.define('@ant-design/pro-utils', require.context('../node_modules/@ant
window.app.define('@ant-design/pro-layout', require.context('../node_modules/@ant-design/pro-layout/lib', true, /^.\/(lib\/)?[^\/]+\.js$/), 'index.js'); window.app.define('@ant-design/pro-layout', require.context('../node_modules/@ant-design/pro-layout/lib', true, /^.\/(lib\/)?[^\/]+\.js$/), 'index.js');
window.app.define('@ant-design/pro-table', require.context('../node_modules/@ant-design/pro-table/lib', true, /^.\/(lib\/)?[^\/]+\.js$/), 'index.js'); window.app.define('@ant-design/pro-table', require.context('../node_modules/@ant-design/pro-table/lib', true, /^.\/(lib\/)?[^\/]+\.js$/), 'index.js');
window.app.define('@ant-design/pro-provider', require.context('../node_modules/@ant-design/pro-provider/lib', true, /^.\/(lib\/)?[^\/]+\.js$/), 'index.js'); window.app.define('@ant-design/pro-provider', require.context('../node_modules/@ant-design/pro-provider/lib', true, /^.\/(lib\/)?[^\/]+\.js$/), 'index.js');
window.app.define('pinyin-match', require.context('../node_modules/pinyin-match/lib', true, /^.\/(lib\/)?[^\/]+\.js$/), 'main.js'); // window.app.define('pinyin-match', require.context('../node_modules/pinyin-match/lib', true, /^.\/(lib\/)?[^\/]+\.js$/), 'main.js');
window.app.define('react-intl', require.context('../node_modules/react-intl/lib', true, /^.\/(lib\/)?[^\/]+\.js$/), 'index.js'); window.app.define('react-intl', require.context('../node_modules/react-intl/lib', true, /^.\/(lib\/)?[^\/]+\.js$/), 'index.js');
window.app.define('moment', require.context('moment', true, /^.\/moment\.js$/), 'moment.js'); window.app.define('moment', require.context('moment', true, /^.\/moment\.js$/), 'moment.js');
window.app.define('rc-align', require.context('../node_modules/rc-align/lib', true, /^.\/(lib\/)?[^\/]+\.js$/), 'index.js'); window.app.define('rc-align', require.context('../node_modules/rc-align/lib', true, /^.\/(lib\/)?[^\/]+\.js$/), 'index.js');
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment