前端build调整

competitions
杨树明 6 years ago
parent 21eb8a19b5
commit fdab0e6768

@ -7,7 +7,7 @@ const paths = require('./paths');
// Make sure that including paths.js after env.js will read .env variables. // Make sure that including paths.js after env.js will read .env variables.
delete require.cache[require.resolve('./paths')]; delete require.cache[require.resolve('./paths')];
const NODE_ENV = process.env.NODE_ENV; const NODE_ENV = "production";
if (!NODE_ENV) { if (!NODE_ENV) {
throw new Error( throw new Error(
'The NODE_ENV environment variable is required but was not specified.' 'The NODE_ENV environment variable is required but was not specified.'
@ -71,7 +71,7 @@ function getClientEnvironment(publicUrl) {
{ {
// Useful for determining whether were running in production mode. // Useful for determining whether were running in production mode.
// Most importantly, it switches React into the correct mode. // Most importantly, it switches React into the correct mode.
NODE_ENV: process.env.NODE_ENV || 'development', NODE_ENV: "production",
// Useful for resolving the correct path to static assets in `public`. // Useful for resolving the correct path to static assets in `public`.
// For example, <img src={process.env.PUBLIC_URL + '/img/logo.png'} />. // For example, <img src={process.env.PUBLIC_URL + '/img/logo.png'} />.
// This should only be used as an escape hatch. Normally you would put // This should only be used as an escape hatch. Normally you would put

@ -11,7 +11,6 @@ const SWPrecacheWebpackPlugin = require('sw-precache-webpack-plugin');
const eslintFormatter = require('react-dev-utils/eslintFormatter'); const eslintFormatter = require('react-dev-utils/eslintFormatter');
const ModuleScopePlugin = require('react-dev-utils/ModuleScopePlugin'); const ModuleScopePlugin = require('react-dev-utils/ModuleScopePlugin');
const ParallelUglifyPlugin = require('webpack-parallel-uglify-plugin'); const ParallelUglifyPlugin = require('webpack-parallel-uglify-plugin');
const paths = require('./paths'); const paths = require('./paths');
const getClientEnvironment = require('./env'); const getClientEnvironment = require('./env');
@ -33,7 +32,7 @@ const env = getClientEnvironment(publicUrl);
// Assert this just to be safe. // Assert this just to be safe.
// Development builds of React are slow and not intended for production. // Development builds of React are slow and not intended for production.
if (env.stringified['process.env'].NODE_ENV !== '"production"') { if (env.stringified['process.env'].NODE_ENV !== '"production"') {
throw new Error('Production builds must have NODE_ENV=production.'); throw new Error('Production builds must have NODE_ENV=production.');
} }
// Note: defined here because it will be used more than once. // Note: defined here because it will be used more than once.
@ -44,9 +43,9 @@ const cssFilename = './static/css/[name].[contenthash:8].css';
// However, our output is structured with css, js and media folders. // However, our output is structured with css, js and media folders.
// To have this structure working with relative paths, we have to use custom options. // To have this structure working with relative paths, we have to use custom options.
const extractTextPluginOptions = shouldUseRelativeAssetPaths const extractTextPluginOptions = shouldUseRelativeAssetPaths
? // Making sure that the publicPath goes back to to build folder. ? // Making sure that the publicPath goes back to to build folder.
{ publicPath: Array(cssFilename.split('/').length).join('../') } { publicPath: Array(cssFilename.split('/').length).join('../') }
: {}; : {};
// This is the production configuration. // This is the production configuration.
// It compiles slowly and is focused on producing a fast and minimal bundle. // It compiles slowly and is focused on producing a fast and minimal bundle.
@ -54,332 +53,365 @@ const extractTextPluginOptions = shouldUseRelativeAssetPaths
// 上线用的 // 上线用的
// console.log('publicPath ', publicPath) // console.log('publicPath ', publicPath)
module.exports = { module.exports = {
// externals: { // externals: {
// 'react': 'window.React' // 'react': 'window.React'
// }, // },
// Don't attempt to continue if there are any errors. // Don't attempt to continue if there are any errors.
bail: true, bail: true,
// We generate sourcemaps in production. This is slow but gives good results. // We generate sourcemaps in production. This is slow but gives good results.
// You can exclude the *.map files from the build during deployment. // You can exclude the *.map files from the build during deployment.
// devtool: shouldUseSourceMap ? 'nosources-source-map' : false, //正式版 // devtool: shouldUseSourceMap ? 'nosources-source-map' : false, //正式版
devtool: shouldUseSourceMap ? 'source-map' : false,//测试版 devtool: false,//测试版
// In production, we only want to load the polyfills and the app code. // In production, we only want to load the polyfills and the app code.
entry: [require.resolve('./polyfills'), paths.appIndexJs], // entry: [require.resolve('./polyfills'), paths.appIndexJs],
output: { entry: {
// The build folder. main:[require.resolve('./polyfills'), paths.appIndexJs],
path: paths.appBuild, vendor: [
// Generated JS file names (with nested folders). 'moment', 'react', 'react-dom','react-router-dom','antd','@icedesign/base','@novnc/novnc','array-flatten','axios',
// There will be one main bundle, and one file per asynchronous chunk. 'material-ui','monaco-editor','react-monaco-editor', 'echarts',"qs"
// We don't currently advertise code splitting but Webpack supports it. ],
filename: './static/js/[name].[chunkhash:8].js', },
chunkFilename: './static/js/[name].[chunkhash:8].chunk.js', output: {
// We inferred the "public path" (such as / or /my-project) from homepage. // The build folder.
// cdn path: paths.appBuild,
// publicPath: 'https://shixun.educoder.net/react/build/', //publicPath, https://cdn.educoder.net // Generated JS file names (with nested folders).
// publicPath: 'https://cdn-testeduplus2.educoder.net/react/build/', //publicPath, https://cdn.educoder.net // There will be one main bundle, and one file per asynchronous chunk.
publicPath: '/react/build/', //publicPath, https://cdn.educoder.net // We don't currently advertise code splitting but Webpack supports it.
filename: './static/js/[name].[chunkhash:8].js',
// Point sourcemap entries to original disk location (format as URL on Windows) chunkFilename: './static/js/[name].[chunkhash:8].chunk.js',
devtoolModuleFilenameTemplate: info => // We inferred the "public path" (such as / or /my-project) from homepage.
path // cdn
.relative(paths.appSrc, info.absoluteResourcePath) // publicPath: 'https://shixun.educoder.net/react/build/', //publicPath, https://cdn.educoder.net
.replace(/\\/g, '/'), // publicPath: 'https://cdn-testeduplus2.educoder.net/react/build/', //publicPath, https://cdn.educoder.net
}, publicPath: '/react/build/', //publicPath, https://cdn.educoder.net
resolve: {
// This allows you to set a fallback for where Webpack should look for modules. // Point sourcemap entries to original disk location (format as URL on Windows)
// We placed these paths second because we want `node_modules` to "win" devtoolModuleFilenameTemplate: info =>
// if there are any conflicts. This matches Node resolution mechanism. path
// https://github.com/facebookincubator/create-react-app/issues/253 .relative(paths.appSrc, info.absoluteResourcePath)
modules: ['node_modules', paths.appNodeModules].concat( .replace(/\\/g, '/'),
// It is guaranteed to exist because we tweak it in `env.js` },
process.env.NODE_PATH.split(path.delimiter).filter(Boolean) resolve: {
), // This allows you to set a fallback for where Webpack should look for modules.
// These are the reasonable defaults supported by the Node ecosystem. // We placed these paths second because we want `node_modules` to "win"
// We also include JSX as a common component filename extension to support // if there are any conflicts. This matches Node resolution mechanism.
// some tools, although we do not recommend using it, see: // https://github.com/facebookincubator/create-react-app/issues/253
// https://github.com/facebookincubator/create-react-app/issues/290 modules: ['node_modules', paths.appNodeModules].concat(
// `web` extension prefixes have been added for better support // It is guaranteed to exist because we tweak it in `env.js`
// for React Native Web. process.env.NODE_PATH.split(path.delimiter).filter(Boolean)
extensions: ['.web.js', '.mjs', '.js', '.json', '.web.jsx', '.jsx'], ),
alias: { // These are the reasonable defaults supported by the Node ecosystem.
"educoder": __dirname + "/../src/common/educoder.js", // We also include JSX as a common component filename extension to support
// Support React Native Web // some tools, although we do not recommend using it, see:
// https://www.smashingmagazine.com/2016/08/a-glimpse-into-the-future-with-react-native-for-web/ // https://github.com/facebookincubator/create-react-app/issues/290
'react-native': 'react-native-web', // `web` extension prefixes have been added for better support
}, // for React Native Web.
plugins: [ extensions: ['.web.js', '.mjs', '.js', '.json', '.web.jsx', '.jsx'],
// Prevents users from importing files from outside of src/ (or node_modules/). alias: {
// This often causes confusion because we only process files within src/ with babel. "educoder": __dirname + "/../src/common/educoder.js",
// To fix this, we prevent you from importing files out of src/ -- if you'd like to, // Support React Native Web
// please link the files into your node_modules/ and let module-resolution kick in. // https://www.smashingmagazine.com/2016/08/a-glimpse-into-the-future-with-react-native-for-web/
// Make sure your source files are compiled, as they will not be processed in any way. 'react-native': 'react-native-web',
new ModuleScopePlugin(paths.appSrc, [paths.appPackageJson]), },
], plugins: [
}, // Prevents users from importing files from outside of src/ (or node_modules/).
module: { // This often causes confusion because we only process files within src/ with babel.
strictExportPresence: true, // To fix this, we prevent you from importing files out of src/ -- if you'd like to,
rules: [ // please link the files into your node_modules/ and let module-resolution kick in.
// TODO: Disable require.ensure as it's not a standard language feature. // Make sure your source files are compiled, as they will not be processed in any way.
// We are waiting for https://github.com/facebookincubator/create-react-app/issues/2176. new ModuleScopePlugin(paths.appSrc, [paths.appPackageJson]),
// { parser: { requireEnsure: false } }, ],
},
module: {
strictExportPresence: true,
rules: [
// TODO: Disable require.ensure as it's not a standard language feature.
// We are waiting for https://github.com/facebookincubator/create-react-app/issues/2176.
// { parser: { requireEnsure: false } },
// First, run the linter.
// It's important to do this before Babel processes the JS.
{
test: /\.(js|jsx|mjs)$/,
enforce: 'pre',
use: [
{
options: {
formatter: eslintFormatter,
eslintPath: require.resolve('eslint'),
},
loader: require.resolve('eslint-loader'),
},
],
include: paths.appSrc,
},
{
// "oneOf" will traverse all following loaders until one will
// match the requirements. When no loader matches it will fall
// back to the "file" loader at the end of the loader list.
oneOf: [
// "url" loader works just like "file" loader but it also embeds
// assets smaller than specified size as data URLs to avoid requests.
{
test: [/\.bmp$/, /\.gif$/, /\.jpe?g$/, /\.png$/],
loader: require.resolve('url-loader'),
options: {
limit: 10000,
name: 'static/media/[name].[hash:8].[ext]',
},
},
// Process JS with Babel.
{
test: /\.(js|jsx|mjs)$/,
include: paths.appSrc,
loader: require.resolve('babel-loader'),
options: {
compact: true,
},
},
// The notation here is somewhat confusing.
// "postcss" loader applies autoprefixer to our CSS.
// "css" loader resolves paths in CSS and adds assets as dependencies.
// "style" loader normally turns CSS into JS modules injecting <style>,
// but unlike in development configuration, we do something different.
// `ExtractTextPlugin` first applies the "postcss" and "css" loaders
// (second argument), then grabs the result CSS and puts it into a
// separate file in our build process. This way we actually ship
// a single CSS file in production instead of JS code injecting <style>
// tags. If you use code splitting, however, any async bundles will still
// use the "style" loader inside the async code so CSS from them won't be
// in the main CSS file.
{
test: /\.css$/,
loader: ExtractTextPlugin.extract(
Object.assign(
{
fallback: {
loader: require.resolve('style-loader'),
options: {
hmr: false,
},
},
use: [
{
loader: require.resolve('css-loader'),
options: {
importLoaders: 1,
minimize: true,
sourceMap: shouldUseSourceMap,
},
},
{
loader: require.resolve('postcss-loader'),
options: {
// Necessary for external CSS imports to work
// https://github.com/facebookincubator/create-react-app/issues/2677
ident: 'postcss',
plugins: () => [
require('postcss-flexbugs-fixes'),
autoprefixer({
browsers: [
'>1%',
'last 4 versions',
'Firefox ESR',
'not ie < 9', // React doesn't support IE8 anyway
],
flexbox: 'no-2009',
}),
],
},
},
],
},
extractTextPluginOptions
)
),
// Note: this won't work without `new ExtractTextPlugin()` in `plugins`.
},
{
test: /\.scss$/,
use: [
require.resolve("style-loader"),
{
loader: require.resolve("css-loader"),
options: {
importLoaders: 1,
minimize: true,
sourceMap: shouldUseSourceMap,
},
},
{
loader: require.resolve("sass-loader")
}
],
},
// "file" loader makes sure assets end up in the `build` folder.
// When you `import` an asset, you get its filename.
// This loader doesn't use a "test" so it will catch all modules
// that fall through the other loaders.
{
loader: require.resolve('file-loader'),
// Exclude `js` files to keep "css" loader working as it injects
// it's runtime that would otherwise processed through "file" loader.
// Also exclude `html` and `json` extensions so they get processed
// by webpacks internal loaders.
exclude: [/\.(js|jsx|mjs)$/, /\.html$/, /\.json$/],
options: {
name: 'static/media/[name].[hash:8].[ext]',
},
},
// ** STOP ** Are you adding a new loader?
// Make sure to add the new loader(s) before the "file" loader.
],
},
],
},
plugins: [
// Makes some environment variables available in index.html.
// The public URL is available as %PUBLIC_URL% in index.html, e.g.:
// <link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico">
// In production, it will be an empty string unless you specify "homepage"
// in `package.json`, in which case it will be the pathname of that URL.
new InterpolateHtmlPlugin(env.raw),
new webpack.HashedModuleIdsPlugin(),
// First, run the linter. // new webpack.optimize.ModuleConcatenationPlugin(),
// It's important to do this before Babel processes the JS.
{
test: /\.(js|jsx|mjs)$/,
enforce: 'pre',
use: [
{
options: {
formatter: eslintFormatter,
eslintPath: require.resolve('eslint'),
}, new webpack.optimize.CommonsChunkPlugin({
loader: require.resolve('eslint-loader'), async: 'async-vendor',
}, deepChildren: true,
], minChunks: (module) => {
include: paths.appSrc, return /node_modules/.test(module.context);
}, },
{ }),
// "oneOf" will traverse all following loaders until one will
// match the requirements. When no loader matches it will fall new webpack.optimize.CommonsChunkPlugin(
// back to the "file" loader at the end of the loader list. {names: ["vendors", "webpackAssets",'moment', 'react', 'react-dom','react-router-dom','antd','@icedesign/base','@novnc/novnc','array-flatten','axios',
oneOf: [ 'material-ui','monaco-editor','react-monaco-editor', 'echarts',"qs"]}
// "url" loader works just like "file" loader but it also embeds ),
// assets smaller than specified size as data URLs to avoid requests.
{ new webpack.optimize.CommonsChunkPlugin({
test: [/\.bmp$/, /\.gif$/, /\.jpe?g$/, /\.png$/], name: 'manifest',
loader: require.resolve('url-loader'), minChunks: (module) => {
options: { return /node_modules/.test(module.context);
limit: 10000, },
name: 'static/media/[name].[hash:8].[ext]', }),
},
}, // Generates an `index.html` file with the <script> injected.
// Process JS with Babel. new HtmlWebpackPlugin({
{ inject: true,
test: /\.(js|jsx|mjs)$/, template: paths.appHtml,
include: paths.appSrc, minify: {
loader: require.resolve('babel-loader'), removeComments: true,
options: { collapseWhitespace: true,
removeRedundantAttributes: true,
compact: true, useShortDoctype: true,
}, removeEmptyAttributes: true,
}, removeStyleLinkTypeAttributes: true,
// The notation here is somewhat confusing. keepClosingSlash: true,
// "postcss" loader applies autoprefixer to our CSS. minifyJS: true,
// "css" loader resolves paths in CSS and adds assets as dependencies. minifyCSS: true,
// "style" loader normally turns CSS into JS modules injecting <style>, minifyURLs: true,
// but unlike in development configuration, we do something different. },
// `ExtractTextPlugin` first applies the "postcss" and "css" loaders }),
// (second argument), then grabs the result CSS and puts it into a // Makes some environment variables available to the JS code, for example:
// separate file in our build process. This way we actually ship // if (process.env.NODE_ENV === 'production') { ... }. See `./env.js`.
// a single CSS file in production instead of JS code injecting <style> // It is absolutely essential that NODE_ENV was set to production here.
// tags. If you use code splitting, however, any async bundles will still // Otherwise React will be compiled in the very slow development mode.
// use the "style" loader inside the async code so CSS from them won't be new webpack.DefinePlugin(env.stringified),
// in the main CSS file. // Minify the code.
{ // new webpack.optimize.UglifyJsPlugin({
test: /\.css$/, // compress: {
loader: ExtractTextPlugin.extract( // warnings: false,
Object.assign( // // Disabled because of an issue with Uglify breaking seemingly valid code:
{ // // https://github.com/facebookincubator/create-react-app/issues/2376
fallback: { // // Pending further investigation:
loader: require.resolve('style-loader'), // // https://github.com/mishoo/UglifyJS2/issues/2011
options: { // comparisons: false,
hmr: false, // },
}, // mangle: {
}, // safari10: true,
use: [ // },
{ // output: {
loader: require.resolve('css-loader'), // comments: false,
options: { // // Turned on because emoji and regex is not minified properly using default
importLoaders: 1, // // https://github.com/facebookincubator/create-react-app/issues/2488
minimize: true, // ascii_only: true,
sourceMap: shouldUseSourceMap, // },
}, // sourceMap: shouldUseSourceMap,
}, // }),
{ //正式版上线后打开去掉debuger和console
loader: require.resolve('postcss-loader'), new ParallelUglifyPlugin({
options: { cacheDir: '.cache/',
// Necessary for external CSS imports to work uglifyJS:{
// https://github.com/facebookincubator/create-react-app/issues/2677 output: {
ident: 'postcss', beautify: true,
plugins: () => [ comments: true,
require('postcss-flexbugs-fixes'), },
autoprefixer({ warnings: false,
browsers: [ compress: {
'>1%', drop_debugger: true,
'last 4 versions',
'Firefox ESR',
'not ie < 9', // React doesn't support IE8 anyway
],
flexbox: 'no-2009',
}),
],
},
},
],
},
extractTextPluginOptions
)
),
// Note: this won't work without `new ExtractTextPlugin()` in `plugins`.
},
{
test: /\.scss$/,
use: [
require.resolve("style-loader"),
{
loader: require.resolve("css-loader"),
options: {
importLoaders: 1,
minimize: true,
sourceMap: shouldUseSourceMap,
},
},
{
loader: require.resolve("sass-loader")
}
],
},
// "file" loader makes sure assets end up in the `build` folder.
// When you `import` an asset, you get its filename.
// This loader doesn't use a "test" so it will catch all modules
// that fall through the other loaders.
{
loader: require.resolve('file-loader'),
// Exclude `js` files to keep "css" loader working as it injects
// it's runtime that would otherwise processed through "file" loader.
// Also exclude `html` and `json` extensions so they get processed
// by webpacks internal loaders.
exclude: [/\.(js|jsx|mjs)$/, /\.html$/, /\.json$/],
options: {
name: 'static/media/[name].[hash:8].[ext]',
},
},
// ** STOP ** Are you adding a new loader?
// Make sure to add the new loader(s) before the "file" loader.
],
},
],
},
plugins: [
// Makes some environment variables available in index.html.
// The public URL is available as %PUBLIC_URL% in index.html, e.g.:
// <link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico">
// In production, it will be an empty string unless you specify "homepage"
// in `package.json`, in which case it will be the pathname of that URL.
new InterpolateHtmlPlugin(env.raw),
// Generates an `index.html` file with the <script> injected.
new HtmlWebpackPlugin({
inject: true,
template: paths.appHtml,
minify: {
removeComments: true,
collapseWhitespace: true,
removeRedundantAttributes: true,
useShortDoctype: true,
removeEmptyAttributes: true,
removeStyleLinkTypeAttributes: true,
keepClosingSlash: true,
minifyJS: true,
minifyCSS: true,
minifyURLs: true,
},
}),
// Makes some environment variables available to the JS code, for example:
// if (process.env.NODE_ENV === 'production') { ... }. See `./env.js`.
// It is absolutely essential that NODE_ENV was set to production here.
// Otherwise React will be compiled in the very slow development mode.
new webpack.DefinePlugin(env.stringified),
// Minify the code.
// new webpack.optimize.UglifyJsPlugin({
// compress: {
// warnings: false,
// // Disabled because of an issue with Uglify breaking seemingly valid code:
// // https://github.com/facebookincubator/create-react-app/issues/2376
// // Pending further investigation:
// // https://github.com/mishoo/UglifyJS2/issues/2011
// comparisons: false,
// },
// mangle: {
// safari10: true,
// },
// output: {
// comments: false,
// // Turned on because emoji and regex is not minified properly using default
// // https://github.com/facebookincubator/create-react-app/issues/2488
// ascii_only: true,
// },
// sourceMap: shouldUseSourceMap,
// }),
//正式版上线后打开去掉debuger和console
new ParallelUglifyPlugin({
cacheDir: '.cache/',
uglifyJS:{
output: {
comments: false
},
warnings: false,
compress: {
drop_debugger: true,
drop_console: true drop_console: true
} }
} }
}), }),
// Note: this won't work without ExtractTextPlugin.extract(..) in `loaders`. // Note: this won't work without ExtractTextPlugin.extract(..) in `loaders`.
new ExtractTextPlugin({ new ExtractTextPlugin({
filename: cssFilename, filename: cssFilename,
}), }),
// Generate a manifest file which contains a mapping of all asset filenames // Generate a manifest file which contains a mapping of all asset filenames
// to their corresponding output file so that tools can pick it up without // to their corresponding output file so that tools can pick it up without
// having to parse `index.html`. // having to parse `index.html`.
new ManifestPlugin({ new ManifestPlugin({
fileName: 'asset-manifest.json', fileName: 'asset-manifest.json',
}), }),
// 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.
new SWPrecacheWebpackPlugin({ new SWPrecacheWebpackPlugin({
// By default, a cache-busting query parameter is appended to requests // By default, a cache-busting query parameter is appended to requests
// used to populate the caches, to ensure the responses are fresh. // used to populate the caches, to ensure the responses are fresh.
// If a URL is already hashed by Webpack, then there is no concern // If a URL is already hashed by Webpack, then there is no concern
// about it being stale, and the cache-busting can be skipped. // about it being stale, and the cache-busting can be skipped.
dontCacheBustUrlsMatching: /\.\w{8}\./, dontCacheBustUrlsMatching: /\.\w{8}\./,
filename: 'service-worker.js', filename: 'service-worker.js',
logger(message) { logger(message) {
if (message.indexOf('Total precache size is') === 0) { if (message.indexOf('Total precache size is') === 0) {
// This message occurs for every build and is a bit too noisy. // This message occurs for every build and is a bit too noisy.
return; return;
} }
if (message.indexOf('Skipping static resource') === 0) { if (message.indexOf('Skipping static resource') === 0) {
// This message obscures real errors so we ignore it. // This message obscures real errors so we ignore it.
// https://github.com/facebookincubator/create-react-app/issues/2612 // https://github.com/facebookincubator/create-react-app/issues/2612
return; return;
} }
// console.log(message); // console.log(message);
}, },
minify: true, minify: true,
// For unknown URLs, fallback to the index page // For unknown URLs, fallback to the index page
navigateFallback: publicUrl + '/index.html', navigateFallback: publicUrl + '/index.html',
// Ignores URLs starting from /__ (useful for Firebase): // Ignores URLs starting from /__ (useful for Firebase):
// https://github.com/facebookincubator/create-react-app/issues/2237#issuecomment-302693219 // https://github.com/facebookincubator/create-react-app/issues/2237#issuecomment-302693219
navigateFallbackWhitelist: [/^(?!\/__).*/], navigateFallbackWhitelist: [/^(?!\/__).*/],
// Don't precache sourcemaps (they're large) and build asset manifest: // Don't precache sourcemaps (they're large) and build asset manifest:
staticFileGlobsIgnorePatterns: [/\.map$/, /asset-manifest\.json$/], staticFileGlobsIgnorePatterns: [/\.map$/, /asset-manifest\.json$/],
}), }),
// 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.
// https://github.com/jmblog/how-to-optimize-momentjs-with-webpack // https://github.com/jmblog/how-to-optimize-momentjs-with-webpack
// You can remove this if you don't use Moment.js: // You can remove this if you don't use Moment.js:
new webpack.IgnorePlugin(/^\.\/locale$/, /moment$/), new webpack.IgnorePlugin(/^\.\/locale$/, /moment$/),
], ],
// 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.
node: { node: {
dgram: 'empty', dgram: 'empty',
fs: 'empty', fs: 'empty',
net: 'empty', net: 'empty',
tls: 'empty', tls: 'empty',
child_process: 'empty', child_process: 'empty',
}, },
}; };

@ -161,6 +161,7 @@
"devDependencies": { "devDependencies": {
"@babel/runtime": "7.0.0-beta.51", "@babel/runtime": "7.0.0-beta.51",
"babel-plugin-import": "^1.11.0", "babel-plugin-import": "^1.11.0",
"compression-webpack-plugin": "^1.1.12",
"concat": "^1.0.3", "concat": "^1.0.3",
"happypack": "^5.0.1", "happypack": "^5.0.1",
"node-sass": "^4.12.0", "node-sass": "^4.12.0",

@ -76,10 +76,10 @@ const Otherloginstart=Loadable({
loading: Loading, loading: Loading,
}) })
const TestIndex = Loadable({ // const TestIndex = Loadable({
loader: () => import('./modules/test'), // loader: () => import('./modules/test'),
loading: Loading, // loading: Loading,
}) // })
const IndexWrapperComponent = Loadable({ const IndexWrapperComponent = Loadable({
loader: () => import('./modules/page/IndexWrapper'), loader: () => import('./modules/page/IndexWrapper'),
@ -91,23 +91,23 @@ const CommentComponent = Loadable({
loading: Loading, loading: Loading,
}) })
const TestMaterialDesignComponent = Loadable({ // const TestMaterialDesignComponent = Loadable({
loader: () => import('./modules/test/md/TestMaterialDesign'), // loader: () => import('./modules/test/md/TestMaterialDesign'),
loading: Loading, // loading: Loading,
}) // })
const TestCodeMirrorComponent = Loadable({ // const TestCodeMirrorComponent = Loadable({
loader: () => import('./modules/test/codemirror/TestCodeMirror'), // loader: () => import('./modules/test/codemirror/TestCodeMirror'),
loading: Loading, // loading: Loading,
}) // })
const TestComponent = Loadable({ // const TestComponent = Loadable({
loader: () => import('./modules/test/TestRC'), // loader: () => import('./modules/test/TestRC'),
loading: Loading, // loading: Loading,
}) // })
const TestUrlQueryComponent = Loadable({ // const TestUrlQueryComponent = Loadable({
loader: () => import('./modules/test/urlquery/TestUrlQuery'), // loader: () => import('./modules/test/urlquery/TestUrlQuery'),
loading: Loading, // loading: Loading,
}) // })
const TPMIndexComponent = Loadable({ const TPMIndexComponent = Loadable({
loader: () => import('./modules/tpm/TPMIndex'), loader: () => import('./modules/tpm/TPMIndex'),
@ -254,10 +254,10 @@ const Interestpage = Loadable({
}) })
//众包创新 //众包创新
const ProjectPackages=Loadable({ // const ProjectPackages=Loadable({
loader: () => import('./modules/projectPackages/ProjectPackageIndex'), // loader: () => import('./modules/projectPackages/ProjectPackageIndex'),
loading: Loading, // loading: Loading,
}) // })
//竞赛 //竞赛
const NewCompetitions=Loadable({ const NewCompetitions=Loadable({
@ -477,8 +477,8 @@ class App extends Component {
return (<Topicbank {...this.props} {...props} {...this.state} />) return (<Topicbank {...this.props} {...props} {...this.state} />)
} }
}></Route> }></Route>
{/*众包创新*/} {/*/!*众包创新*!/*/}
<Route path={"/crowdsourcing"} component={ProjectPackages}/> {/*<Route path={"/crowdsourcing"} component={ProjectPackages}/>*/}
{/*竞赛*/} {/*竞赛*/}
<Route path={"/newcompetitions"} component={NewCompetitions}/> <Route path={"/newcompetitions"} component={NewCompetitions}/>
{/*认证*/} {/*认证*/}
@ -583,11 +583,11 @@ class App extends Component {
> >
</Route> </Route>
<Route path="/comment" component={CommentComponent}/> <Route path="/comment" component={CommentComponent}/>
<Route path="/testMaterial" component={TestMaterialDesignComponent}/> {/*<Route path="/testMaterial" component={TestMaterialDesignComponent}/>*/}
<Route path="/test" component={TestIndex}/> {/*<Route path="/test" component={TestIndex}/>*/}
<Route path="/testCodeMirror" component={TestCodeMirrorComponent}/> {/*<Route path="/testCodeMirror" component={TestCodeMirrorComponent}/>*/}
<Route path="/testRCComponent" component={TestComponent}/> {/*<Route path="/testRCComponent" component={TestComponent}/>*/}
<Route path="/testUrlQuery" component={TestUrlQueryComponent}/> {/*<Route path="/testUrlQuery" component={TestUrlQueryComponent}/>*/}
<Route path="/messages" <Route path="/messages"
render={ render={
(props)=>(<Messagerouting {...this.props} {...props} {...this.state}></Messagerouting>) (props)=>(<Messagerouting {...this.props} {...props} {...this.state}></Messagerouting>)

@ -4,6 +4,11 @@ import { Menu, Icon, List, Avatar,Row, Col,Tag,Pagination} from 'antd';
import axios from 'axios'; import axios from 'axios';
import './Competitionsindex.css'; import './Competitionsindex.css';
import NoneData from "../../courses/shixunHomework/shixunHomework"; import NoneData from "../../courses/shixunHomework/shixunHomework";
import groups1 from './groups1.png';
import groups2 from './groups2.png';
import groups3 from './groups3.png';
const { SubMenu } = Menu; const { SubMenu } = Menu;
@ -105,55 +110,81 @@ class CompetitionsIndex extends Component{
</div> </div>
<div className={"educontent clearfix mtf10 CompetitionsIndex "}> <div className={"educontent clearfix mtf10 CompetitionsIndex "}>
<style>
{
`
.CompetitionsList{
position: relative;
}
`
}
</style>
<List <List
className={"CompetitionsList"}
itemLayout="vertical" itemLayout="vertical"
size="large" size="large"
dataSource={datas&&datas} dataSource={datas&&datas}
renderItem={(item,key) => ( renderItem={(item,key) => (
<List.Item <div>
key={key}
actions={[ {item.description===null||item.description===undefined||item.description===""?<style>
<span>竞赛时间: 2019-08-07 24: 002019-09-10 24: 00</span>, {
<span>报名截止时间2019-08-07 08:10</span>, `
]} ..CompetitionsIndex .ant-list-vertical .ant-list-item-action{
extra={ margin-top:50px;
<div className={"pt50"} style={{"width":'305px'}}> }
<Row gutter={16}> `
<Col className="gutter-row" span={6}> }
<div className="gutter-box CompetitionsIndexdadels">奖金</div> </style>:""}
</Col> <img src={groups3} />
<Col className="gutter-row" span={6}> <List.Item
<div className="gutter-box CompetitionsIndexdadels">浏览数</div> key={key}
</Col> actions={[
<Col className="gutter-row" span={6}> <span>竞赛时间: 2019-08-07 24: 002019-09-10 24: 00</span>,
<div className="gutter-box CompetitionsIndexdadels">报名数</div> <span>报名截止时间2019-08-07 08:10</span>,
</Col> ]}
</Row> extra={
<div className={"pt50"} style={{"width":'305px'}}>
<Row gutter={16}> <Row gutter={16}>
<Col className="gutter-row" span={6}> <Col className="gutter-row" span={6}>
<div className="gutter-box CompetitionsIndexbottomvalue">¥4500</div> <div className="gutter-box CompetitionsIndexdadels">奖金</div>
</Col> </Col>
<Col className="gutter-row" span={6}> <Col className="gutter-row" span={6}>
<div className="gutter-box CompetitionsIndexbottomvalue">351</div> <div className="gutter-box CompetitionsIndexdadels">浏览数</div>
</Col> </Col>
<Col className="gutter-row" span={6}> <Col className="gutter-row" span={6}>
<div className="gutter-box CompetitionsIndexbottomvalue">351</div> <div className="gutter-box CompetitionsIndexdadels">报名数</div>
</Col> </Col>
</Row> </Row>
</div> <Row gutter={16}>
} <Col className="gutter-row" span={6}>
> <div className="gutter-box CompetitionsIndexbottomvalue">¥4500</div>
<List.Item.Meta </Col>
title={<a><span className={"competitionstitles"}>{item.name}</span><span>{item.sub_title===null?"":<Tag className="competitionsrelative" color="#87d068">{ <Col className="gutter-row" span={6}>
item.sub_title <div className="gutter-box CompetitionsIndexbottomvalue">351</div>
}</Tag>}</span> </Col>
</a>} <Col className="gutter-row" span={6}>
/> <div className="gutter-box CompetitionsIndexbottomvalue">351</div>
{item.description} </Col>
</List.Item> </Row>
)}
</div>
}
>
<List.Item.Meta
title={<a><span className={"competitionstitles"}>{item.name}</span><span>{item.sub_title===null?"":<Tag className="competitionsrelative" color="#87d068">{
item.sub_title
}</Tag>}</span>
</a>}
/>
{item.description}
</List.Item>
</div>
)
}
/> />
<div className="mb40 edu-txt-center padding20-30" <div className="mb40 edu-txt-center padding20-30"

Binary file not shown.

After

Width:  |  Height:  |  Size: 3.2 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 4.7 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 3.6 KiB

Loading…
Cancel
Save