Skip to content

X
xiaomai-cloud-class-web
Commit 4ab93355 by zhujian
Options

'fixed'

parent c498f5e0
Showing with 88 additions and 78 deletions
config/webpack.config.js
...@@ -13,6 +13,7 @@ const MiniCssExtractPlugin = require('mini-css-extract-plugin'); ...@@ -13,6 +13,7 @@ const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const OptimizeCSSAssetsPlugin = require('optimize-css-assets-webpack-plugin'); const OptimizeCSSAssetsPlugin = require('optimize-css-assets-webpack-plugin');
const safePostCssParser = require('postcss-safe-parser'); const safePostCssParser = require('postcss-safe-parser');
const ManifestPlugin = require('webpack-manifest-plugin'); const ManifestPlugin = require('webpack-manifest-plugin');
const CopyWebpackPlugin = require('copy-webpack-plugin');
const InterpolateHtmlPlugin = require('react-dev-utils/InterpolateHtmlPlugin'); const InterpolateHtmlPlugin = require('react-dev-utils/InterpolateHtmlPlugin');
const WorkboxWebpackPlugin = require('workbox-webpack-plugin'); const WorkboxWebpackPlugin = require('workbox-webpack-plugin');
const WatchMissingNodeModulesPlugin = require('react-dev-utils/WatchMissingNodeModulesPlugin'); const WatchMissingNodeModulesPlugin = require('react-dev-utils/WatchMissingNodeModulesPlugin');
...@@ -52,7 +53,7 @@ const lessModuleRegex = /\.module\.less$/; ...@@ -52,7 +53,7 @@ const lessModuleRegex = /\.module\.less$/;
// This is the production and development configuration. // This is the production and development configuration.
// It is focused on developer experience, fast rebuilds, and a minimal bundle. // It is focused on developer experience, fast rebuilds, and a minimal bundle.
module.exports = function(webpackEnv) { module.exports = function (webpackEnv) {
const isEnvDevelopment = webpackEnv === 'development'; const isEnvDevelopment = webpackEnv === 'development';
const isEnvProduction = webpackEnv === 'production'; const isEnvProduction = webpackEnv === 'production';
...@@ -163,7 +164,7 @@ module.exports = function(webpackEnv) { ...@@ -163,7 +164,7 @@ module.exports = function(webpackEnv) {
// require.resolve('webpack-dev-server/client') + '?/', // require.resolve('webpack-dev-server/client') + '?/',
isEnvDevelopment && require.resolve('webpack/hot/dev-server'), isEnvDevelopment && require.resolve('webpack/hot/dev-server'),
isEnvDevelopment && isEnvDevelopment &&
require.resolve('react-dev-utils/webpackHotDevClient'), require.resolve('react-dev-utils/webpackHotDevClient'),
// Finally, this is your app's code: // Finally, this is your app's code:
paths.appIndexJs, paths.appIndexJs,
// We include the app code last so that if there is a runtime error during // We include the app code last so that if there is a runtime error during
...@@ -189,15 +190,15 @@ module.exports = function(webpackEnv) { ...@@ -189,15 +190,15 @@ module.exports = function(webpackEnv) {
// webpack uses `publicPath` to determine where the app is being served from. // webpack uses `publicPath` to determine where the app is being served from.
// It requires a trailing slash, or the file assets will get an incorrect path. // It requires a trailing slash, or the file assets will get an incorrect path.
// We inferred the "public path" (such as / or /my-project) from homepage. // We inferred the "public path" (such as / or /my-project) from homepage.
publicPath: isEnvDevelopment ? '/' : './', publicPath: isEnvDevelopment ? '/' : './',
// Point sourcemap entries to original disk location (format as URL on Windows) // Point sourcemap entries to original disk location (format as URL on Windows)
devtoolModuleFilenameTemplate: isEnvProduction devtoolModuleFilenameTemplate: isEnvProduction
? info => ? info =>
path path
.relative(paths.appSrc, info.absoluteResourcePath) .relative(paths.appSrc, info.absoluteResourcePath)
.replace(/\\/g, '/') .replace(/\\/g, '/')
: isEnvDevelopment && : isEnvDevelopment &&
(info => path.resolve(info.absoluteResourcePath).replace(/\\/g, '/')), (info => path.resolve(info.absoluteResourcePath).replace(/\\/g, '/')),
// Prevents conflicts when multiple webpack runtimes (from different apps) // Prevents conflicts when multiple webpack runtimes (from different apps)
// are used on the same page. // are used on the same page.
jsonpFunction: `webpackJsonp${appPackageJson.name}`, jsonpFunction: `webpackJsonp${appPackageJson.name}`,
...@@ -259,13 +260,13 @@ module.exports = function(webpackEnv) { ...@@ -259,13 +260,13 @@ module.exports = function(webpackEnv) {
parser: safePostCssParser, parser: safePostCssParser,
map: shouldUseSourceMap map: shouldUseSourceMap
? { ? {
// `inline: false` forces the sourcemap to be output into a // `inline: false` forces the sourcemap to be output into a
// separate file // separate file
inline: false, inline: false,
// `annotation: true` appends the sourceMappingURL to the end of // `annotation: true` appends the sourceMappingURL to the end of
// the css file, helping the browser find the sourcemap // the css file, helping the browser find the sourcemap
annotation: true, annotation: true,
} }
: false, : false,
}, },
cssProcessorPluginOptions: { cssProcessorPluginOptions: {
...@@ -353,7 +354,7 @@ module.exports = function(webpackEnv) { ...@@ -353,7 +354,7 @@ module.exports = function(webpackEnv) {
formatter: require.resolve('react-dev-utils/eslintFormatter'), formatter: require.resolve('react-dev-utils/eslintFormatter'),
eslintPath: require.resolve('eslint'), eslintPath: require.resolve('eslint'),
resolvePluginsRelativeTo: __dirname, resolvePluginsRelativeTo: __dirname,
}, },
loader: require.resolve('eslint-loader'), loader: require.resolve('eslint-loader'),
}, },
...@@ -386,7 +387,7 @@ module.exports = function(webpackEnv) { ...@@ -386,7 +387,7 @@ module.exports = function(webpackEnv) {
customize: require.resolve( customize: require.resolve(
'babel-preset-react-app/webpack-overrides' 'babel-preset-react-app/webpack-overrides'
), ),
plugins: [ plugins: [
[ [
require.resolve('babel-plugin-named-asset-import'), require.resolve('babel-plugin-named-asset-import'),
...@@ -428,7 +429,7 @@ module.exports = function(webpackEnv) { ...@@ -428,7 +429,7 @@ module.exports = function(webpackEnv) {
cacheDirectory: true, cacheDirectory: true,
// See #6846 for context on why cacheCompression is disabled // See #6846 for context on why cacheCompression is disabled
cacheCompression: false, cacheCompression: false,
// Babel sourcemaps are needed for debugging into node_modules // Babel sourcemaps are needed for debugging into node_modules
// code. Without the options below, debuggers like VSCode // code. Without the options below, debuggers like VSCode
// show incorrect code and set breakpoints on the wrong lines. // show incorrect code and set breakpoints on the wrong lines.
...@@ -528,19 +529,19 @@ module.exports = function(webpackEnv) { ...@@ -528,19 +529,19 @@ module.exports = function(webpackEnv) {
}, },
isEnvProduction isEnvProduction
? { ? {
minify: { minify: {
removeComments: true, removeComments: true,
collapseWhitespace: true, collapseWhitespace: true,
removeRedundantAttributes: true, removeRedundantAttributes: true,
useShortDoctype: true, useShortDoctype: true,
removeEmptyAttributes: true, removeEmptyAttributes: true,
removeStyleLinkTypeAttributes: true, removeStyleLinkTypeAttributes: true,
keepClosingSlash: true, keepClosingSlash: true,
minifyJS: true, minifyJS: true,
minifyCSS: true, minifyCSS: true,
minifyURLs: true, minifyURLs: true,
}, },
} }
: undefined : undefined
) )
), ),
...@@ -548,8 +549,8 @@ module.exports = function(webpackEnv) { ...@@ -548,8 +549,8 @@ module.exports = function(webpackEnv) {
// a network request. // a network request.
// https://github.com/facebook/create-react-app/issues/5358 // https://github.com/facebook/create-react-app/issues/5358
isEnvProduction && isEnvProduction &&
shouldInlineRuntimeChunk && shouldInlineRuntimeChunk &&
new InlineChunkHtmlPlugin(HtmlWebpackPlugin, [/runtime-.+[.]js/]), new InlineChunkHtmlPlugin(HtmlWebpackPlugin, [/runtime-.+[.]js/]),
// Makes some environment variables available in index.html. // Makes some environment variables available in index.html.
// The public URL is available as %PUBLIC_URL% in index.html, e.g.: // The public URL is available as %PUBLIC_URL% in index.html, e.g.:
// <link rel="icon" href="%PUBLIC_URL%/favicon.ico"> // <link rel="icon" href="%PUBLIC_URL%/favicon.ico">
...@@ -576,14 +577,14 @@ module.exports = function(webpackEnv) { ...@@ -576,14 +577,14 @@ module.exports = function(webpackEnv) {
// makes the discovery automatic so you don't have to restart. // makes the discovery automatic so you don't have to restart.
// See https://github.com/facebook/create-react-app/issues/186 // See https://github.com/facebook/create-react-app/issues/186
isEnvDevelopment && isEnvDevelopment &&
new WatchMissingNodeModulesPlugin(paths.appNodeModules), new WatchMissingNodeModulesPlugin(paths.appNodeModules),
isEnvProduction && isEnvProduction &&
new MiniCssExtractPlugin({ new MiniCssExtractPlugin({
// Options similar to the same options in webpackOptions.output // Options similar to the same options in webpackOptions.output
// both options are optional // both options are optional
filename: 'static/css/[name].[contenthash:8].css', filename: 'static/css/[name].[contenthash:8].css',
chunkFilename: 'static/css/[name].[contenthash:8].chunk.css', chunkFilename: 'static/css/[name].[contenthash:8].chunk.css',
}), }),
// Generate an asset manifest file with the following content: // Generate an asset manifest file with the following content:
// - "files" key: Mapping of all asset filenames to their corresponding // - "files" key: Mapping of all asset filenames to their corresponding
// output file so that tools can pick it up without having to parse // output file so that tools can pick it up without having to parse
...@@ -608,6 +609,14 @@ module.exports = function(webpackEnv) { ...@@ -608,6 +609,14 @@ module.exports = function(webpackEnv) {
}; };
}, },
}), }),
isEnvProduction && new CopyWebpackPlugin([
{
from: __dirname + '/public/h5.html',
to: paths.appBuild + '/h5.html'
}
]),
// Moment.js is an extremely popular library that bundles large locale files // Moment.js is an extremely popular library that bundles large locale files
// by default due to how webpack interprets its code. This is a practical // by default due to how webpack interprets its code. This is a practical
// solution that requires the user to opt into importing specific locales. // solution that requires the user to opt into importing specific locales.
...@@ -617,48 +626,48 @@ module.exports = function(webpackEnv) { ...@@ -617,48 +626,48 @@ module.exports = function(webpackEnv) {
// Generate a service worker script that will precache, and keep up to date, // Generate a service worker script that will precache, and keep up to date,
// the HTML & assets that are part of the webpack build. // the HTML & assets that are part of the webpack build.
isEnvProduction && isEnvProduction &&
new WorkboxWebpackPlugin.GenerateSW({ new WorkboxWebpackPlugin.GenerateSW({
clientsClaim: true, clientsClaim: true,
exclude: [/\.map$/, /asset-manifest\.json$/], exclude: [/\.map$/, /asset-manifest\.json$/],
importWorkboxFrom: 'cdn', importWorkboxFrom: 'cdn',
navigateFallback: paths.publicUrlOrPath + 'index.html', navigateFallback: paths.publicUrlOrPath + 'index.html',
navigateFallbackBlacklist: [ navigateFallbackBlacklist: [
// Exclude URLs starting with /_, as they're likely an API call // Exclude URLs starting with /_, as they're likely an API call
new RegExp('^/_'), new RegExp('^/_'),
// Exclude any URLs whose last part seems to be a file extension // Exclude any URLs whose last part seems to be a file extension
// as they're likely a resource and not a SPA route. // as they're likely a resource and not a SPA route.
// URLs containing a "?" character won't be blacklisted as they're likely // URLs containing a "?" character won't be blacklisted as they're likely
// a route with query params (e.g. auth callbacks). // a route with query params (e.g. auth callbacks).
new RegExp('/[^/?]+\\.[^/]+$'), new RegExp('/[^/?]+\\.[^/]+$'),
], ],
}), }),
// TypeScript type checking // TypeScript type checking
useTypeScript && useTypeScript &&
new ForkTsCheckerWebpackPlugin({ new ForkTsCheckerWebpackPlugin({
typescript: resolve.sync('typescript', { typescript: resolve.sync('typescript', {
basedir: paths.appNodeModules, basedir: paths.appNodeModules,
}),
async: isEnvDevelopment,
useTypescriptIncrementalApi: true,
checkSyntacticErrors: true,
resolveModuleNameModule: process.versions.pnp
? `${__dirname}/pnpTs.js`
: undefined,
resolveTypeReferenceDirectiveModule: process.versions.pnp
? `${__dirname}/pnpTs.js`
: undefined,
tsconfig: paths.appTsConfig,
reportFiles: [
'**',
'!**/__tests__/**',
'!**/?(*.)(spec|test).*',
'!**/src/setupProxy.*',
'!**/src/setupTests.*',
],
silent: true,
// The formatter is invoked directly in WebpackDevServerUtils during development
formatter: isEnvProduction ? typescriptFormatter : undefined,
}), }),
async: isEnvDevelopment,
useTypescriptIncrementalApi: true,
checkSyntacticErrors: true,
resolveModuleNameModule: process.versions.pnp
? `${__dirname}/pnpTs.js`
: undefined,
resolveTypeReferenceDirectiveModule: process.versions.pnp
? `${__dirname}/pnpTs.js`
: undefined,
tsconfig: paths.appTsConfig,
reportFiles: [
'**',
'!**/__tests__/**',
'!**/?(*.)(spec|test).*',
'!**/src/setupProxy.*',
'!**/src/setupTests.*',
],
silent: true,
// The formatter is invoked directly in WebpackDevServerUtils during development
formatter: isEnvProduction ? typescriptFormatter : undefined,
}),
].filter(Boolean), ].filter(Boolean),
// Some libraries import Node modules but don't use them in the browser. // Some libraries import Node modules but don't use them in the browser.
// Tell webpack to provide empty mocks for them so importing them works. // Tell webpack to provide empty mocks for them so importing them works.
......
package.json
...@@ -133,6 +133,7 @@ ...@@ -133,6 +133,7 @@
"@types/ali-oss": "^6.0.5", "@types/ali-oss": "^6.0.5",
"@types/jquery": "^3.5.4", "@types/jquery": "^3.5.4",
"ali-oss": "^6.12.0", "ali-oss": "^6.12.0",
"copy-webpack-plugin": "^7.0.0",
"react-sortable-hoc": "^1.11.0" "react-sortable-hoc": "^1.11.0"
} }
} }
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