Skip to content

M
mr-julyedu
Commit 188be836 by baiguangyao
Options

.

parent 47967107
Showing with 13591 additions and 10 deletions
.history/config/webpack.config_20190419102737.js 0 → 100644
'use strict';
const fs = require('fs');
const path = require('path');
const webpack = require('webpack');
const resolve = require('resolve');
const PnpWebpackPlugin = require('pnp-webpack-plugin');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const CaseSensitivePathsPlugin = require('case-sensitive-paths-webpack-plugin');
const InlineChunkHtmlPlugin = require('react-dev-utils/InlineChunkHtmlPlugin');
const TerserPlugin = require('terser-webpack-plugin');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const OptimizeCSSAssetsPlugin = require('optimize-css-assets-webpack-plugin');
const safePostCssParser = require('postcss-safe-parser');
const ManifestPlugin = require('webpack-manifest-plugin');
const InterpolateHtmlPlugin = require('react-dev-utils/InterpolateHtmlPlugin');
const WorkboxWebpackPlugin = require('workbox-webpack-plugin');
const WatchMissingNodeModulesPlugin = require('react-dev-utils/WatchMissingNodeModulesPlugin');
const ModuleScopePlugin = require('react-dev-utils/ModuleScopePlugin');
const getCSSModuleLocalIdent = require('react-dev-utils/getCSSModuleLocalIdent');
const paths = require('./paths');
const getClientEnvironment = require('./env');
const ModuleNotFoundPlugin = require('react-dev-utils/ModuleNotFoundPlugin');
const ForkTsCheckerWebpackPlugin = require('react-dev-utils/ForkTsCheckerWebpackPlugin');
const typescriptFormatter = require('react-dev-utils/typescriptFormatter');
// Source maps are resource heavy and can cause out of memory issue for large source files.
const shouldUseSourceMap = process.env.GENERATE_SOURCEMAP !== 'false';
// Some apps do not need the benefits of saving a web request, so not inlining the chunk
// makes for a smoother build process.
const shouldInlineRuntimeChunk = process.env.INLINE_RUNTIME_CHUNK !== 'false';
// Check if TypeScript is setup
const useTypeScript = fs.existsSync(paths.appTsConfig);
const theme = require('../package.json').theme;
// style files regexes
const cssRegex = /\.css$/;
const cssModuleRegex = /\.module\.css$/;
const sassRegex = /\.(scss|sass)$/;
const sassModuleRegex = /\.module\.(scss|sass)$/;
// This is the production and development configuration.
// It is focused on developer experience, fast rebuilds, and a minimal bundle.
module.exports = function(webpackEnv) {
const isEnvDevelopment = webpackEnv === 'development';
const isEnvProduction = webpackEnv === 'production';
// 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.
// In development, we always serve from the root. This makes config easier.
const publicPath = isEnvProduction
? paths.servedPath
: isEnvDevelopment && '/';
// Some apps do not use client-side routing with pushState.
// For these, "homepage" can be set to "." to enable relative asset paths.
const shouldUseRelativeAssetPaths = publicPath === './';
// `publicUrl` is just like `publicPath`, but we will provide it to our app
// as %PUBLIC_URL% in `index.html` and `process.env.PUBLIC_URL` in JavaScript.
// Omit trailing slash as %PUBLIC_URL%/xyz looks better than %PUBLIC_URL%xyz.
const publicUrl = isEnvProduction
? publicPath.slice(0, -1)
: isEnvDevelopment && '';
// Get environment variables to inject into our app.
const env = getClientEnvironment(publicUrl);
// common function to get style loaders
const getStyleLoaders = (cssOptions, preProcessor) => {
const loaders = [
isEnvDevelopment && require.resolve('style-loader'),
isEnvProduction && {
loader: MiniCssExtractPlugin.loader,
options: Object.assign(
{},
shouldUseRelativeAssetPaths ? { publicPath: '../../' } : undefined
),
},
{
loader: require.resolve('css-loader'),
options: cssOptions,
},
{
// Options for PostCSS as we reference these options twice
// Adds vendor prefixing based on your specified browser support in
// package.json
loader: require.resolve('postcss-loader'),
options: {
// Necessary for external CSS imports to work
// https://github.com/facebook/create-react-app/issues/2677
ident: 'postcss',
plugins: () => [
require('postcss-flexbugs-fixes'),
require('postcss-preset-env')({
autoprefixer: {
flexbox: 'no-2009',
},
stage: 3,
}),
],
sourceMap: isEnvProduction && shouldUseSourceMap,
},
},
].filter(Boolean);
if (preProcessor) {
loaders.push({
loader: require.resolve(preProcessor),
options: {
sourceMap: isEnvProduction && shouldUseSourceMap,
},
});
if(preProcessor == 'sass-loader' && !cssOptions.modules){
loaders.push({
loader: require.resolve('sass-resources-loader'),
options: {
resources: [require.resolve('../src/styles/variable.scss')]
}
})
}
}
return loaders;
};
return {
mode: isEnvProduction ? 'production' : isEnvDevelopment && 'development',
// Stop compilation early in production
bail: isEnvProduction,
devtool: isEnvProduction
? shouldUseSourceMap
? 'source-map'
: false
: isEnvDevelopment && 'cheap-module-source-map',
// These are the "entry points" to our application.
// This means they will be the "root" imports that are included in JS bundle.
entry: [
// Include an alternative client for WebpackDevServer. A client's job is to
// connect to WebpackDevServer by a socket and get notified about changes.
// When you save a file, the client will either apply hot updates (in case
// of CSS changes), or refresh the page (in case of JS changes). When you
// make a syntax error, this client will display a syntax error overlay.
// Note: instead of the default WebpackDevServer client, we use a custom one
// to bring better experience for Create React App users. You can replace
// the line below with these two lines if you prefer the stock client:
// require.resolve('webpack-dev-server/client') + '?/',
// require.resolve('webpack/hot/dev-server'),
isEnvDevelopment &&
require.resolve('react-dev-utils/webpackHotDevClient'),
// Finally, this is your app's code:
paths.appIndexJs,
// We include the app code last so that if there is a runtime error during
// initialization, it doesn't blow up the WebpackDevServer client, and
// changing JS code would still trigger a refresh.
].filter(Boolean),
output: {
// The build folder.
path: isEnvProduction ? paths.appBuild : undefined,
// Add /* filename */ comments to generated require()s in the output.
pathinfo: isEnvDevelopment,
// There will be one main bundle, and one file per asynchronous chunk.
// In development, it does not produce real files.
filename: isEnvProduction
? 'static/js/[name].[contenthash:8].js'
: isEnvDevelopment && 'static/js/bundle.js',
// There are also additional JS chunk files if you use code splitting.
chunkFilename: isEnvProduction
? 'static/js/[name].[contenthash:8].chunk.js'
: isEnvDevelopment && 'static/js/[name].chunk.js',
// We inferred the "public path" (such as / or /my-project) from homepage.
// We use "/" in development.
publicPath: publicPath,
// Point sourcemap entries to original disk location (format as URL on Windows)
devtoolModuleFilenameTemplate: isEnvProduction
? info =>
path
.relative(paths.appSrc, info.absoluteResourcePath)
.replace(/\\/g, '/')
: isEnvDevelopment &&
(info => path.resolve(info.absoluteResourcePath).replace(/\\/g, '/')),
},
optimization: {
minimize: isEnvProduction,
minimizer: [
// This is only used in production mode
new TerserPlugin({
terserOptions: {
parse: {
// we want terser to parse ecma 8 code. However, we don't want it
// to apply any minfication steps that turns valid ecma 5 code
// into invalid ecma 5 code. This is why the 'compress' and 'output'
// sections only apply transformations that are ecma 5 safe
// https://github.com/facebook/create-react-app/pull/4234
ecma: 8,
},
compress: {
ecma: 5,
warnings: false,
// Disabled because of an issue with Uglify breaking seemingly valid code:
// https://github.com/facebook/create-react-app/issues/2376
// Pending further investigation:
// https://github.com/mishoo/UglifyJS2/issues/2011
comparisons: false,
// Disabled because of an issue with Terser breaking valid code:
// https://github.com/facebook/create-react-app/issues/5250
// Pending futher investigation:
// https://github.com/terser-js/terser/issues/120
inline: 2,
},
mangle: {
safari10: true,
},
output: {
ecma: 5,
comments: false,
// Turned on because emoji and regex is not minified properly using default
// https://github.com/facebook/create-react-app/issues/2488
ascii_only: true,
},
},
// Use multi-process parallel running to improve the build speed
// Default number of concurrent runs: os.cpus().length - 1
parallel: true,
// Enable file caching
cache: true,
sourceMap: shouldUseSourceMap,
}),
// This is only used in production mode
new OptimizeCSSAssetsPlugin({
cssProcessorOptions: {
parser: safePostCssParser,
map: shouldUseSourceMap
? {
// `inline: false` forces the sourcemap to be output into a
// separate file
inline: false,
// `annotation: true` appends the sourceMappingURL to the end of
// the css file, helping the browser find the sourcemap
annotation: true,
}
: false,
},
}),
],
// Automatically split vendor and commons
// https://twitter.com/wSokra/status/969633336732905474
// https://medium.com/webpack/webpack-4-code-splitting-chunk-graph-and-the-splitchunks-optimization-be739a861366
splitChunks: {
chunks: 'all',
name: false,
},
// Keep the runtime chunk separated to enable long term caching
// https://twitter.com/wSokra/status/969679223278505985
runtimeChunk: true,
},
resolve: {
// This allows you to set a fallback for where Webpack should look for modules.
// We placed these paths second because we want `node_modules` to "win"
// if there are any conflicts. This matches Node resolution mechanism.
// https://github.com/facebook/create-react-app/issues/253
modules: ['node_modules'].concat(
// It is guaranteed to exist because we tweak it in `env.js`
process.env.NODE_PATH.split(path.delimiter).filter(Boolean)
),
// These are the reasonable defaults supported by the Node ecosystem.
// We also include JSX as a common component filename extension to support
// some tools, although we do not recommend using it, see:
// https://github.com/facebook/create-react-app/issues/290
// `web` extension prefixes have been added for better support
// for React Native Web.
extensions: paths.moduleFileExtensions
.map(ext => `.${ext}`)
.filter(ext => useTypeScript || !ext.includes('ts')),
alias: {
// Support React Native Web
// https://www.smashingmagazine.com/2016/08/a-glimpse-into-the-future-with-react-native-for-web/
'react-native': 'react-native-web',
},
plugins: [
// Adds support for installing with Plug'n'Play, leading to faster installs and adding
// guards against forgotten dependencies and such.
PnpWebpackPlugin,
// Prevents users from importing files from outside of src/ (or node_modules/).
// This often causes confusion because we only process files within src/ with babel.
// To fix this, we prevent you from importing files out of src/ -- if you'd like to,
// please link the files into your node_modules/ and let module-resolution kick in.
// Make sure your source files are compiled, as they will not be processed in any way.
new ModuleScopePlugin(paths.appSrc, [paths.appPackageJson]),
],
},
resolveLoader: {
plugins: [
// Also related to Plug'n'Play, but this time it tells Webpack to load its loaders
// from the current package.
PnpWebpackPlugin.moduleLoader(module),
],
},
module: {
strictExportPresence: true,
rules: [
// Disable require.ensure as it's not a standard language feature.
{ parser: { requireEnsure: false } },
// First, run the linter.
// It's important to do this before Babel processes the JS.
{
test: /\.(js|mjs|jsx)$/,
enforce: 'pre',
use: [
{
options: {
formatter: require.resolve('react-dev-utils/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 like "file" loader except that it embeds assets
// smaller than specified limit in bytes as data URLs to avoid requests.
// A missing `test` is equivalent to a match.
{
test: [/\.bmp$/, /\.gif$/, /\.jpe?g$/, /\.png$/],
loader: require.resolve('url-loader'),
options: {
limit: 10000,
name: 'static/media/[name].[hash:8].[ext]',
},
},
// Process application JS with Babel.
// The preset includes JSX, Flow, TypeScript, and some ESnext features.
{
test: /\.(js|mjs|jsx|ts|tsx)$/,
include: paths.appSrc,
loader: require.resolve('babel-loader'),
options: {
customize: require.resolve(
'babel-preset-react-app/webpack-overrides'
),
plugins: [
[
require.resolve('babel-plugin-named-asset-import'),
{
loaderMap: {
svg: {
ReactComponent: '@svgr/webpack?-svgo,+ref![path]',
},
},
},
],
],
// This is a feature of `babel-loader` for webpack (not Babel itself).
// It enables caching results in ./node_modules/.cache/babel-loader/
// directory for faster rebuilds.
cacheDirectory: true,
cacheCompression: isEnvProduction,
compact: isEnvProduction,
},
},
// Process any JS outside of the app with Babel.
// Unlike the application JS, we only compile the standard ES features.
{
test: /\.(js|mjs)$/,
exclude: /@babel(?:\/|\\{1,2})runtime/,
loader: require.resolve('babel-loader'),
options: {
babelrc: false,
configFile: false,
compact: false,
presets: [
[
require.resolve('babel-preset-react-app/dependencies'),
{ helpers: true },
],
],
cacheDirectory: true,
cacheCompression: isEnvProduction,
// If an error happens in a package, it's possible to be
// because it was compiled. Thus, we don't want the browser
// debugger to show the original code. Instead, the code
// being evaluated would be much more helpful.
sourceMaps: false,
},
},
// "postcss" loader applies autoprefixer to our CSS.
// "css" loader resolves paths in CSS and adds assets as dependencies.
// "style" loader turns CSS into JS modules that inject <style> tags.
// In production, we use MiniCSSExtractPlugin to extract that CSS
// to a file, but in development "style" loader enables hot editing
// of CSS.
// By default we support CSS Modules with the extension .module.css
{
test: cssRegex,
exclude: cssModuleRegex,
use: getStyleLoaders({
importLoaders: 1,
sourceMap: isEnvProduction && shouldUseSourceMap,
}),
// Don't consider CSS imports dead code even if the
// containing package claims to have no side effects.
// Remove this when webpack adds a warning or an error for this.
// See https://github.com/webpack/webpack/issues/6571
sideEffects: true,
},
// Adds support for CSS Modules (https://github.com/css-modules/css-modules)
// using the extension .module.css
{
test: cssModuleRegex,
use: getStyleLoaders({
importLoaders: 1,
sourceMap: isEnvProduction && shouldUseSourceMap,
modules: true,
getLocalIdent: getCSSModuleLocalIdent,
}),
},
// Opt-in support for SASS (using .scss or .sass extensions).
// By default we support SASS Modules with the
// extensions .module.scss or .module.sass
{
test: sassRegex,
exclude: sassModuleRegex,
use: getStyleLoaders(
{
importLoaders: 2,
sourceMap: isEnvProduction && shouldUseSourceMap,
modules: false
},
'sass-loader'
),
// Don't consider CSS imports dead code even if the
// containing package claims to have no side effects.
// Remove this when webpack adds a warning or an error for this.
// See https://github.com/webpack/webpack/issues/6571
sideEffects: true,
},
// Adds support for CSS Modules, but using SASS
// using the extension .module.scss or .module.sass
{
test: sassModuleRegex,
use: getStyleLoaders(
{
importLoaders: 2,
sourceMap: isEnvProduction && shouldUseSourceMap,
modules: true,
getLocalIdent: getCSSModuleLocalIdent,
},
'sass-loader'
),
},
{
test: /\.less$/,
use: [
'style-loader',
'css-loader',
{ loader: 'less-loader', options: { modifyVars: theme } },
],
include: /node_modules/
},
{
loader: "less-loader",
options: {
javascriptEnabled: true
}
},
// "file" loader makes sure those assets get served by WebpackDevServer.
// When you `import` an asset, you get its (virtual) filename.
// In production, they would get copied to the `build` folder.
// 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
// its runtime that would otherwise be processed through "file" loader.
// Also exclude `html` and `json` extensions so they get processed
// by webpacks internal loaders.
exclude: [/\.(js|mjs|jsx|ts|tsx)$/, /\.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: [
// Generates an `index.html` file with the <script> injected.
new HtmlWebpackPlugin(
Object.assign(
{},
{
inject: true,
template: paths.appHtml,
},
isEnvProduction
? {
minify: {
removeComments: true,
collapseWhitespace: true,
removeRedundantAttributes: true,
useShortDoctype: true,
removeEmptyAttributes: true,
removeStyleLinkTypeAttributes: true,
keepClosingSlash: true,
minifyJS: true,
minifyCSS: true,
minifyURLs: true,
},
}
: undefined
)
),
// Inlines the webpack runtime script. This script is too small to warrant
// a network request.
isEnvProduction &&
shouldInlineRuntimeChunk &&
new InlineChunkHtmlPlugin(HtmlWebpackPlugin, [/runtime~.+[.]js/]),
// 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.
// In development, this will be an empty string.
new InterpolateHtmlPlugin(HtmlWebpackPlugin, env.raw),
// This gives some necessary context to module not found errors, such as
// the requesting resource.
new ModuleNotFoundPlugin(paths.appPath),
// 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 is set to production
// during a production build.
// Otherwise React will be compiled in the very slow development mode.
new webpack.DefinePlugin(env.stringified),
// This is necessary to emit hot updates (currently CSS only):
isEnvDevelopment && new webpack.HotModuleReplacementPlugin(),
// Watcher doesn't work well if you mistype casing in a path so we use
// a plugin that prints an error when you attempt to do this.
// See https://github.com/facebook/create-react-app/issues/240
isEnvDevelopment && new CaseSensitivePathsPlugin(),
// If you require a missing module and then `npm install` it, you still have
// to restart the development server for Webpack to discover it. This plugin
// makes the discovery automatic so you don't have to restart.
// See https://github.com/facebook/create-react-app/issues/186
isEnvDevelopment &&
new WatchMissingNodeModulesPlugin(paths.appNodeModules),
isEnvProduction &&
new MiniCssExtractPlugin({
// Options similar to the same options in webpackOptions.output
// both options are optional
filename: 'static/css/[name].[contenthash:8].css',
chunkFilename: 'static/css/[name].[contenthash:8].chunk.css',
}),
// 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
// having to parse `index.html`.
new ManifestPlugin({
fileName: 'asset-manifest.json',
publicPath: publicPath,
}),
// 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
// solution that requires the user to opt into importing specific locales.
// https://github.com/jmblog/how-to-optimize-momentjs-with-webpack
// You can remove this if you don't use Moment.js:
new webpack.IgnorePlugin(/^\.\/locale$/, /moment$/),
// Generate a service worker script that will precache, and keep up to date,
// the HTML & assets that are part of the Webpack build.
isEnvProduction &&
new WorkboxWebpackPlugin.GenerateSW({
clientsClaim: true,
exclude: [/\.map$/, /asset-manifest\.json$/],
importWorkboxFrom: 'cdn',
navigateFallback: publicUrl + '/index.html',
navigateFallbackBlacklist: [
// Exclude URLs starting with /_, as they're likely an API call
new RegExp('^/_'),
// Exclude URLs containing a dot, as they're likely a resource in
// public/ and not a SPA route
new RegExp('/[^/]+\\.[^/]+$'),
],
}),
// TypeScript type checking
useTypeScript &&
new ForkTsCheckerWebpackPlugin({
typescript: resolve.sync('typescript', {
basedir: paths.appNodeModules,
}),
async: isEnvDevelopment,
useTypescriptIncrementalApi: true,
checkSyntacticErrors: true,
tsconfig: paths.appTsConfig,
reportFiles: [
'**',
'!**/*.json',
'!**/__tests__/**',
'!**/?(*.)(spec|test).*',
'!**/src/setupProxy.*',
'!**/src/setupTests.*',
],
watch: paths.appSrc,
silent: true,
// The formatter is invoked directly in WebpackDevServerUtils during development
formatter: isEnvProduction ? typescriptFormatter : undefined,
}),
].filter(Boolean),
// 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.
node: {
module: 'empty',
dgram: 'empty',
dns: 'mock',
fs: 'empty',
net: 'empty',
tls: 'empty',
child_process: 'empty',
},
// Turn off performance processing because we utilize
// our own hints via the FileSizeReporter
performance: false,
};
};
.history/config/webpack.config_20190419102909.js 0 → 100644
'use strict';
const fs = require('fs');
const path = require('path');
const webpack = require('webpack');
const resolve = require('resolve');
const PnpWebpackPlugin = require('pnp-webpack-plugin');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const CaseSensitivePathsPlugin = require('case-sensitive-paths-webpack-plugin');
const InlineChunkHtmlPlugin = require('react-dev-utils/InlineChunkHtmlPlugin');
const TerserPlugin = require('terser-webpack-plugin');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const OptimizeCSSAssetsPlugin = require('optimize-css-assets-webpack-plugin');
const safePostCssParser = require('postcss-safe-parser');
const ManifestPlugin = require('webpack-manifest-plugin');
const InterpolateHtmlPlugin = require('react-dev-utils/InterpolateHtmlPlugin');
const WorkboxWebpackPlugin = require('workbox-webpack-plugin');
const WatchMissingNodeModulesPlugin = require('react-dev-utils/WatchMissingNodeModulesPlugin');
const ModuleScopePlugin = require('react-dev-utils/ModuleScopePlugin');
const getCSSModuleLocalIdent = require('react-dev-utils/getCSSModuleLocalIdent');
const paths = require('./paths');
const getClientEnvironment = require('./env');
const ModuleNotFoundPlugin = require('react-dev-utils/ModuleNotFoundPlugin');
const ForkTsCheckerWebpackPlugin = require('react-dev-utils/ForkTsCheckerWebpackPlugin');
const typescriptFormatter = require('react-dev-utils/typescriptFormatter');
// Source maps are resource heavy and can cause out of memory issue for large source files.
const shouldUseSourceMap = process.env.GENERATE_SOURCEMAP !== 'false';
// Some apps do not need the benefits of saving a web request, so not inlining the chunk
// makes for a smoother build process.
const shouldInlineRuntimeChunk = process.env.INLINE_RUNTIME_CHUNK !== 'false';
// Check if TypeScript is setup
const useTypeScript = fs.existsSync(paths.appTsConfig);
const theme = require('../package.json').theme;
// style files regexes
const cssRegex = /\.css$/;
const cssModuleRegex = /\.module\.css$/;
const sassRegex = /\.(scss|sass)$/;
const sassModuleRegex = /\.module\.(scss|sass)$/;
// This is the production and development configuration.
// It is focused on developer experience, fast rebuilds, and a minimal bundle.
module.exports = function(webpackEnv) {
const isEnvDevelopment = webpackEnv === 'development';
const isEnvProduction = webpackEnv === 'production';
// 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.
// In development, we always serve from the root. This makes config easier.
const publicPath = isEnvProduction
? paths.servedPath
: isEnvDevelopment && '/';
// Some apps do not use client-side routing with pushState.
// For these, "homepage" can be set to "." to enable relative asset paths.
const shouldUseRelativeAssetPaths = publicPath === './';
// `publicUrl` is just like `publicPath`, but we will provide it to our app
// as %PUBLIC_URL% in `index.html` and `process.env.PUBLIC_URL` in JavaScript.
// Omit trailing slash as %PUBLIC_URL%/xyz looks better than %PUBLIC_URL%xyz.
const publicUrl = isEnvProduction
? publicPath.slice(0, -1)
: isEnvDevelopment && '';
// Get environment variables to inject into our app.
const env = getClientEnvironment(publicUrl);
// common function to get style loaders
const getStyleLoaders = (cssOptions, preProcessor) => {
const loaders = [
isEnvDevelopment && require.resolve('style-loader'),
isEnvProduction && {
loader: MiniCssExtractPlugin.loader,
options: Object.assign(
{},
shouldUseRelativeAssetPaths ? { publicPath: '../../' } : undefined
),
},
{
loader: require.resolve('css-loader'),
options: cssOptions,
},
{
// Options for PostCSS as we reference these options twice
// Adds vendor prefixing based on your specified browser support in
// package.json
loader: require.resolve('postcss-loader'),
options: {
// Necessary for external CSS imports to work
// https://github.com/facebook/create-react-app/issues/2677
ident: 'postcss',
plugins: () => [
require('postcss-flexbugs-fixes'),
require('postcss-preset-env')({
autoprefixer: {
flexbox: 'no-2009',
},
stage: 3,
}),
],
sourceMap: isEnvProduction && shouldUseSourceMap,
},
},
].filter(Boolean);
if (preProcessor) {
loaders.push({
loader: require.resolve(preProcessor),
options: {
sourceMap: isEnvProduction && shouldUseSourceMap,
},
});
if(preProcessor == 'sass-loader' && !cssOptions.modules){
loaders.push({
loader: require.resolve('sass-resources-loader'),
options: {
resources: [require.resolve('../src/styles/variable.scss')]
}
})
}
}
return loaders;
};
return {
mode: isEnvProduction ? 'production' : isEnvDevelopment && 'development',
// Stop compilation early in production
bail: isEnvProduction,
devtool: isEnvProduction
? shouldUseSourceMap
? 'source-map'
: false
: isEnvDevelopment && 'cheap-module-source-map',
// These are the "entry points" to our application.
// This means they will be the "root" imports that are included in JS bundle.
entry: [
// Include an alternative client for WebpackDevServer. A client's job is to
// connect to WebpackDevServer by a socket and get notified about changes.
// When you save a file, the client will either apply hot updates (in case
// of CSS changes), or refresh the page (in case of JS changes). When you
// make a syntax error, this client will display a syntax error overlay.
// Note: instead of the default WebpackDevServer client, we use a custom one
// to bring better experience for Create React App users. You can replace
// the line below with these two lines if you prefer the stock client:
// require.resolve('webpack-dev-server/client') + '?/',
// require.resolve('webpack/hot/dev-server'),
isEnvDevelopment &&
require.resolve('react-dev-utils/webpackHotDevClient'),
// Finally, this is your app's code:
paths.appIndexJs,
// We include the app code last so that if there is a runtime error during
// initialization, it doesn't blow up the WebpackDevServer client, and
// changing JS code would still trigger a refresh.
].filter(Boolean),
output: {
// The build folder.
path: isEnvProduction ? paths.appBuild : undefined,
// Add /* filename */ comments to generated require()s in the output.
pathinfo: isEnvDevelopment,
// There will be one main bundle, and one file per asynchronous chunk.
// In development, it does not produce real files.
filename: isEnvProduction
? 'static/js/[name].[contenthash:8].js'
: isEnvDevelopment && 'static/js/bundle.js',
// There are also additional JS chunk files if you use code splitting.
chunkFilename: isEnvProduction
? 'static/js/[name].[contenthash:8].chunk.js'
: isEnvDevelopment && 'static/js/[name].chunk.js',
// We inferred the "public path" (such as / or /my-project) from homepage.
// We use "/" in development.
publicPath: publicPath,
// Point sourcemap entries to original disk location (format as URL on Windows)
devtoolModuleFilenameTemplate: isEnvProduction
? info =>
path
.relative(paths.appSrc, info.absoluteResourcePath)
.replace(/\\/g, '/')
: isEnvDevelopment &&
(info => path.resolve(info.absoluteResourcePath).replace(/\\/g, '/')),
},
optimization: {
minimize: isEnvProduction,
minimizer: [
// This is only used in production mode
new TerserPlugin({
terserOptions: {
parse: {
// we want terser to parse ecma 8 code. However, we don't want it
// to apply any minfication steps that turns valid ecma 5 code
// into invalid ecma 5 code. This is why the 'compress' and 'output'
// sections only apply transformations that are ecma 5 safe
// https://github.com/facebook/create-react-app/pull/4234
ecma: 8,
},
compress: {
ecma: 5,
warnings: false,
// Disabled because of an issue with Uglify breaking seemingly valid code:
// https://github.com/facebook/create-react-app/issues/2376
// Pending further investigation:
// https://github.com/mishoo/UglifyJS2/issues/2011
comparisons: false,
// Disabled because of an issue with Terser breaking valid code:
// https://github.com/facebook/create-react-app/issues/5250
// Pending futher investigation:
// https://github.com/terser-js/terser/issues/120
inline: 2,
},
mangle: {
safari10: true,
},
output: {
ecma: 5,
comments: false,
// Turned on because emoji and regex is not minified properly using default
// https://github.com/facebook/create-react-app/issues/2488
ascii_only: true,
},
},
// Use multi-process parallel running to improve the build speed
// Default number of concurrent runs: os.cpus().length - 1
parallel: true,
// Enable file caching
cache: true,
sourceMap: shouldUseSourceMap,
}),
// This is only used in production mode
new OptimizeCSSAssetsPlugin({
cssProcessorOptions: {
parser: safePostCssParser,
map: shouldUseSourceMap
? {
// `inline: false` forces the sourcemap to be output into a
// separate file
inline: false,
// `annotation: true` appends the sourceMappingURL to the end of
// the css file, helping the browser find the sourcemap
annotation: true,
}
: false,
},
}),
],
// Automatically split vendor and commons
// https://twitter.com/wSokra/status/969633336732905474
// https://medium.com/webpack/webpack-4-code-splitting-chunk-graph-and-the-splitchunks-optimization-be739a861366
splitChunks: {
chunks: 'all',
name: false,
},
// Keep the runtime chunk separated to enable long term caching
// https://twitter.com/wSokra/status/969679223278505985
runtimeChunk: true,
},
resolve: {
// This allows you to set a fallback for where Webpack should look for modules.
// We placed these paths second because we want `node_modules` to "win"
// if there are any conflicts. This matches Node resolution mechanism.
// https://github.com/facebook/create-react-app/issues/253
modules: ['node_modules'].concat(
// It is guaranteed to exist because we tweak it in `env.js`
process.env.NODE_PATH.split(path.delimiter).filter(Boolean)
),
// These are the reasonable defaults supported by the Node ecosystem.
// We also include JSX as a common component filename extension to support
// some tools, although we do not recommend using it, see:
// https://github.com/facebook/create-react-app/issues/290
// `web` extension prefixes have been added for better support
// for React Native Web.
extensions: paths.moduleFileExtensions
.map(ext => `.${ext}`)
.filter(ext => useTypeScript || !ext.includes('ts')),
alias: {
// Support React Native Web
// https://www.smashingmagazine.com/2016/08/a-glimpse-into-the-future-with-react-native-for-web/
'react-native': 'react-native-web',
},
plugins: [
// Adds support for installing with Plug'n'Play, leading to faster installs and adding
// guards against forgotten dependencies and such.
PnpWebpackPlugin,
// Prevents users from importing files from outside of src/ (or node_modules/).
// This often causes confusion because we only process files within src/ with babel.
// To fix this, we prevent you from importing files out of src/ -- if you'd like to,
// please link the files into your node_modules/ and let module-resolution kick in.
// Make sure your source files are compiled, as they will not be processed in any way.
new ModuleScopePlugin(paths.appSrc, [paths.appPackageJson]),
],
},
resolveLoader: {
plugins: [
// Also related to Plug'n'Play, but this time it tells Webpack to load its loaders
// from the current package.
PnpWebpackPlugin.moduleLoader(module),
],
},
module: {
strictExportPresence: true,
rules: [
// Disable require.ensure as it's not a standard language feature.
{ parser: { requireEnsure: false } },
// First, run the linter.
// It's important to do this before Babel processes the JS.
{
test: /\.(js|mjs|jsx)$/,
enforce: 'pre',
use: [
{
options: {
formatter: require.resolve('react-dev-utils/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 like "file" loader except that it embeds assets
// smaller than specified limit in bytes as data URLs to avoid requests.
// A missing `test` is equivalent to a match.
{
test: [/\.bmp$/, /\.gif$/, /\.jpe?g$/, /\.png$/],
loader: require.resolve('url-loader'),
options: {
limit: 10000,
name: 'static/media/[name].[hash:8].[ext]',
},
},
// Process application JS with Babel.
// The preset includes JSX, Flow, TypeScript, and some ESnext features.
{
test: /\.(js|mjs|jsx|ts|tsx)$/,
include: paths.appSrc,
loader: require.resolve('babel-loader'),
options: {
customize: require.resolve(
'babel-preset-react-app/webpack-overrides'
),
plugins: [
[
require.resolve('babel-plugin-named-asset-import'),
{
loaderMap: {
svg: {
ReactComponent: '@svgr/webpack?-svgo,+ref![path]',
},
},
},
],
],
// This is a feature of `babel-loader` for webpack (not Babel itself).
// It enables caching results in ./node_modules/.cache/babel-loader/
// directory for faster rebuilds.
cacheDirectory: true,
cacheCompression: isEnvProduction,
compact: isEnvProduction,
},
},
// Process any JS outside of the app with Babel.
// Unlike the application JS, we only compile the standard ES features.
{
test: /\.(js|mjs)$/,
exclude: /@babel(?:\/|\\{1,2})runtime/,
loader: require.resolve('babel-loader'),
options: {
babelrc: false,
configFile: false,
compact: false,
presets: [
[
require.resolve('babel-preset-react-app/dependencies'),
{ helpers: true },
],
],
cacheDirectory: true,
cacheCompression: isEnvProduction,
// If an error happens in a package, it's possible to be
// because it was compiled. Thus, we don't want the browser
// debugger to show the original code. Instead, the code
// being evaluated would be much more helpful.
sourceMaps: false,
},
},
// "postcss" loader applies autoprefixer to our CSS.
// "css" loader resolves paths in CSS and adds assets as dependencies.
// "style" loader turns CSS into JS modules that inject <style> tags.
// In production, we use MiniCSSExtractPlugin to extract that CSS
// to a file, but in development "style" loader enables hot editing
// of CSS.
// By default we support CSS Modules with the extension .module.css
{
test: cssRegex,
exclude: cssModuleRegex,
use: getStyleLoaders({
importLoaders: 1,
sourceMap: isEnvProduction && shouldUseSourceMap,
}),
// Don't consider CSS imports dead code even if the
// containing package claims to have no side effects.
// Remove this when webpack adds a warning or an error for this.
// See https://github.com/webpack/webpack/issues/6571
sideEffects: true,
},
// Adds support for CSS Modules (https://github.com/css-modules/css-modules)
// using the extension .module.css
{
test: cssModuleRegex,
use: getStyleLoaders({
importLoaders: 1,
sourceMap: isEnvProduction && shouldUseSourceMap,
modules: true,
getLocalIdent: getCSSModuleLocalIdent,
}),
},
// Opt-in support for SASS (using .scss or .sass extensions).
// By default we support SASS Modules with the
// extensions .module.scss or .module.sass
{
test: sassRegex,
exclude: sassModuleRegex,
use: getStyleLoaders(
{
importLoaders: 2,
sourceMap: isEnvProduction && shouldUseSourceMap,
modules: false
},
'sass-loader'
),
// Don't consider CSS imports dead code even if the
// containing package claims to have no side effects.
// Remove this when webpack adds a warning or an error for this.
// See https://github.com/webpack/webpack/issues/6571
sideEffects: true,
},
// Adds support for CSS Modules, but using SASS
// using the extension .module.scss or .module.sass
{
test: sassModuleRegex,
use: getStyleLoaders(
{
importLoaders: 2,
sourceMap: isEnvProduction && shouldUseSourceMap,
modules: true,
getLocalIdent: getCSSModuleLocalIdent,
},
'sass-loader'
),
},
{
test: /\.less$/,
use: [
'style-loader',
'css-loader',
{ loader: 'less-loader', options: { modifyVars: theme } },
],
include: /node_modules/
},
// "file" loader makes sure those assets get served by WebpackDevServer.
// When you `import` an asset, you get its (virtual) filename.
// In production, they would get copied to the `build` folder.
// 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
// its runtime that would otherwise be processed through "file" loader.
// Also exclude `html` and `json` extensions so they get processed
// by webpacks internal loaders.
exclude: [/\.(js|mjs|jsx|ts|tsx)$/, /\.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: [
// Generates an `index.html` file with the <script> injected.
new HtmlWebpackPlugin(
Object.assign(
{},
{
inject: true,
template: paths.appHtml,
},
isEnvProduction
? {
minify: {
removeComments: true,
collapseWhitespace: true,
removeRedundantAttributes: true,
useShortDoctype: true,
removeEmptyAttributes: true,
removeStyleLinkTypeAttributes: true,
keepClosingSlash: true,
minifyJS: true,
minifyCSS: true,
minifyURLs: true,
},
}
: undefined
)
),
// Inlines the webpack runtime script. This script is too small to warrant
// a network request.
isEnvProduction &&
shouldInlineRuntimeChunk &&
new InlineChunkHtmlPlugin(HtmlWebpackPlugin, [/runtime~.+[.]js/]),
// 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.
// In development, this will be an empty string.
new InterpolateHtmlPlugin(HtmlWebpackPlugin, env.raw),
// This gives some necessary context to module not found errors, such as
// the requesting resource.
new ModuleNotFoundPlugin(paths.appPath),
// 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 is set to production
// during a production build.
// Otherwise React will be compiled in the very slow development mode.
new webpack.DefinePlugin(env.stringified),
// This is necessary to emit hot updates (currently CSS only):
isEnvDevelopment && new webpack.HotModuleReplacementPlugin(),
// Watcher doesn't work well if you mistype casing in a path so we use
// a plugin that prints an error when you attempt to do this.
// See https://github.com/facebook/create-react-app/issues/240
isEnvDevelopment && new CaseSensitivePathsPlugin(),
// If you require a missing module and then `npm install` it, you still have
// to restart the development server for Webpack to discover it. This plugin
// makes the discovery automatic so you don't have to restart.
// See https://github.com/facebook/create-react-app/issues/186
isEnvDevelopment &&
new WatchMissingNodeModulesPlugin(paths.appNodeModules),
isEnvProduction &&
new MiniCssExtractPlugin({
// Options similar to the same options in webpackOptions.output
// both options are optional
filename: 'static/css/[name].[contenthash:8].css',
chunkFilename: 'static/css/[name].[contenthash:8].chunk.css',
}),
// 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
// having to parse `index.html`.
new ManifestPlugin({
fileName: 'asset-manifest.json',
publicPath: publicPath,
}),
// 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
// solution that requires the user to opt into importing specific locales.
// https://github.com/jmblog/how-to-optimize-momentjs-with-webpack
// You can remove this if you don't use Moment.js:
new webpack.IgnorePlugin(/^\.\/locale$/, /moment$/),
// Generate a service worker script that will precache, and keep up to date,
// the HTML & assets that are part of the Webpack build.
isEnvProduction &&
new WorkboxWebpackPlugin.GenerateSW({
clientsClaim: true,
exclude: [/\.map$/, /asset-manifest\.json$/],
importWorkboxFrom: 'cdn',
navigateFallback: publicUrl + '/index.html',
navigateFallbackBlacklist: [
// Exclude URLs starting with /_, as they're likely an API call
new RegExp('^/_'),
// Exclude URLs containing a dot, as they're likely a resource in
// public/ and not a SPA route
new RegExp('/[^/]+\\.[^/]+$'),
],
}),
// TypeScript type checking
useTypeScript &&
new ForkTsCheckerWebpackPlugin({
typescript: resolve.sync('typescript', {
basedir: paths.appNodeModules,
}),
async: isEnvDevelopment,
useTypescriptIncrementalApi: true,
checkSyntacticErrors: true,
tsconfig: paths.appTsConfig,
reportFiles: [
'**',
'!**/*.json',
'!**/__tests__/**',
'!**/?(*.)(spec|test).*',
'!**/src/setupProxy.*',
'!**/src/setupTests.*',
],
watch: paths.appSrc,
silent: true,
// The formatter is invoked directly in WebpackDevServerUtils during development
formatter: isEnvProduction ? typescriptFormatter : undefined,
}),
].filter(Boolean),
// 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.
node: {
module: 'empty',
dgram: 'empty',
dns: 'mock',
fs: 'empty',
net: 'empty',
tls: 'empty',
child_process: 'empty',
},
// Turn off performance processing because we utilize
// our own hints via the FileSizeReporter
performance: false,
};
};
.history/config/webpack.config_20190419103804.js 0 → 100644
'use strict';
const fs = require('fs');
const path = require('path');
const webpack = require('webpack');
const resolve = require('resolve');
const PnpWebpackPlugin = require('pnp-webpack-plugin');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const CaseSensitivePathsPlugin = require('case-sensitive-paths-webpack-plugin');
const InlineChunkHtmlPlugin = require('react-dev-utils/InlineChunkHtmlPlugin');
const TerserPlugin = require('terser-webpack-plugin');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const OptimizeCSSAssetsPlugin = require('optimize-css-assets-webpack-plugin');
const safePostCssParser = require('postcss-safe-parser');
const ManifestPlugin = require('webpack-manifest-plugin');
const InterpolateHtmlPlugin = require('react-dev-utils/InterpolateHtmlPlugin');
const WorkboxWebpackPlugin = require('workbox-webpack-plugin');
const WatchMissingNodeModulesPlugin = require('react-dev-utils/WatchMissingNodeModulesPlugin');
const ModuleScopePlugin = require('react-dev-utils/ModuleScopePlugin');
const getCSSModuleLocalIdent = require('react-dev-utils/getCSSModuleLocalIdent');
const paths = require('./paths');
const getClientEnvironment = require('./env');
const ModuleNotFoundPlugin = require('react-dev-utils/ModuleNotFoundPlugin');
const ForkTsCheckerWebpackPlugin = require('react-dev-utils/ForkTsCheckerWebpackPlugin');
const typescriptFormatter = require('react-dev-utils/typescriptFormatter');
// Source maps are resource heavy and can cause out of memory issue for large source files.
const shouldUseSourceMap = process.env.GENERATE_SOURCEMAP !== 'false';
// Some apps do not need the benefits of saving a web request, so not inlining the chunk
// makes for a smoother build process.
const shouldInlineRuntimeChunk = process.env.INLINE_RUNTIME_CHUNK !== 'false';
// Check if TypeScript is setup
const useTypeScript = fs.existsSync(paths.appTsConfig);
const theme = require('../package.json').theme;
// style files regexes
const cssRegex = /\.css$/;
const cssModuleRegex = /\.module\.css$/;
const sassRegex = /\.(scss|sass)$/;
const sassModuleRegex = /\.module\.(scss|sass)$/;
// This is the production and development configuration.
// It is focused on developer experience, fast rebuilds, and a minimal bundle.
module.exports = function(webpackEnv) {
const isEnvDevelopment = webpackEnv === 'development';
const isEnvProduction = webpackEnv === 'production';
// 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.
// In development, we always serve from the root. This makes config easier.
const publicPath = isEnvProduction
? paths.servedPath
: isEnvDevelopment && '/';
// Some apps do not use client-side routing with pushState.
// For these, "homepage" can be set to "." to enable relative asset paths.
const shouldUseRelativeAssetPaths = publicPath === './';
// `publicUrl` is just like `publicPath`, but we will provide it to our app
// as %PUBLIC_URL% in `index.html` and `process.env.PUBLIC_URL` in JavaScript.
// Omit trailing slash as %PUBLIC_URL%/xyz looks better than %PUBLIC_URL%xyz.
const publicUrl = isEnvProduction
? publicPath.slice(0, -1)
: isEnvDevelopment && '';
// Get environment variables to inject into our app.
const env = getClientEnvironment(publicUrl);
// common function to get style loaders
const getStyleLoaders = (cssOptions, preProcessor) => {
const loaders = [
isEnvDevelopment && require.resolve('style-loader'),
isEnvProduction && {
loader: MiniCssExtractPlugin.loader,
options: Object.assign(
{},
shouldUseRelativeAssetPaths ? { publicPath: '../../' } : undefined
),
},
{
loader: require.resolve('css-loader'),
options: cssOptions,
},
{
// Options for PostCSS as we reference these options twice
// Adds vendor prefixing based on your specified browser support in
// package.json
loader: require.resolve('postcss-loader'),
options: {
// Necessary for external CSS imports to work
// https://github.com/facebook/create-react-app/issues/2677
ident: 'postcss',
plugins: () => [
require('postcss-flexbugs-fixes'),
require('postcss-preset-env')({
autoprefixer: {
flexbox: 'no-2009',
},
stage: 3,
}),
],
sourceMap: isEnvProduction && shouldUseSourceMap,
},
},
].filter(Boolean);
if (preProcessor) {
loaders.push({
loader: require.resolve(preProcessor),
options: {
sourceMap: isEnvProduction && shouldUseSourceMap,
},
});
if(preProcessor == 'sass-loader' && !cssOptions.modules){
loaders.push({
loader: require.resolve('sass-resources-loader'),
options: {
resources: [require.resolve('../src/styles/variable.scss')]
}
})
}
}
return loaders;
};
return {
mode: isEnvProduction ? 'production' : isEnvDevelopment && 'development',
// Stop compilation early in production
bail: isEnvProduction,
devtool: isEnvProduction
? shouldUseSourceMap
? 'source-map'
: false
: isEnvDevelopment && 'cheap-module-source-map',
// These are the "entry points" to our application.
// This means they will be the "root" imports that are included in JS bundle.
entry: [
// Include an alternative client for WebpackDevServer. A client's job is to
// connect to WebpackDevServer by a socket and get notified about changes.
// When you save a file, the client will either apply hot updates (in case
// of CSS changes), or refresh the page (in case of JS changes). When you
// make a syntax error, this client will display a syntax error overlay.
// Note: instead of the default WebpackDevServer client, we use a custom one
// to bring better experience for Create React App users. You can replace
// the line below with these two lines if you prefer the stock client:
// require.resolve('webpack-dev-server/client') + '?/',
// require.resolve('webpack/hot/dev-server'),
isEnvDevelopment &&
require.resolve('react-dev-utils/webpackHotDevClient'),
// Finally, this is your app's code:
paths.appIndexJs,
// We include the app code last so that if there is a runtime error during
// initialization, it doesn't blow up the WebpackDevServer client, and
// changing JS code would still trigger a refresh.
].filter(Boolean),
output: {
// The build folder.
path: isEnvProduction ? paths.appBuild : undefined,
// Add /* filename */ comments to generated require()s in the output.
pathinfo: isEnvDevelopment,
// There will be one main bundle, and one file per asynchronous chunk.
// In development, it does not produce real files.
filename: isEnvProduction
? 'static/js/[name].[contenthash:8].js'
: isEnvDevelopment && 'static/js/bundle.js',
// There are also additional JS chunk files if you use code splitting.
chunkFilename: isEnvProduction
? 'static/js/[name].[contenthash:8].chunk.js'
: isEnvDevelopment && 'static/js/[name].chunk.js',
// We inferred the "public path" (such as / or /my-project) from homepage.
// We use "/" in development.
publicPath: publicPath,
// Point sourcemap entries to original disk location (format as URL on Windows)
devtoolModuleFilenameTemplate: isEnvProduction
? info =>
path
.relative(paths.appSrc, info.absoluteResourcePath)
.replace(/\\/g, '/')
: isEnvDevelopment &&
(info => path.resolve(info.absoluteResourcePath).replace(/\\/g, '/')),
},
optimization: {
minimize: isEnvProduction,
minimizer: [
// This is only used in production mode
new TerserPlugin({
terserOptions: {
parse: {
// we want terser to parse ecma 8 code. However, we don't want it
// to apply any minfication steps that turns valid ecma 5 code
// into invalid ecma 5 code. This is why the 'compress' and 'output'
// sections only apply transformations that are ecma 5 safe
// https://github.com/facebook/create-react-app/pull/4234
ecma: 8,
},
compress: {
ecma: 5,
warnings: false,
// Disabled because of an issue with Uglify breaking seemingly valid code:
// https://github.com/facebook/create-react-app/issues/2376
// Pending further investigation:
// https://github.com/mishoo/UglifyJS2/issues/2011
comparisons: false,
// Disabled because of an issue with Terser breaking valid code:
// https://github.com/facebook/create-react-app/issues/5250
// Pending futher investigation:
// https://github.com/terser-js/terser/issues/120
inline: 2,
},
mangle: {
safari10: true,
},
output: {
ecma: 5,
comments: false,
// Turned on because emoji and regex is not minified properly using default
// https://github.com/facebook/create-react-app/issues/2488
ascii_only: true,
},
},
// Use multi-process parallel running to improve the build speed
// Default number of concurrent runs: os.cpus().length - 1
parallel: true,
// Enable file caching
cache: true,
sourceMap: shouldUseSourceMap,
}),
// This is only used in production mode
new OptimizeCSSAssetsPlugin({
cssProcessorOptions: {
parser: safePostCssParser,
map: shouldUseSourceMap
? {
// `inline: false` forces the sourcemap to be output into a
// separate file
inline: false,
// `annotation: true` appends the sourceMappingURL to the end of
// the css file, helping the browser find the sourcemap
annotation: true,
}
: false,
},
}),
],
// Automatically split vendor and commons
// https://twitter.com/wSokra/status/969633336732905474
// https://medium.com/webpack/webpack-4-code-splitting-chunk-graph-and-the-splitchunks-optimization-be739a861366
splitChunks: {
chunks: 'all',
name: false,
},
// Keep the runtime chunk separated to enable long term caching
// https://twitter.com/wSokra/status/969679223278505985
runtimeChunk: true,
},
resolve: {
// This allows you to set a fallback for where Webpack should look for modules.
// We placed these paths second because we want `node_modules` to "win"
// if there are any conflicts. This matches Node resolution mechanism.
// https://github.com/facebook/create-react-app/issues/253
modules: ['node_modules'].concat(
// It is guaranteed to exist because we tweak it in `env.js`
process.env.NODE_PATH.split(path.delimiter).filter(Boolean)
),
// These are the reasonable defaults supported by the Node ecosystem.
// We also include JSX as a common component filename extension to support
// some tools, although we do not recommend using it, see:
// https://github.com/facebook/create-react-app/issues/290
// `web` extension prefixes have been added for better support
// for React Native Web.
extensions: paths.moduleFileExtensions
.map(ext => `.${ext}`)
.filter(ext => useTypeScript || !ext.includes('ts')),
alias: {
// Support React Native Web
// https://www.smashingmagazine.com/2016/08/a-glimpse-into-the-future-with-react-native-for-web/
'react-native': 'react-native-web',
},
plugins: [
// Adds support for installing with Plug'n'Play, leading to faster installs and adding
// guards against forgotten dependencies and such.
PnpWebpackPlugin,
// Prevents users from importing files from outside of src/ (or node_modules/).
// This often causes confusion because we only process files within src/ with babel.
// To fix this, we prevent you from importing files out of src/ -- if you'd like to,
// please link the files into your node_modules/ and let module-resolution kick in.
// Make sure your source files are compiled, as they will not be processed in any way.
new ModuleScopePlugin(paths.appSrc, [paths.appPackageJson]),
],
},
resolveLoader: {
plugins: [
// Also related to Plug'n'Play, but this time it tells Webpack to load its loaders
// from the current package.
PnpWebpackPlugin.moduleLoader(module),
],
},
module: {
strictExportPresence: true,
rules: [
// Disable require.ensure as it's not a standard language feature.
{ parser: { requireEnsure: false } },
// First, run the linter.
// It's important to do this before Babel processes the JS.
{
test: /\.(js|mjs|jsx)$/,
enforce: 'pre',
use: [
{
options: {
formatter: require.resolve('react-dev-utils/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 like "file" loader except that it embeds assets
// smaller than specified limit in bytes as data URLs to avoid requests.
// A missing `test` is equivalent to a match.
{
test: [/\.bmp$/, /\.gif$/, /\.jpe?g$/, /\.png$/],
loader: require.resolve('url-loader'),
options: {
limit: 10000,
name: 'static/media/[name].[hash:8].[ext]',
},
},
// Process application JS with Babel.
// The preset includes JSX, Flow, TypeScript, and some ESnext features.
{
test: /\.(js|mjs|jsx|ts|tsx)$/,
include: paths.appSrc,
loader: require.resolve('babel-loader'),
options: {
customize: require.resolve(
'babel-preset-react-app/webpack-overrides'
),
plugins: [
[
require.resolve('babel-plugin-named-asset-import'),
{
loaderMap: {
svg: {
ReactComponent: '@svgr/webpack?-svgo,+ref![path]',
},
},
},
],
],
// This is a feature of `babel-loader` for webpack (not Babel itself).
// It enables caching results in ./node_modules/.cache/babel-loader/
// directory for faster rebuilds.
cacheDirectory: true,
cacheCompression: isEnvProduction,
compact: isEnvProduction,
},
},
// Process any JS outside of the app with Babel.
// Unlike the application JS, we only compile the standard ES features.
{
test: /\.(js|mjs)$/,
exclude: /@babel(?:\/|\\{1,2})runtime/,
loader: require.resolve('babel-loader'),
options: {
babelrc: false,
configFile: false,
compact: false,
presets: [
[
require.resolve('babel-preset-react-app/dependencies'),
{ helpers: true },
],
],
cacheDirectory: true,
cacheCompression: isEnvProduction,
// If an error happens in a package, it's possible to be
// because it was compiled. Thus, we don't want the browser
// debugger to show the original code. Instead, the code
// being evaluated would be much more helpful.
sourceMaps: false,
},
},
// "postcss" loader applies autoprefixer to our CSS.
// "css" loader resolves paths in CSS and adds assets as dependencies.
// "style" loader turns CSS into JS modules that inject <style> tags.
// In production, we use MiniCSSExtractPlugin to extract that CSS
// to a file, but in development "style" loader enables hot editing
// of CSS.
// By default we support CSS Modules with the extension .module.css
{
test: cssRegex,
exclude: cssModuleRegex,
use: getStyleLoaders({
importLoaders: 1,
sourceMap: isEnvProduction && shouldUseSourceMap,
}),
// Don't consider CSS imports dead code even if the
// containing package claims to have no side effects.
// Remove this when webpack adds a warning or an error for this.
// See https://github.com/webpack/webpack/issues/6571
sideEffects: true,
},
// Adds support for CSS Modules (https://github.com/css-modules/css-modules)
// using the extension .module.css
{
test: cssModuleRegex,
use: getStyleLoaders({
importLoaders: 1,
sourceMap: isEnvProduction && shouldUseSourceMap,
modules: true,
getLocalIdent: getCSSModuleLocalIdent,
}),
},
// Opt-in support for SASS (using .scss or .sass extensions).
// By default we support SASS Modules with the
// extensions .module.scss or .module.sass
{
test: sassRegex,
exclude: sassModuleRegex,
use: getStyleLoaders(
{
importLoaders: 2,
sourceMap: isEnvProduction && shouldUseSourceMap,
modules: false
},
'sass-loader'
),
// Don't consider CSS imports dead code even if the
// containing package claims to have no side effects.
// Remove this when webpack adds a warning or an error for this.
// See https://github.com/webpack/webpack/issues/6571
sideEffects: true,
},
// Adds support for CSS Modules, but using SASS
// using the extension .module.scss or .module.sass
{
test: sassModuleRegex,
use: getStyleLoaders(
{
importLoaders: 2,
sourceMap: isEnvProduction && shouldUseSourceMap,
modules: true,
getLocalIdent: getCSSModuleLocalIdent,
},
'sass-loader'
),
},
{
test: /\.less$/,
exclude: [/node_modules/],
use: [
require.resolve('style-loader'),
{
loader: require.resolve('css-loader'),
options: {
modules: true,
localIndexName: "[name]__[local]-[hash:base64:5]"
},
},
{
loader: require.resolve('less-loader'), // compiles Less to CSS
},
],
},
// "file" loader makes sure those assets get served by WebpackDevServer.
// When you `import` an asset, you get its (virtual) filename.
// In production, they would get copied to the `build` folder.
// 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
// its runtime that would otherwise be processed through "file" loader.
// Also exclude `html` and `json` extensions so they get processed
// by webpacks internal loaders.
exclude: [/\.(js|mjs|jsx|ts|tsx)$/, /\.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: [
// Generates an `index.html` file with the <script> injected.
new HtmlWebpackPlugin(
Object.assign(
{},
{
inject: true,
template: paths.appHtml,
},
isEnvProduction
? {
minify: {
removeComments: true,
collapseWhitespace: true,
removeRedundantAttributes: true,
useShortDoctype: true,
removeEmptyAttributes: true,
removeStyleLinkTypeAttributes: true,
keepClosingSlash: true,
minifyJS: true,
minifyCSS: true,
minifyURLs: true,
},
}
: undefined
)
),
// Inlines the webpack runtime script. This script is too small to warrant
// a network request.
isEnvProduction &&
shouldInlineRuntimeChunk &&
new InlineChunkHtmlPlugin(HtmlWebpackPlugin, [/runtime~.+[.]js/]),
// 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.
// In development, this will be an empty string.
new InterpolateHtmlPlugin(HtmlWebpackPlugin, env.raw),
// This gives some necessary context to module not found errors, such as
// the requesting resource.
new ModuleNotFoundPlugin(paths.appPath),
// 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 is set to production
// during a production build.
// Otherwise React will be compiled in the very slow development mode.
new webpack.DefinePlugin(env.stringified),
// This is necessary to emit hot updates (currently CSS only):
isEnvDevelopment && new webpack.HotModuleReplacementPlugin(),
// Watcher doesn't work well if you mistype casing in a path so we use
// a plugin that prints an error when you attempt to do this.
// See https://github.com/facebook/create-react-app/issues/240
isEnvDevelopment && new CaseSensitivePathsPlugin(),
// If you require a missing module and then `npm install` it, you still have
// to restart the development server for Webpack to discover it. This plugin
// makes the discovery automatic so you don't have to restart.
// See https://github.com/facebook/create-react-app/issues/186
isEnvDevelopment &&
new WatchMissingNodeModulesPlugin(paths.appNodeModules),
isEnvProduction &&
new MiniCssExtractPlugin({
// Options similar to the same options in webpackOptions.output
// both options are optional
filename: 'static/css/[name].[contenthash:8].css',
chunkFilename: 'static/css/[name].[contenthash:8].chunk.css',
}),
// 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
// having to parse `index.html`.
new ManifestPlugin({
fileName: 'asset-manifest.json',
publicPath: publicPath,
}),
// 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
// solution that requires the user to opt into importing specific locales.
// https://github.com/jmblog/how-to-optimize-momentjs-with-webpack
// You can remove this if you don't use Moment.js:
new webpack.IgnorePlugin(/^\.\/locale$/, /moment$/),
// Generate a service worker script that will precache, and keep up to date,
// the HTML & assets that are part of the Webpack build.
isEnvProduction &&
new WorkboxWebpackPlugin.GenerateSW({
clientsClaim: true,
exclude: [/\.map$/, /asset-manifest\.json$/],
importWorkboxFrom: 'cdn',
navigateFallback: publicUrl + '/index.html',
navigateFallbackBlacklist: [
// Exclude URLs starting with /_, as they're likely an API call
new RegExp('^/_'),
// Exclude URLs containing a dot, as they're likely a resource in
// public/ and not a SPA route
new RegExp('/[^/]+\\.[^/]+$'),
],
}),
// TypeScript type checking
useTypeScript &&
new ForkTsCheckerWebpackPlugin({
typescript: resolve.sync('typescript', {
basedir: paths.appNodeModules,
}),
async: isEnvDevelopment,
useTypescriptIncrementalApi: true,
checkSyntacticErrors: true,
tsconfig: paths.appTsConfig,
reportFiles: [
'**',
'!**/*.json',
'!**/__tests__/**',
'!**/?(*.)(spec|test).*',
'!**/src/setupProxy.*',
'!**/src/setupTests.*',
],
watch: paths.appSrc,
silent: true,
// The formatter is invoked directly in WebpackDevServerUtils during development
formatter: isEnvProduction ? typescriptFormatter : undefined,
}),
].filter(Boolean),
// 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.
node: {
module: 'empty',
dgram: 'empty',
dns: 'mock',
fs: 'empty',
net: 'empty',
tls: 'empty',
child_process: 'empty',
},
// Turn off performance processing because we utilize
// our own hints via the FileSizeReporter
performance: false,
};
};
.history/config/webpack.config_20190419104408.js 0 → 100644
'use strict';
const fs = require('fs');
const path = require('path');
const webpack = require('webpack');
const resolve = require('resolve');
const PnpWebpackPlugin = require('pnp-webpack-plugin');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const CaseSensitivePathsPlugin = require('case-sensitive-paths-webpack-plugin');
const InlineChunkHtmlPlugin = require('react-dev-utils/InlineChunkHtmlPlugin');
const TerserPlugin = require('terser-webpack-plugin');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const OptimizeCSSAssetsPlugin = require('optimize-css-assets-webpack-plugin');
const safePostCssParser = require('postcss-safe-parser');
const ManifestPlugin = require('webpack-manifest-plugin');
const InterpolateHtmlPlugin = require('react-dev-utils/InterpolateHtmlPlugin');
const WorkboxWebpackPlugin = require('workbox-webpack-plugin');
const WatchMissingNodeModulesPlugin = require('react-dev-utils/WatchMissingNodeModulesPlugin');
const ModuleScopePlugin = require('react-dev-utils/ModuleScopePlugin');
const getCSSModuleLocalIdent = require('react-dev-utils/getCSSModuleLocalIdent');
const paths = require('./paths');
const getClientEnvironment = require('./env');
const ModuleNotFoundPlugin = require('react-dev-utils/ModuleNotFoundPlugin');
const ForkTsCheckerWebpackPlugin = require('react-dev-utils/ForkTsCheckerWebpackPlugin');
const typescriptFormatter = require('react-dev-utils/typescriptFormatter');
// Source maps are resource heavy and can cause out of memory issue for large source files.
const shouldUseSourceMap = process.env.GENERATE_SOURCEMAP !== 'false';
// Some apps do not need the benefits of saving a web request, so not inlining the chunk
// makes for a smoother build process.
const shouldInlineRuntimeChunk = process.env.INLINE_RUNTIME_CHUNK !== 'false';
// Check if TypeScript is setup
const useTypeScript = fs.existsSync(paths.appTsConfig);
const theme = require('../package.json').theme;
// style files regexes
const cssRegex = /\.css$/;
const cssModuleRegex = /\.module\.css$/;
const sassRegex = /\.(scss|sass)$/;
const sassModuleRegex = /\.module\.(scss|sass)$/;
// This is the production and development configuration.
// It is focused on developer experience, fast rebuilds, and a minimal bundle.
module.exports = function(webpackEnv) {
const isEnvDevelopment = webpackEnv === 'development';
const isEnvProduction = webpackEnv === 'production';
// 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.
// In development, we always serve from the root. This makes config easier.
const publicPath = isEnvProduction
? paths.servedPath
: isEnvDevelopment && '/';
// Some apps do not use client-side routing with pushState.
// For these, "homepage" can be set to "." to enable relative asset paths.
const shouldUseRelativeAssetPaths = publicPath === './';
// `publicUrl` is just like `publicPath`, but we will provide it to our app
// as %PUBLIC_URL% in `index.html` and `process.env.PUBLIC_URL` in JavaScript.
// Omit trailing slash as %PUBLIC_URL%/xyz looks better than %PUBLIC_URL%xyz.
const publicUrl = isEnvProduction
? publicPath.slice(0, -1)
: isEnvDevelopment && '';
// Get environment variables to inject into our app.
const env = getClientEnvironment(publicUrl);
// common function to get style loaders
const getStyleLoaders = (cssOptions, preProcessor) => {
const loaders = [
isEnvDevelopment && require.resolve('style-loader'),
isEnvProduction && {
loader: MiniCssExtractPlugin.loader,
options: Object.assign(
{},
shouldUseRelativeAssetPaths ? { publicPath: '../../' } : undefined
),
},
{
loader: require.resolve('css-loader'),
options: cssOptions,
},
{
// Options for PostCSS as we reference these options twice
// Adds vendor prefixing based on your specified browser support in
// package.json
loader: require.resolve('postcss-loader'),
options: {
// Necessary for external CSS imports to work
// https://github.com/facebook/create-react-app/issues/2677
ident: 'postcss',
plugins: () => [
require('postcss-flexbugs-fixes'),
require('postcss-preset-env')({
autoprefixer: {
flexbox: 'no-2009',
},
stage: 3,
}),
],
sourceMap: isEnvProduction && shouldUseSourceMap,
},
},
].filter(Boolean);
if (preProcessor) {
loaders.push({
loader: require.resolve(preProcessor),
options: {
sourceMap: isEnvProduction && shouldUseSourceMap,
},
});
if(preProcessor == 'sass-loader' && !cssOptions.modules){
loaders.push({
loader: require.resolve('sass-resources-loader'),
options: {
resources: [require.resolve('../src/styles/variable.scss')]
}
})
}
}
return loaders;
};
return {
mode: isEnvProduction ? 'production' : isEnvDevelopment && 'development',
// Stop compilation early in production
bail: isEnvProduction,
devtool: isEnvProduction
? shouldUseSourceMap
? 'source-map'
: false
: isEnvDevelopment && 'cheap-module-source-map',
// These are the "entry points" to our application.
// This means they will be the "root" imports that are included in JS bundle.
entry: [
// Include an alternative client for WebpackDevServer. A client's job is to
// connect to WebpackDevServer by a socket and get notified about changes.
// When you save a file, the client will either apply hot updates (in case
// of CSS changes), or refresh the page (in case of JS changes). When you
// make a syntax error, this client will display a syntax error overlay.
// Note: instead of the default WebpackDevServer client, we use a custom one
// to bring better experience for Create React App users. You can replace
// the line below with these two lines if you prefer the stock client:
// require.resolve('webpack-dev-server/client') + '?/',
// require.resolve('webpack/hot/dev-server'),
isEnvDevelopment &&
require.resolve('react-dev-utils/webpackHotDevClient'),
// Finally, this is your app's code:
paths.appIndexJs,
// We include the app code last so that if there is a runtime error during
// initialization, it doesn't blow up the WebpackDevServer client, and
// changing JS code would still trigger a refresh.
].filter(Boolean),
output: {
// The build folder.
path: isEnvProduction ? paths.appBuild : undefined,
// Add /* filename */ comments to generated require()s in the output.
pathinfo: isEnvDevelopment,
// There will be one main bundle, and one file per asynchronous chunk.
// In development, it does not produce real files.
filename: isEnvProduction
? 'static/js/[name].[contenthash:8].js'
: isEnvDevelopment && 'static/js/bundle.js',
// There are also additional JS chunk files if you use code splitting.
chunkFilename: isEnvProduction
? 'static/js/[name].[contenthash:8].chunk.js'
: isEnvDevelopment && 'static/js/[name].chunk.js',
// We inferred the "public path" (such as / or /my-project) from homepage.
// We use "/" in development.
publicPath: publicPath,
// Point sourcemap entries to original disk location (format as URL on Windows)
devtoolModuleFilenameTemplate: isEnvProduction
? info =>
path
.relative(paths.appSrc, info.absoluteResourcePath)
.replace(/\\/g, '/')
: isEnvDevelopment &&
(info => path.resolve(info.absoluteResourcePath).replace(/\\/g, '/')),
},
optimization: {
minimize: isEnvProduction,
minimizer: [
// This is only used in production mode
new TerserPlugin({
terserOptions: {
parse: {
// we want terser to parse ecma 8 code. However, we don't want it
// to apply any minfication steps that turns valid ecma 5 code
// into invalid ecma 5 code. This is why the 'compress' and 'output'
// sections only apply transformations that are ecma 5 safe
// https://github.com/facebook/create-react-app/pull/4234
ecma: 8,
},
compress: {
ecma: 5,
warnings: false,
// Disabled because of an issue with Uglify breaking seemingly valid code:
// https://github.com/facebook/create-react-app/issues/2376
// Pending further investigation:
// https://github.com/mishoo/UglifyJS2/issues/2011
comparisons: false,
// Disabled because of an issue with Terser breaking valid code:
// https://github.com/facebook/create-react-app/issues/5250
// Pending futher investigation:
// https://github.com/terser-js/terser/issues/120
inline: 2,
},
mangle: {
safari10: true,
},
output: {
ecma: 5,
comments: false,
// Turned on because emoji and regex is not minified properly using default
// https://github.com/facebook/create-react-app/issues/2488
ascii_only: true,
},
},
// Use multi-process parallel running to improve the build speed
// Default number of concurrent runs: os.cpus().length - 1
parallel: true,
// Enable file caching
cache: true,
sourceMap: shouldUseSourceMap,
}),
// This is only used in production mode
new OptimizeCSSAssetsPlugin({
cssProcessorOptions: {
parser: safePostCssParser,
map: shouldUseSourceMap
? {
// `inline: false` forces the sourcemap to be output into a
// separate file
inline: false,
// `annotation: true` appends the sourceMappingURL to the end of
// the css file, helping the browser find the sourcemap
annotation: true,
}
: false,
},
}),
],
// Automatically split vendor and commons
// https://twitter.com/wSokra/status/969633336732905474
// https://medium.com/webpack/webpack-4-code-splitting-chunk-graph-and-the-splitchunks-optimization-be739a861366
splitChunks: {
chunks: 'all',
name: false,
},
// Keep the runtime chunk separated to enable long term caching
// https://twitter.com/wSokra/status/969679223278505985
runtimeChunk: true,
},
resolve: {
// This allows you to set a fallback for where Webpack should look for modules.
// We placed these paths second because we want `node_modules` to "win"
// if there are any conflicts. This matches Node resolution mechanism.
// https://github.com/facebook/create-react-app/issues/253
modules: ['node_modules'].concat(
// It is guaranteed to exist because we tweak it in `env.js`
process.env.NODE_PATH.split(path.delimiter).filter(Boolean)
),
// These are the reasonable defaults supported by the Node ecosystem.
// We also include JSX as a common component filename extension to support
// some tools, although we do not recommend using it, see:
// https://github.com/facebook/create-react-app/issues/290
// `web` extension prefixes have been added for better support
// for React Native Web.
extensions: paths.moduleFileExtensions
.map(ext => `.${ext}`)
.filter(ext => useTypeScript || !ext.includes('ts')),
alias: {
// Support React Native Web
// https://www.smashingmagazine.com/2016/08/a-glimpse-into-the-future-with-react-native-for-web/
'react-native': 'react-native-web',
},
plugins: [
// Adds support for installing with Plug'n'Play, leading to faster installs and adding
// guards against forgotten dependencies and such.
PnpWebpackPlugin,
// Prevents users from importing files from outside of src/ (or node_modules/).
// This often causes confusion because we only process files within src/ with babel.
// To fix this, we prevent you from importing files out of src/ -- if you'd like to,
// please link the files into your node_modules/ and let module-resolution kick in.
// Make sure your source files are compiled, as they will not be processed in any way.
new ModuleScopePlugin(paths.appSrc, [paths.appPackageJson]),
],
},
resolveLoader: {
plugins: [
// Also related to Plug'n'Play, but this time it tells Webpack to load its loaders
// from the current package.
PnpWebpackPlugin.moduleLoader(module),
],
},
module: {
strictExportPresence: true,
rules: [
// Disable require.ensure as it's not a standard language feature.
{ parser: { requireEnsure: false } },
// First, run the linter.
// It's important to do this before Babel processes the JS.
{
test: /\.(js|mjs|jsx)$/,
enforce: 'pre',
use: [
{
options: {
formatter: require.resolve('react-dev-utils/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 like "file" loader except that it embeds assets
// smaller than specified limit in bytes as data URLs to avoid requests.
// A missing `test` is equivalent to a match.
{
test: [/\.bmp$/, /\.gif$/, /\.jpe?g$/, /\.png$/],
loader: require.resolve('url-loader'),
options: {
limit: 10000,
name: 'static/media/[name].[hash:8].[ext]',
},
},
// Process application JS with Babel.
// The preset includes JSX, Flow, TypeScript, and some ESnext features.
{
test: /\.(js|mjs|jsx|ts|tsx)$/,
include: paths.appSrc,
loader: require.resolve('babel-loader'),
options: {
customize: require.resolve(
'babel-preset-react-app/webpack-overrides'
),
plugins: [
[
require.resolve('babel-plugin-named-asset-import'),
{
loaderMap: {
svg: {
ReactComponent: '@svgr/webpack?-svgo,+ref![path]',
},
},
},
],
],
// This is a feature of `babel-loader` for webpack (not Babel itself).
// It enables caching results in ./node_modules/.cache/babel-loader/
// directory for faster rebuilds.
cacheDirectory: true,
cacheCompression: isEnvProduction,
compact: isEnvProduction,
},
},
// Process any JS outside of the app with Babel.
// Unlike the application JS, we only compile the standard ES features.
{
test: /\.(js|mjs)$/,
exclude: /@babel(?:\/|\\{1,2})runtime/,
loader: require.resolve('babel-loader'),
options: {
babelrc: false,
configFile: false,
compact: false,
presets: [
[
require.resolve('babel-preset-react-app/dependencies'),
{ helpers: true },
],
],
cacheDirectory: true,
cacheCompression: isEnvProduction,
// If an error happens in a package, it's possible to be
// because it was compiled. Thus, we don't want the browser
// debugger to show the original code. Instead, the code
// being evaluated would be much more helpful.
sourceMaps: false,
},
},
// "postcss" loader applies autoprefixer to our CSS.
// "css" loader resolves paths in CSS and adds assets as dependencies.
// "style" loader turns CSS into JS modules that inject <style> tags.
// In production, we use MiniCSSExtractPlugin to extract that CSS
// to a file, but in development "style" loader enables hot editing
// of CSS.
// By default we support CSS Modules with the extension .module.css
{
test: cssRegex,
exclude: cssModuleRegex,
use: getStyleLoaders({
importLoaders: 1,
sourceMap: isEnvProduction && shouldUseSourceMap,
}),
// Don't consider CSS imports dead code even if the
// containing package claims to have no side effects.
// Remove this when webpack adds a warning or an error for this.
// See https://github.com/webpack/webpack/issues/6571
sideEffects: true,
},
// Adds support for CSS Modules (https://github.com/css-modules/css-modules)
// using the extension .module.css
{
test: cssModuleRegex,
use: getStyleLoaders({
importLoaders: 1,
sourceMap: isEnvProduction && shouldUseSourceMap,
modules: true,
getLocalIdent: getCSSModuleLocalIdent,
}),
},
// Opt-in support for SASS (using .scss or .sass extensions).
// By default we support SASS Modules with the
// extensions .module.scss or .module.sass
{
test: sassRegex,
exclude: sassModuleRegex,
use: getStyleLoaders(
{
importLoaders: 2,
sourceMap: isEnvProduction && shouldUseSourceMap,
modules: false
},
'sass-loader'
),
// Don't consider CSS imports dead code even if the
// containing package claims to have no side effects.
// Remove this when webpack adds a warning or an error for this.
// See https://github.com/webpack/webpack/issues/6571
sideEffects: true,
},
// Adds support for CSS Modules, but using SASS
// using the extension .module.scss or .module.sass
{
test: sassModuleRegex,
use: getStyleLoaders(
{
importLoaders: 2,
sourceMap: isEnvProduction && shouldUseSourceMap,
modules: true,
getLocalIdent: getCSSModuleLocalIdent,
},
'sass-loader'
),
},
// Process JS with Babel.
//TODO @Lynn 这里是设置antd样式生效的关键
{
test: /\.(js|jsx|mjs)$/,
include: paths.appSrc,
loader: require.resolve('babel-loader'),
options: {
plugins: [
// 引入样式为 css
['import', { libraryName: 'antd', style: 'css' }],
// 改动: 引入样式为 less
// ['import', { libraryName: 'antd', style: true }],
],
// This is a feature of `babel-loader` for webpack (not Babel itself).
// It enables caching results in ./node_modules/.cache/babel-loader/
// directory for faster rebuilds.
cacheDirectory: true,
},
},
// "postcss" loader applies autoprefixer to our CSS.
// "css" loader resolves paths in CSS and adds assets as dependencies.
// "style" loader turns CSS into JS modules that inject <style> tags.
// In production, we use a plugin to extract that CSS to a file, but
// in development "style" loader enables hot editing of CSS.
//TODO @Lynn 这里设置css开启modules支持,node_modules和antd里面的css不开启
{
test: /\.css$/,
exclude: /node_modules|antd\.css/,
use: [
require.resolve('style-loader'),
{
loader: require.resolve('css-loader'),
options: {
importLoaders: 1,
// TODO 配置对css modules的支持
// 如果不想开启CSS的module功能 注释下面一段代码即可
modules: true,
localIdentName: '[name]__[local]__[hash:base64:5]',
},
},
{
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',
}),
],
},
},
],
},
//TODO @Lynn 然后针对node_modules和antd里面的css写编译配置
{
test: /\.css$/,
include: /node_modules|antd\.css/,
use: [
require.resolve('style-loader'),
{
loader: require.resolve('css-loader'),
options: {
importLoaders: 1,
}
},
{
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',
}),
],
},
},
],
},
{
test: /\.less$/,
exclude: [/node_modules/],
use: [
require.resolve('style-loader'),
{
loader: require.resolve('css-loader'),
options: {
modules: true,
localIndexName: "[name]__[local]-[hash:base64:5]"
},
},
{
loader: require.resolve('less-loader'), // compiles Less to CSS
},
],
},
// "file" loader makes sure those assets get served by WebpackDevServer.
// When you `import` an asset, you get its (virtual) filename.
// In production, they would get copied to the `build` folder.
// 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
// its runtime that would otherwise be processed through "file" loader.
// Also exclude `html` and `json` extensions so they get processed
// by webpacks internal loaders.
exclude: [/\.(js|mjs|jsx|ts|tsx)$/, /\.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: [
// Generates an `index.html` file with the <script> injected.
new HtmlWebpackPlugin(
Object.assign(
{},
{
inject: true,
template: paths.appHtml,
},
isEnvProduction
? {
minify: {
removeComments: true,
collapseWhitespace: true,
removeRedundantAttributes: true,
useShortDoctype: true,
removeEmptyAttributes: true,
removeStyleLinkTypeAttributes: true,
keepClosingSlash: true,
minifyJS: true,
minifyCSS: true,
minifyURLs: true,
},
}
: undefined
)
),
// Inlines the webpack runtime script. This script is too small to warrant
// a network request.
isEnvProduction &&
shouldInlineRuntimeChunk &&
new InlineChunkHtmlPlugin(HtmlWebpackPlugin, [/runtime~.+[.]js/]),
// 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.
// In development, this will be an empty string.
new InterpolateHtmlPlugin(HtmlWebpackPlugin, env.raw),
// This gives some necessary context to module not found errors, such as
// the requesting resource.
new ModuleNotFoundPlugin(paths.appPath),
// 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 is set to production
// during a production build.
// Otherwise React will be compiled in the very slow development mode.
new webpack.DefinePlugin(env.stringified),
// This is necessary to emit hot updates (currently CSS only):
isEnvDevelopment && new webpack.HotModuleReplacementPlugin(),
// Watcher doesn't work well if you mistype casing in a path so we use
// a plugin that prints an error when you attempt to do this.
// See https://github.com/facebook/create-react-app/issues/240
isEnvDevelopment && new CaseSensitivePathsPlugin(),
// If you require a missing module and then `npm install` it, you still have
// to restart the development server for Webpack to discover it. This plugin
// makes the discovery automatic so you don't have to restart.
// See https://github.com/facebook/create-react-app/issues/186
isEnvDevelopment &&
new WatchMissingNodeModulesPlugin(paths.appNodeModules),
isEnvProduction &&
new MiniCssExtractPlugin({
// Options similar to the same options in webpackOptions.output
// both options are optional
filename: 'static/css/[name].[contenthash:8].css',
chunkFilename: 'static/css/[name].[contenthash:8].chunk.css',
}),
// 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
// having to parse `index.html`.
new ManifestPlugin({
fileName: 'asset-manifest.json',
publicPath: publicPath,
}),
// 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
// solution that requires the user to opt into importing specific locales.
// https://github.com/jmblog/how-to-optimize-momentjs-with-webpack
// You can remove this if you don't use Moment.js:
new webpack.IgnorePlugin(/^\.\/locale$/, /moment$/),
// Generate a service worker script that will precache, and keep up to date,
// the HTML & assets that are part of the Webpack build.
isEnvProduction &&
new WorkboxWebpackPlugin.GenerateSW({
clientsClaim: true,
exclude: [/\.map$/, /asset-manifest\.json$/],
importWorkboxFrom: 'cdn',
navigateFallback: publicUrl + '/index.html',
navigateFallbackBlacklist: [
// Exclude URLs starting with /_, as they're likely an API call
new RegExp('^/_'),
// Exclude URLs containing a dot, as they're likely a resource in
// public/ and not a SPA route
new RegExp('/[^/]+\\.[^/]+$'),
],
}),
// TypeScript type checking
useTypeScript &&
new ForkTsCheckerWebpackPlugin({
typescript: resolve.sync('typescript', {
basedir: paths.appNodeModules,
}),
async: isEnvDevelopment,
useTypescriptIncrementalApi: true,
checkSyntacticErrors: true,
tsconfig: paths.appTsConfig,
reportFiles: [
'**',
'!**/*.json',
'!**/__tests__/**',
'!**/?(*.)(spec|test).*',
'!**/src/setupProxy.*',
'!**/src/setupTests.*',
],
watch: paths.appSrc,
silent: true,
// The formatter is invoked directly in WebpackDevServerUtils during development
formatter: isEnvProduction ? typescriptFormatter : undefined,
}),
].filter(Boolean),
// 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.
node: {
module: 'empty',
dgram: 'empty',
dns: 'mock',
fs: 'empty',
net: 'empty',
tls: 'empty',
child_process: 'empty',
},
// Turn off performance processing because we utilize
// our own hints via the FileSizeReporter
performance: false,
};
};
.history/config/webpack.config_20190419104729.js 0 → 100644
'use strict';
const fs = require('fs');
const path = require('path');
const webpack = require('webpack');
const resolve = require('resolve');
const PnpWebpackPlugin = require('pnp-webpack-plugin');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const CaseSensitivePathsPlugin = require('case-sensitive-paths-webpack-plugin');
const InlineChunkHtmlPlugin = require('react-dev-utils/InlineChunkHtmlPlugin');
const TerserPlugin = require('terser-webpack-plugin');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const OptimizeCSSAssetsPlugin = require('optimize-css-assets-webpack-plugin');
const safePostCssParser = require('postcss-safe-parser');
const ManifestPlugin = require('webpack-manifest-plugin');
const InterpolateHtmlPlugin = require('react-dev-utils/InterpolateHtmlPlugin');
const WorkboxWebpackPlugin = require('workbox-webpack-plugin');
const WatchMissingNodeModulesPlugin = require('react-dev-utils/WatchMissingNodeModulesPlugin');
const ModuleScopePlugin = require('react-dev-utils/ModuleScopePlugin');
const getCSSModuleLocalIdent = require('react-dev-utils/getCSSModuleLocalIdent');
const paths = require('./paths');
const getClientEnvironment = require('./env');
const ModuleNotFoundPlugin = require('react-dev-utils/ModuleNotFoundPlugin');
const ForkTsCheckerWebpackPlugin = require('react-dev-utils/ForkTsCheckerWebpackPlugin');
const typescriptFormatter = require('react-dev-utils/typescriptFormatter');
// Source maps are resource heavy and can cause out of memory issue for large source files.
const shouldUseSourceMap = process.env.GENERATE_SOURCEMAP !== 'false';
// Some apps do not need the benefits of saving a web request, so not inlining the chunk
// makes for a smoother build process.
const shouldInlineRuntimeChunk = process.env.INLINE_RUNTIME_CHUNK !== 'false';
// Check if TypeScript is setup
const useTypeScript = fs.existsSync(paths.appTsConfig);
const theme = require('../package.json').theme;
// style files regexes
const cssRegex = /\.css$/;
const cssModuleRegex = /\.module\.css$/;
const sassRegex = /\.(scss|sass)$/;
const sassModuleRegex = /\.module\.(scss|sass)$/;
// This is the production and development configuration.
// It is focused on developer experience, fast rebuilds, and a minimal bundle.
module.exports = function(webpackEnv) {
const isEnvDevelopment = webpackEnv === 'development';
const isEnvProduction = webpackEnv === 'production';
// 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.
// In development, we always serve from the root. This makes config easier.
const publicPath = isEnvProduction
? paths.servedPath
: isEnvDevelopment && '/';
// Some apps do not use client-side routing with pushState.
// For these, "homepage" can be set to "." to enable relative asset paths.
const shouldUseRelativeAssetPaths = publicPath === './';
// `publicUrl` is just like `publicPath`, but we will provide it to our app
// as %PUBLIC_URL% in `index.html` and `process.env.PUBLIC_URL` in JavaScript.
// Omit trailing slash as %PUBLIC_URL%/xyz looks better than %PUBLIC_URL%xyz.
const publicUrl = isEnvProduction
? publicPath.slice(0, -1)
: isEnvDevelopment && '';
// Get environment variables to inject into our app.
const env = getClientEnvironment(publicUrl);
// common function to get style loaders
const getStyleLoaders = (cssOptions, preProcessor) => {
const loaders = [
isEnvDevelopment && require.resolve('style-loader'),
isEnvProduction && {
loader: MiniCssExtractPlugin.loader,
options: Object.assign(
{},
shouldUseRelativeAssetPaths ? { publicPath: '../../' } : undefined
),
},
{
loader: require.resolve('css-loader'),
options: cssOptions,
},
{
// Options for PostCSS as we reference these options twice
// Adds vendor prefixing based on your specified browser support in
// package.json
loader: require.resolve('postcss-loader'),
options: {
// Necessary for external CSS imports to work
// https://github.com/facebook/create-react-app/issues/2677
ident: 'postcss',
plugins: () => [
require('postcss-flexbugs-fixes'),
require('postcss-preset-env')({
autoprefixer: {
flexbox: 'no-2009',
},
stage: 3,
}),
],
sourceMap: isEnvProduction && shouldUseSourceMap,
},
},
].filter(Boolean);
if (preProcessor) {
loaders.push({
loader: require.resolve(preProcessor),
options: {
sourceMap: isEnvProduction && shouldUseSourceMap,
},
});
if(preProcessor == 'sass-loader' && !cssOptions.modules){
loaders.push({
loader: require.resolve('sass-resources-loader'),
options: {
resources: [require.resolve('../src/styles/variable.scss')]
}
})
}
}
return loaders;
};
return {
mode: isEnvProduction ? 'production' : isEnvDevelopment && 'development',
// Stop compilation early in production
bail: isEnvProduction,
devtool: isEnvProduction
? shouldUseSourceMap
? 'source-map'
: false
: isEnvDevelopment && 'cheap-module-source-map',
// These are the "entry points" to our application.
// This means they will be the "root" imports that are included in JS bundle.
entry: [
// Include an alternative client for WebpackDevServer. A client's job is to
// connect to WebpackDevServer by a socket and get notified about changes.
// When you save a file, the client will either apply hot updates (in case
// of CSS changes), or refresh the page (in case of JS changes). When you
// make a syntax error, this client will display a syntax error overlay.
// Note: instead of the default WebpackDevServer client, we use a custom one
// to bring better experience for Create React App users. You can replace
// the line below with these two lines if you prefer the stock client:
// require.resolve('webpack-dev-server/client') + '?/',
// require.resolve('webpack/hot/dev-server'),
isEnvDevelopment &&
require.resolve('react-dev-utils/webpackHotDevClient'),
// Finally, this is your app's code:
paths.appIndexJs,
// We include the app code last so that if there is a runtime error during
// initialization, it doesn't blow up the WebpackDevServer client, and
// changing JS code would still trigger a refresh.
].filter(Boolean),
output: {
// The build folder.
path: isEnvProduction ? paths.appBuild : undefined,
// Add /* filename */ comments to generated require()s in the output.
pathinfo: isEnvDevelopment,
// There will be one main bundle, and one file per asynchronous chunk.
// In development, it does not produce real files.
filename: isEnvProduction
? 'static/js/[name].[contenthash:8].js'
: isEnvDevelopment && 'static/js/bundle.js',
// There are also additional JS chunk files if you use code splitting.
chunkFilename: isEnvProduction
? 'static/js/[name].[contenthash:8].chunk.js'
: isEnvDevelopment && 'static/js/[name].chunk.js',
// We inferred the "public path" (such as / or /my-project) from homepage.
// We use "/" in development.
publicPath: publicPath,
// Point sourcemap entries to original disk location (format as URL on Windows)
devtoolModuleFilenameTemplate: isEnvProduction
? info =>
path
.relative(paths.appSrc, info.absoluteResourcePath)
.replace(/\\/g, '/')
: isEnvDevelopment &&
(info => path.resolve(info.absoluteResourcePath).replace(/\\/g, '/')),
},
optimization: {
minimize: isEnvProduction,
minimizer: [
// This is only used in production mode
new TerserPlugin({
terserOptions: {
parse: {
// we want terser to parse ecma 8 code. However, we don't want it
// to apply any minfication steps that turns valid ecma 5 code
// into invalid ecma 5 code. This is why the 'compress' and 'output'
// sections only apply transformations that are ecma 5 safe
// https://github.com/facebook/create-react-app/pull/4234
ecma: 8,
},
compress: {
ecma: 5,
warnings: false,
// Disabled because of an issue with Uglify breaking seemingly valid code:
// https://github.com/facebook/create-react-app/issues/2376
// Pending further investigation:
// https://github.com/mishoo/UglifyJS2/issues/2011
comparisons: false,
// Disabled because of an issue with Terser breaking valid code:
// https://github.com/facebook/create-react-app/issues/5250
// Pending futher investigation:
// https://github.com/terser-js/terser/issues/120
inline: 2,
},
mangle: {
safari10: true,
},
output: {
ecma: 5,
comments: false,
// Turned on because emoji and regex is not minified properly using default
// https://github.com/facebook/create-react-app/issues/2488
ascii_only: true,
},
},
// Use multi-process parallel running to improve the build speed
// Default number of concurrent runs: os.cpus().length - 1
parallel: true,
// Enable file caching
cache: true,
sourceMap: shouldUseSourceMap,
}),
// This is only used in production mode
new OptimizeCSSAssetsPlugin({
cssProcessorOptions: {
parser: safePostCssParser,
map: shouldUseSourceMap
? {
// `inline: false` forces the sourcemap to be output into a
// separate file
inline: false,
// `annotation: true` appends the sourceMappingURL to the end of
// the css file, helping the browser find the sourcemap
annotation: true,
}
: false,
},
}),
],
// Automatically split vendor and commons
// https://twitter.com/wSokra/status/969633336732905474
// https://medium.com/webpack/webpack-4-code-splitting-chunk-graph-and-the-splitchunks-optimization-be739a861366
splitChunks: {
chunks: 'all',
name: false,
},
// Keep the runtime chunk separated to enable long term caching
// https://twitter.com/wSokra/status/969679223278505985
runtimeChunk: true,
},
resolve: {
// This allows you to set a fallback for where Webpack should look for modules.
// We placed these paths second because we want `node_modules` to "win"
// if there are any conflicts. This matches Node resolution mechanism.
// https://github.com/facebook/create-react-app/issues/253
modules: ['node_modules'].concat(
// It is guaranteed to exist because we tweak it in `env.js`
process.env.NODE_PATH.split(path.delimiter).filter(Boolean)
),
// These are the reasonable defaults supported by the Node ecosystem.
// We also include JSX as a common component filename extension to support
// some tools, although we do not recommend using it, see:
// https://github.com/facebook/create-react-app/issues/290
// `web` extension prefixes have been added for better support
// for React Native Web.
extensions: paths.moduleFileExtensions
.map(ext => `.${ext}`)
.filter(ext => useTypeScript || !ext.includes('ts')),
alias: {
// Support React Native Web
// https://www.smashingmagazine.com/2016/08/a-glimpse-into-the-future-with-react-native-for-web/
'react-native': 'react-native-web',
},
plugins: [
// Adds support for installing with Plug'n'Play, leading to faster installs and adding
// guards against forgotten dependencies and such.
PnpWebpackPlugin,
// Prevents users from importing files from outside of src/ (or node_modules/).
// This often causes confusion because we only process files within src/ with babel.
// To fix this, we prevent you from importing files out of src/ -- if you'd like to,
// please link the files into your node_modules/ and let module-resolution kick in.
// Make sure your source files are compiled, as they will not be processed in any way.
new ModuleScopePlugin(paths.appSrc, [paths.appPackageJson]),
],
},
resolveLoader: {
plugins: [
// Also related to Plug'n'Play, but this time it tells Webpack to load its loaders
// from the current package.
PnpWebpackPlugin.moduleLoader(module),
],
},
module: {
strictExportPresence: true,
rules: [
// Disable require.ensure as it's not a standard language feature.
{ parser: { requireEnsure: false } },
// First, run the linter.
// It's important to do this before Babel processes the JS.
{
test: /\.(js|mjs|jsx)$/,
enforce: 'pre',
use: [
{
options: {
formatter: require.resolve('react-dev-utils/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 like "file" loader except that it embeds assets
// smaller than specified limit in bytes as data URLs to avoid requests.
// A missing `test` is equivalent to a match.
{
test: [/\.bmp$/, /\.gif$/, /\.jpe?g$/, /\.png$/],
loader: require.resolve('url-loader'),
options: {
limit: 10000,
name: 'static/media/[name].[hash:8].[ext]',
},
},
// Process application JS with Babel.
// The preset includes JSX, Flow, TypeScript, and some ESnext features.
{
test: /\.(js|mjs|jsx|ts|tsx)$/,
include: paths.appSrc,
loader: require.resolve('babel-loader'),
options: {
customize: require.resolve(
'babel-preset-react-app/webpack-overrides'
),
plugins: [
[
require.resolve('babel-plugin-named-asset-import'),
{
loaderMap: {
svg: {
ReactComponent: '@svgr/webpack?-svgo,+ref![path]',
},
},
},
],
],
// This is a feature of `babel-loader` for webpack (not Babel itself).
// It enables caching results in ./node_modules/.cache/babel-loader/
// directory for faster rebuilds.
cacheDirectory: true,
cacheCompression: isEnvProduction,
compact: isEnvProduction,
},
},
// Process any JS outside of the app with Babel.
// Unlike the application JS, we only compile the standard ES features.
{
test: /\.(js|mjs)$/,
exclude: /@babel(?:\/|\\{1,2})runtime/,
loader: require.resolve('babel-loader'),
options: {
babelrc: false,
configFile: false,
compact: false,
presets: [
[
require.resolve('babel-preset-react-app/dependencies'),
{ helpers: true },
],
],
cacheDirectory: true,
cacheCompression: isEnvProduction,
// If an error happens in a package, it's possible to be
// because it was compiled. Thus, we don't want the browser
// debugger to show the original code. Instead, the code
// being evaluated would be much more helpful.
sourceMaps: false,
},
},
// "postcss" loader applies autoprefixer to our CSS.
// "css" loader resolves paths in CSS and adds assets as dependencies.
// "style" loader turns CSS into JS modules that inject <style> tags.
// In production, we use MiniCSSExtractPlugin to extract that CSS
// to a file, but in development "style" loader enables hot editing
// of CSS.
// By default we support CSS Modules with the extension .module.css
{
test: cssRegex,
exclude: cssModuleRegex,
use: getStyleLoaders({
importLoaders: 1,
sourceMap: isEnvProduction && shouldUseSourceMap,
}),
// Don't consider CSS imports dead code even if the
// containing package claims to have no side effects.
// Remove this when webpack adds a warning or an error for this.
// See https://github.com/webpack/webpack/issues/6571
sideEffects: true,
},
// Adds support for CSS Modules (https://github.com/css-modules/css-modules)
// using the extension .module.css
{
test: cssModuleRegex,
use: getStyleLoaders({
importLoaders: 1,
sourceMap: isEnvProduction && shouldUseSourceMap,
modules: true,
getLocalIdent: getCSSModuleLocalIdent,
}),
},
// Opt-in support for SASS (using .scss or .sass extensions).
// By default we support SASS Modules with the
// extensions .module.scss or .module.sass
{
test: sassRegex,
exclude: sassModuleRegex,
use: getStyleLoaders(
{
importLoaders: 2,
sourceMap: isEnvProduction && shouldUseSourceMap,
modules: false
},
'sass-loader'
),
// Don't consider CSS imports dead code even if the
// containing package claims to have no side effects.
// Remove this when webpack adds a warning or an error for this.
// See https://github.com/webpack/webpack/issues/6571
sideEffects: true,
},
// Adds support for CSS Modules, but using SASS
// using the extension .module.scss or .module.sass
{
test: sassModuleRegex,
use: getStyleLoaders(
{
importLoaders: 2,
sourceMap: isEnvProduction && shouldUseSourceMap,
modules: true,
getLocalIdent: getCSSModuleLocalIdent,
},
'sass-loader'
),
},
{
test: /\.less$/,
use: [
'style-loader',
'css-loader',
{ loader: 'less-loader', options: { modifyVars: theme } },
],
include: /node_modules/,
},
// "file" loader makes sure those assets get served by WebpackDevServer.
// When you `import` an asset, you get its (virtual) filename.
// In production, they would get copied to the `build` folder.
// 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
// its runtime that would otherwise be processed through "file" loader.
// Also exclude `html` and `json` extensions so they get processed
// by webpacks internal loaders.
exclude: [/\.(js|mjs|jsx|ts|tsx)$/, /\.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: [
// Generates an `index.html` file with the <script> injected.
new HtmlWebpackPlugin(
Object.assign(
{},
{
inject: true,
template: paths.appHtml,
},
isEnvProduction
? {
minify: {
removeComments: true,
collapseWhitespace: true,
removeRedundantAttributes: true,
useShortDoctype: true,
removeEmptyAttributes: true,
removeStyleLinkTypeAttributes: true,
keepClosingSlash: true,
minifyJS: true,
minifyCSS: true,
minifyURLs: true,
},
}
: undefined
)
),
// Inlines the webpack runtime script. This script is too small to warrant
// a network request.
isEnvProduction &&
shouldInlineRuntimeChunk &&
new InlineChunkHtmlPlugin(HtmlWebpackPlugin, [/runtime~.+[.]js/]),
// 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.
// In development, this will be an empty string.
new InterpolateHtmlPlugin(HtmlWebpackPlugin, env.raw),
// This gives some necessary context to module not found errors, such as
// the requesting resource.
new ModuleNotFoundPlugin(paths.appPath),
// 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 is set to production
// during a production build.
// Otherwise React will be compiled in the very slow development mode.
new webpack.DefinePlugin(env.stringified),
// This is necessary to emit hot updates (currently CSS only):
isEnvDevelopment && new webpack.HotModuleReplacementPlugin(),
// Watcher doesn't work well if you mistype casing in a path so we use
// a plugin that prints an error when you attempt to do this.
// See https://github.com/facebook/create-react-app/issues/240
isEnvDevelopment && new CaseSensitivePathsPlugin(),
// If you require a missing module and then `npm install` it, you still have
// to restart the development server for Webpack to discover it. This plugin
// makes the discovery automatic so you don't have to restart.
// See https://github.com/facebook/create-react-app/issues/186
isEnvDevelopment &&
new WatchMissingNodeModulesPlugin(paths.appNodeModules),
isEnvProduction &&
new MiniCssExtractPlugin({
// Options similar to the same options in webpackOptions.output
// both options are optional
filename: 'static/css/[name].[contenthash:8].css',
chunkFilename: 'static/css/[name].[contenthash:8].chunk.css',
}),
// 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
// having to parse `index.html`.
new ManifestPlugin({
fileName: 'asset-manifest.json',
publicPath: publicPath,
}),
// 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
// solution that requires the user to opt into importing specific locales.
// https://github.com/jmblog/how-to-optimize-momentjs-with-webpack
// You can remove this if you don't use Moment.js:
new webpack.IgnorePlugin(/^\.\/locale$/, /moment$/),
// Generate a service worker script that will precache, and keep up to date,
// the HTML & assets that are part of the Webpack build.
isEnvProduction &&
new WorkboxWebpackPlugin.GenerateSW({
clientsClaim: true,
exclude: [/\.map$/, /asset-manifest\.json$/],
importWorkboxFrom: 'cdn',
navigateFallback: publicUrl + '/index.html',
navigateFallbackBlacklist: [
// Exclude URLs starting with /_, as they're likely an API call
new RegExp('^/_'),
// Exclude URLs containing a dot, as they're likely a resource in
// public/ and not a SPA route
new RegExp('/[^/]+\\.[^/]+$'),
],
}),
// TypeScript type checking
useTypeScript &&
new ForkTsCheckerWebpackPlugin({
typescript: resolve.sync('typescript', {
basedir: paths.appNodeModules,
}),
async: isEnvDevelopment,
useTypescriptIncrementalApi: true,
checkSyntacticErrors: true,
tsconfig: paths.appTsConfig,
reportFiles: [
'**',
'!**/*.json',
'!**/__tests__/**',
'!**/?(*.)(spec|test).*',
'!**/src/setupProxy.*',
'!**/src/setupTests.*',
],
watch: paths.appSrc,
silent: true,
// The formatter is invoked directly in WebpackDevServerUtils during development
formatter: isEnvProduction ? typescriptFormatter : undefined,
}),
].filter(Boolean),
// 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.
node: {
module: 'empty',
dgram: 'empty',
dns: 'mock',
fs: 'empty',
net: 'empty',
tls: 'empty',
child_process: 'empty',
},
// Turn off performance processing because we utilize
// our own hints via the FileSizeReporter
performance: false,
};
};
.history/config/webpack.config_20190419105250.js 0 → 100644
'use strict';
const fs = require('fs');
const path = require('path');
const webpack = require('webpack');
const resolve = require('resolve');
const PnpWebpackPlugin = require('pnp-webpack-plugin');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const CaseSensitivePathsPlugin = require('case-sensitive-paths-webpack-plugin');
const InlineChunkHtmlPlugin = require('react-dev-utils/InlineChunkHtmlPlugin');
const TerserPlugin = require('terser-webpack-plugin');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const OptimizeCSSAssetsPlugin = require('optimize-css-assets-webpack-plugin');
const safePostCssParser = require('postcss-safe-parser');
const ManifestPlugin = require('webpack-manifest-plugin');
const InterpolateHtmlPlugin = require('react-dev-utils/InterpolateHtmlPlugin');
const WorkboxWebpackPlugin = require('workbox-webpack-plugin');
const WatchMissingNodeModulesPlugin = require('react-dev-utils/WatchMissingNodeModulesPlugin');
const ModuleScopePlugin = require('react-dev-utils/ModuleScopePlugin');
const getCSSModuleLocalIdent = require('react-dev-utils/getCSSModuleLocalIdent');
const paths = require('./paths');
const getClientEnvironment = require('./env');
const ModuleNotFoundPlugin = require('react-dev-utils/ModuleNotFoundPlugin');
const ForkTsCheckerWebpackPlugin = require('react-dev-utils/ForkTsCheckerWebpackPlugin');
const typescriptFormatter = require('react-dev-utils/typescriptFormatter');
// Source maps are resource heavy and can cause out of memory issue for large source files.
const shouldUseSourceMap = process.env.GENERATE_SOURCEMAP !== 'false';
// Some apps do not need the benefits of saving a web request, so not inlining the chunk
// makes for a smoother build process.
const shouldInlineRuntimeChunk = process.env.INLINE_RUNTIME_CHUNK !== 'false';
// Check if TypeScript is setup
const useTypeScript = fs.existsSync(paths.appTsConfig);
const theme = require('../package.json').theme;
// style files regexes
const cssRegex = /\.css$/;
const cssModuleRegex = /\.module\.css$/;
const sassRegex = /\.(scss|sass)$/;
const sassModuleRegex = /\.module\.(scss|sass)$/;
// This is the production and development configuration.
// It is focused on developer experience, fast rebuilds, and a minimal bundle.
module.exports = function(webpackEnv) {
const isEnvDevelopment = webpackEnv === 'development';
const isEnvProduction = webpackEnv === 'production';
// 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.
// In development, we always serve from the root. This makes config easier.
const publicPath = isEnvProduction
? paths.servedPath
: isEnvDevelopment && '/';
// Some apps do not use client-side routing with pushState.
// For these, "homepage" can be set to "." to enable relative asset paths.
const shouldUseRelativeAssetPaths = publicPath === './';
// `publicUrl` is just like `publicPath`, but we will provide it to our app
// as %PUBLIC_URL% in `index.html` and `process.env.PUBLIC_URL` in JavaScript.
// Omit trailing slash as %PUBLIC_URL%/xyz looks better than %PUBLIC_URL%xyz.
const publicUrl = isEnvProduction
? publicPath.slice(0, -1)
: isEnvDevelopment && '';
// Get environment variables to inject into our app.
const env = getClientEnvironment(publicUrl);
// common function to get style loaders
const getStyleLoaders = (cssOptions, preProcessor) => {
const loaders = [
isEnvDevelopment && require.resolve('style-loader'),
isEnvProduction && {
loader: MiniCssExtractPlugin.loader,
options: Object.assign(
{},
shouldUseRelativeAssetPaths ? { publicPath: '../../' } : undefined
),
},
{
loader: require.resolve('css-loader'),
options: cssOptions,
},
{
// Options for PostCSS as we reference these options twice
// Adds vendor prefixing based on your specified browser support in
// package.json
loader: require.resolve('postcss-loader'),
options: {
// Necessary for external CSS imports to work
// https://github.com/facebook/create-react-app/issues/2677
ident: 'postcss',
plugins: () => [
require('postcss-flexbugs-fixes'),
require('postcss-preset-env')({
autoprefixer: {
flexbox: 'no-2009',
},
stage: 3,
}),
],
sourceMap: isEnvProduction && shouldUseSourceMap,
},
},
].filter(Boolean);
if (preProcessor) {
loaders.push({
loader: require.resolve(preProcessor),
options: {
sourceMap: isEnvProduction && shouldUseSourceMap,
},
});
if(preProcessor == 'sass-loader' && !cssOptions.modules){
loaders.push({
loader: require.resolve('sass-resources-loader'),
options: {
resources: [require.resolve('../src/styles/variable.scss')]
}
})
}
}
return loaders;
};
return {
mode: isEnvProduction ? 'production' : isEnvDevelopment && 'development',
// Stop compilation early in production
bail: isEnvProduction,
devtool: isEnvProduction
? shouldUseSourceMap
? 'source-map'
: false
: isEnvDevelopment && 'cheap-module-source-map',
// These are the "entry points" to our application.
// This means they will be the "root" imports that are included in JS bundle.
entry: [
// Include an alternative client for WebpackDevServer. A client's job is to
// connect to WebpackDevServer by a socket and get notified about changes.
// When you save a file, the client will either apply hot updates (in case
// of CSS changes), or refresh the page (in case of JS changes). When you
// make a syntax error, this client will display a syntax error overlay.
// Note: instead of the default WebpackDevServer client, we use a custom one
// to bring better experience for Create React App users. You can replace
// the line below with these two lines if you prefer the stock client:
// require.resolve('webpack-dev-server/client') + '?/',
// require.resolve('webpack/hot/dev-server'),
isEnvDevelopment &&
require.resolve('react-dev-utils/webpackHotDevClient'),
// Finally, this is your app's code:
paths.appIndexJs,
// We include the app code last so that if there is a runtime error during
// initialization, it doesn't blow up the WebpackDevServer client, and
// changing JS code would still trigger a refresh.
].filter(Boolean),
output: {
// The build folder.
path: isEnvProduction ? paths.appBuild : undefined,
// Add /* filename */ comments to generated require()s in the output.
pathinfo: isEnvDevelopment,
// There will be one main bundle, and one file per asynchronous chunk.
// In development, it does not produce real files.
filename: isEnvProduction
? 'static/js/[name].[contenthash:8].js'
: isEnvDevelopment && 'static/js/bundle.js',
// There are also additional JS chunk files if you use code splitting.
chunkFilename: isEnvProduction
? 'static/js/[name].[contenthash:8].chunk.js'
: isEnvDevelopment && 'static/js/[name].chunk.js',
// We inferred the "public path" (such as / or /my-project) from homepage.
// We use "/" in development.
publicPath: publicPath,
// Point sourcemap entries to original disk location (format as URL on Windows)
devtoolModuleFilenameTemplate: isEnvProduction
? info =>
path
.relative(paths.appSrc, info.absoluteResourcePath)
.replace(/\\/g, '/')
: isEnvDevelopment &&
(info => path.resolve(info.absoluteResourcePath).replace(/\\/g, '/')),
},
optimization: {
minimize: isEnvProduction,
minimizer: [
// This is only used in production mode
new TerserPlugin({
terserOptions: {
parse: {
// we want terser to parse ecma 8 code. However, we don't want it
// to apply any minfication steps that turns valid ecma 5 code
// into invalid ecma 5 code. This is why the 'compress' and 'output'
// sections only apply transformations that are ecma 5 safe
// https://github.com/facebook/create-react-app/pull/4234
ecma: 8,
},
compress: {
ecma: 5,
warnings: false,
// Disabled because of an issue with Uglify breaking seemingly valid code:
// https://github.com/facebook/create-react-app/issues/2376
// Pending further investigation:
// https://github.com/mishoo/UglifyJS2/issues/2011
comparisons: false,
// Disabled because of an issue with Terser breaking valid code:
// https://github.com/facebook/create-react-app/issues/5250
// Pending futher investigation:
// https://github.com/terser-js/terser/issues/120
inline: 2,
},
mangle: {
safari10: true,
},
output: {
ecma: 5,
comments: false,
// Turned on because emoji and regex is not minified properly using default
// https://github.com/facebook/create-react-app/issues/2488
ascii_only: true,
},
},
// Use multi-process parallel running to improve the build speed
// Default number of concurrent runs: os.cpus().length - 1
parallel: true,
// Enable file caching
cache: true,
sourceMap: shouldUseSourceMap,
}),
// This is only used in production mode
new OptimizeCSSAssetsPlugin({
cssProcessorOptions: {
parser: safePostCssParser,
map: shouldUseSourceMap
? {
// `inline: false` forces the sourcemap to be output into a
// separate file
inline: false,
// `annotation: true` appends the sourceMappingURL to the end of
// the css file, helping the browser find the sourcemap
annotation: true,
}
: false,
},
}),
],
// Automatically split vendor and commons
// https://twitter.com/wSokra/status/969633336732905474
// https://medium.com/webpack/webpack-4-code-splitting-chunk-graph-and-the-splitchunks-optimization-be739a861366
splitChunks: {
chunks: 'all',
name: false,
},
// Keep the runtime chunk separated to enable long term caching
// https://twitter.com/wSokra/status/969679223278505985
runtimeChunk: true,
},
resolve: {
// This allows you to set a fallback for where Webpack should look for modules.
// We placed these paths second because we want `node_modules` to "win"
// if there are any conflicts. This matches Node resolution mechanism.
// https://github.com/facebook/create-react-app/issues/253
modules: ['node_modules'].concat(
// It is guaranteed to exist because we tweak it in `env.js`
process.env.NODE_PATH.split(path.delimiter).filter(Boolean)
),
// These are the reasonable defaults supported by the Node ecosystem.
// We also include JSX as a common component filename extension to support
// some tools, although we do not recommend using it, see:
// https://github.com/facebook/create-react-app/issues/290
// `web` extension prefixes have been added for better support
// for React Native Web.
extensions: paths.moduleFileExtensions
.map(ext => `.${ext}`)
.filter(ext => useTypeScript || !ext.includes('ts')),
alias: {
// Support React Native Web
// https://www.smashingmagazine.com/2016/08/a-glimpse-into-the-future-with-react-native-for-web/
'react-native': 'react-native-web',
},
plugins: [
// Adds support for installing with Plug'n'Play, leading to faster installs and adding
// guards against forgotten dependencies and such.
PnpWebpackPlugin,
// Prevents users from importing files from outside of src/ (or node_modules/).
// This often causes confusion because we only process files within src/ with babel.
// To fix this, we prevent you from importing files out of src/ -- if you'd like to,
// please link the files into your node_modules/ and let module-resolution kick in.
// Make sure your source files are compiled, as they will not be processed in any way.
new ModuleScopePlugin(paths.appSrc, [paths.appPackageJson]),
],
},
resolveLoader: {
plugins: [
// Also related to Plug'n'Play, but this time it tells Webpack to load its loaders
// from the current package.
PnpWebpackPlugin.moduleLoader(module),
],
},
module: {
strictExportPresence: true,
rules: [
// Disable require.ensure as it's not a standard language feature.
{ parser: { requireEnsure: false } },
// First, run the linter.
// It's important to do this before Babel processes the JS.
{
test: /\.(js|mjs|jsx)$/,
enforce: 'pre',
use: [
{
options: {
formatter: require.resolve('react-dev-utils/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 like "file" loader except that it embeds assets
// smaller than specified limit in bytes as data URLs to avoid requests.
// A missing `test` is equivalent to a match.
{
test: [/\.bmp$/, /\.gif$/, /\.jpe?g$/, /\.png$/],
loader: require.resolve('url-loader'),
options: {
limit: 10000,
name: 'static/media/[name].[hash:8].[ext]',
},
},
// Process application JS with Babel.
// The preset includes JSX, Flow, TypeScript, and some ESnext features.
{
test: /\.(js|mjs|jsx|ts|tsx)$/,
include: paths.appSrc,
loader: require.resolve('babel-loader'),
options: {
customize: require.resolve(
'babel-preset-react-app/webpack-overrides'
),
plugins: [
[
require.resolve('babel-plugin-named-asset-import'),
{
loaderMap: {
svg: {
ReactComponent: '@svgr/webpack?-svgo,+ref![path]',
},
},
},
],
],
// This is a feature of `babel-loader` for webpack (not Babel itself).
// It enables caching results in ./node_modules/.cache/babel-loader/
// directory for faster rebuilds.
cacheDirectory: true,
cacheCompression: isEnvProduction,
compact: isEnvProduction,
},
},
// Process any JS outside of the app with Babel.
// Unlike the application JS, we only compile the standard ES features.
{
test: /\.(js|mjs)$/,
exclude: /@babel(?:\/|\\{1,2})runtime/,
loader: require.resolve('babel-loader'),
options: {
babelrc: false,
configFile: false,
compact: false,
presets: [
[
require.resolve('babel-preset-react-app/dependencies'),
{ helpers: true },
],
],
cacheDirectory: true,
cacheCompression: isEnvProduction,
// If an error happens in a package, it's possible to be
// because it was compiled. Thus, we don't want the browser
// debugger to show the original code. Instead, the code
// being evaluated would be much more helpful.
sourceMaps: false,
},
},
// "postcss" loader applies autoprefixer to our CSS.
// "css" loader resolves paths in CSS and adds assets as dependencies.
// "style" loader turns CSS into JS modules that inject <style> tags.
// In production, we use MiniCSSExtractPlugin to extract that CSS
// to a file, but in development "style" loader enables hot editing
// of CSS.
// By default we support CSS Modules with the extension .module.css
{
test: cssRegex,
exclude: cssModuleRegex,
use: getStyleLoaders({
importLoaders: 1,
sourceMap: isEnvProduction && shouldUseSourceMap,
}),
// Don't consider CSS imports dead code even if the
// containing package claims to have no side effects.
// Remove this when webpack adds a warning or an error for this.
// See https://github.com/webpack/webpack/issues/6571
sideEffects: true,
},
// Adds support for CSS Modules (https://github.com/css-modules/css-modules)
// using the extension .module.css
{
test: cssModuleRegex,
use: getStyleLoaders({
importLoaders: 1,
sourceMap: isEnvProduction && shouldUseSourceMap,
modules: true,
getLocalIdent: getCSSModuleLocalIdent,
}),
},
// Opt-in support for SASS (using .scss or .sass extensions).
// By default we support SASS Modules with the
// extensions .module.scss or .module.sass
{
test: sassRegex,
exclude: sassModuleRegex,
use: getStyleLoaders(
{
importLoaders: 2,
sourceMap: isEnvProduction && shouldUseSourceMap,
modules: false
},
'sass-loader'
),
// Don't consider CSS imports dead code even if the
// containing package claims to have no side effects.
// Remove this when webpack adds a warning or an error for this.
// See https://github.com/webpack/webpack/issues/6571
sideEffects: true,
},
// Adds support for CSS Modules, but using SASS
// using the extension .module.scss or .module.sass
{
test: sassModuleRegex,
use: getStyleLoaders(
{
importLoaders: 2,
sourceMap: isEnvProduction && shouldUseSourceMap,
modules: true,
getLocalIdent: getCSSModuleLocalIdent,
},
'sass-loader'
),
},
{
test: /\.less$/,
use: [
'style-loader',
'css-loader',
{ loader: 'less-loader', options: { modifyVars: theme } },
],
include: /node_modules/,
},
{
loader: "less-loader",
options: {
javascriptEnabled: true
}
},
// "file" loader makes sure those assets get served by WebpackDevServer.
// When you `import` an asset, you get its (virtual) filename.
// In production, they would get copied to the `build` folder.
// 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
// its runtime that would otherwise be processed through "file" loader.
// Also exclude `html` and `json` extensions so they get processed
// by webpacks internal loaders.
exclude: [/\.(js|mjs|jsx|ts|tsx)$/, /\.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: [
// Generates an `index.html` file with the <script> injected.
new HtmlWebpackPlugin(
Object.assign(
{},
{
inject: true,
template: paths.appHtml,
},
isEnvProduction
? {
minify: {
removeComments: true,
collapseWhitespace: true,
removeRedundantAttributes: true,
useShortDoctype: true,
removeEmptyAttributes: true,
removeStyleLinkTypeAttributes: true,
keepClosingSlash: true,
minifyJS: true,
minifyCSS: true,
minifyURLs: true,
},
}
: undefined
)
),
// Inlines the webpack runtime script. This script is too small to warrant
// a network request.
isEnvProduction &&
shouldInlineRuntimeChunk &&
new InlineChunkHtmlPlugin(HtmlWebpackPlugin, [/runtime~.+[.]js/]),
// 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.
// In development, this will be an empty string.
new InterpolateHtmlPlugin(HtmlWebpackPlugin, env.raw),
// This gives some necessary context to module not found errors, such as
// the requesting resource.
new ModuleNotFoundPlugin(paths.appPath),
// 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 is set to production
// during a production build.
// Otherwise React will be compiled in the very slow development mode.
new webpack.DefinePlugin(env.stringified),
// This is necessary to emit hot updates (currently CSS only):
isEnvDevelopment && new webpack.HotModuleReplacementPlugin(),
// Watcher doesn't work well if you mistype casing in a path so we use
// a plugin that prints an error when you attempt to do this.
// See https://github.com/facebook/create-react-app/issues/240
isEnvDevelopment && new CaseSensitivePathsPlugin(),
// If you require a missing module and then `npm install` it, you still have
// to restart the development server for Webpack to discover it. This plugin
// makes the discovery automatic so you don't have to restart.
// See https://github.com/facebook/create-react-app/issues/186
isEnvDevelopment &&
new WatchMissingNodeModulesPlugin(paths.appNodeModules),
isEnvProduction &&
new MiniCssExtractPlugin({
// Options similar to the same options in webpackOptions.output
// both options are optional
filename: 'static/css/[name].[contenthash:8].css',
chunkFilename: 'static/css/[name].[contenthash:8].chunk.css',
}),
// 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
// having to parse `index.html`.
new ManifestPlugin({
fileName: 'asset-manifest.json',
publicPath: publicPath,
}),
// 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
// solution that requires the user to opt into importing specific locales.
// https://github.com/jmblog/how-to-optimize-momentjs-with-webpack
// You can remove this if you don't use Moment.js:
new webpack.IgnorePlugin(/^\.\/locale$/, /moment$/),
// Generate a service worker script that will precache, and keep up to date,
// the HTML & assets that are part of the Webpack build.
isEnvProduction &&
new WorkboxWebpackPlugin.GenerateSW({
clientsClaim: true,
exclude: [/\.map$/, /asset-manifest\.json$/],
importWorkboxFrom: 'cdn',
navigateFallback: publicUrl + '/index.html',
navigateFallbackBlacklist: [
// Exclude URLs starting with /_, as they're likely an API call
new RegExp('^/_'),
// Exclude URLs containing a dot, as they're likely a resource in
// public/ and not a SPA route
new RegExp('/[^/]+\\.[^/]+$'),
],
}),
// TypeScript type checking
useTypeScript &&
new ForkTsCheckerWebpackPlugin({
typescript: resolve.sync('typescript', {
basedir: paths.appNodeModules,
}),
async: isEnvDevelopment,
useTypescriptIncrementalApi: true,
checkSyntacticErrors: true,
tsconfig: paths.appTsConfig,
reportFiles: [
'**',
'!**/*.json',
'!**/__tests__/**',
'!**/?(*.)(spec|test).*',
'!**/src/setupProxy.*',
'!**/src/setupTests.*',
],
watch: paths.appSrc,
silent: true,
// The formatter is invoked directly in WebpackDevServerUtils during development
formatter: isEnvProduction ? typescriptFormatter : undefined,
}),
].filter(Boolean),
// 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.
node: {
module: 'empty',
dgram: 'empty',
dns: 'mock',
fs: 'empty',
net: 'empty',
tls: 'empty',
child_process: 'empty',
},
// Turn off performance processing because we utilize
// our own hints via the FileSizeReporter
performance: false,
};
};
.history/config/webpack.config_20190419105538.js 0 → 100644
'use strict';
const fs = require('fs');
const path = require('path');
const webpack = require('webpack');
const resolve = require('resolve');
const PnpWebpackPlugin = require('pnp-webpack-plugin');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const CaseSensitivePathsPlugin = require('case-sensitive-paths-webpack-plugin');
const InlineChunkHtmlPlugin = require('react-dev-utils/InlineChunkHtmlPlugin');
const TerserPlugin = require('terser-webpack-plugin');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const OptimizeCSSAssetsPlugin = require('optimize-css-assets-webpack-plugin');
const safePostCssParser = require('postcss-safe-parser');
const ManifestPlugin = require('webpack-manifest-plugin');
const InterpolateHtmlPlugin = require('react-dev-utils/InterpolateHtmlPlugin');
const WorkboxWebpackPlugin = require('workbox-webpack-plugin');
const WatchMissingNodeModulesPlugin = require('react-dev-utils/WatchMissingNodeModulesPlugin');
const ModuleScopePlugin = require('react-dev-utils/ModuleScopePlugin');
const getCSSModuleLocalIdent = require('react-dev-utils/getCSSModuleLocalIdent');
const paths = require('./paths');
const getClientEnvironment = require('./env');
const ModuleNotFoundPlugin = require('react-dev-utils/ModuleNotFoundPlugin');
const ForkTsCheckerWebpackPlugin = require('react-dev-utils/ForkTsCheckerWebpackPlugin');
const typescriptFormatter = require('react-dev-utils/typescriptFormatter');
// Source maps are resource heavy and can cause out of memory issue for large source files.
const shouldUseSourceMap = process.env.GENERATE_SOURCEMAP !== 'false';
// Some apps do not need the benefits of saving a web request, so not inlining the chunk
// makes for a smoother build process.
const shouldInlineRuntimeChunk = process.env.INLINE_RUNTIME_CHUNK !== 'false';
// Check if TypeScript is setup
const useTypeScript = fs.existsSync(paths.appTsConfig);
const theme = require('../package.json').theme;
// style files regexes
const cssRegex = /\.css$/;
const cssModuleRegex = /\.module\.css$/;
const sassRegex = /\.(scss|sass)$/;
const sassModuleRegex = /\.module\.(scss|sass)$/;
// This is the production and development configuration.
// It is focused on developer experience, fast rebuilds, and a minimal bundle.
module.exports = function(webpackEnv) {
const isEnvDevelopment = webpackEnv === 'development';
const isEnvProduction = webpackEnv === 'production';
// 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.
// In development, we always serve from the root. This makes config easier.
const publicPath = isEnvProduction
? paths.servedPath
: isEnvDevelopment && '/';
// Some apps do not use client-side routing with pushState.
// For these, "homepage" can be set to "." to enable relative asset paths.
const shouldUseRelativeAssetPaths = publicPath === './';
// `publicUrl` is just like `publicPath`, but we will provide it to our app
// as %PUBLIC_URL% in `index.html` and `process.env.PUBLIC_URL` in JavaScript.
// Omit trailing slash as %PUBLIC_URL%/xyz looks better than %PUBLIC_URL%xyz.
const publicUrl = isEnvProduction
? publicPath.slice(0, -1)
: isEnvDevelopment && '';
// Get environment variables to inject into our app.
const env = getClientEnvironment(publicUrl);
// common function to get style loaders
const getStyleLoaders = (cssOptions, preProcessor) => {
const loaders = [
isEnvDevelopment && require.resolve('style-loader'),
isEnvProduction && {
loader: MiniCssExtractPlugin.loader,
options: Object.assign(
{},
shouldUseRelativeAssetPaths ? { publicPath: '../../' } : undefined
),
},
{
loader: require.resolve('css-loader'),
options: cssOptions,
},
{
// Options for PostCSS as we reference these options twice
// Adds vendor prefixing based on your specified browser support in
// package.json
loader: require.resolve('postcss-loader'),
options: {
// Necessary for external CSS imports to work
// https://github.com/facebook/create-react-app/issues/2677
ident: 'postcss',
plugins: () => [
require('postcss-flexbugs-fixes'),
require('postcss-preset-env')({
autoprefixer: {
flexbox: 'no-2009',
},
stage: 3,
}),
],
sourceMap: isEnvProduction && shouldUseSourceMap,
},
},
].filter(Boolean);
if (preProcessor) {
loaders.push({
loader: require.resolve(preProcessor),
options: {
sourceMap: isEnvProduction && shouldUseSourceMap,
},
});
if(preProcessor == 'sass-loader' && !cssOptions.modules){
loaders.push({
loader: require.resolve('sass-resources-loader'),
options: {
resources: [require.resolve('../src/styles/variable.scss')]
}
})
}
}
return loaders;
};
return {
mode: isEnvProduction ? 'production' : isEnvDevelopment && 'development',
// Stop compilation early in production
bail: isEnvProduction,
devtool: isEnvProduction
? shouldUseSourceMap
? 'source-map'
: false
: isEnvDevelopment && 'cheap-module-source-map',
// These are the "entry points" to our application.
// This means they will be the "root" imports that are included in JS bundle.
entry: [
// Include an alternative client for WebpackDevServer. A client's job is to
// connect to WebpackDevServer by a socket and get notified about changes.
// When you save a file, the client will either apply hot updates (in case
// of CSS changes), or refresh the page (in case of JS changes). When you
// make a syntax error, this client will display a syntax error overlay.
// Note: instead of the default WebpackDevServer client, we use a custom one
// to bring better experience for Create React App users. You can replace
// the line below with these two lines if you prefer the stock client:
// require.resolve('webpack-dev-server/client') + '?/',
// require.resolve('webpack/hot/dev-server'),
isEnvDevelopment &&
require.resolve('react-dev-utils/webpackHotDevClient'),
// Finally, this is your app's code:
paths.appIndexJs,
// We include the app code last so that if there is a runtime error during
// initialization, it doesn't blow up the WebpackDevServer client, and
// changing JS code would still trigger a refresh.
].filter(Boolean),
output: {
// The build folder.
path: isEnvProduction ? paths.appBuild : undefined,
// Add /* filename */ comments to generated require()s in the output.
pathinfo: isEnvDevelopment,
// There will be one main bundle, and one file per asynchronous chunk.
// In development, it does not produce real files.
filename: isEnvProduction
? 'static/js/[name].[contenthash:8].js'
: isEnvDevelopment && 'static/js/bundle.js',
// There are also additional JS chunk files if you use code splitting.
chunkFilename: isEnvProduction
? 'static/js/[name].[contenthash:8].chunk.js'
: isEnvDevelopment && 'static/js/[name].chunk.js',
// We inferred the "public path" (such as / or /my-project) from homepage.
// We use "/" in development.
publicPath: publicPath,
// Point sourcemap entries to original disk location (format as URL on Windows)
devtoolModuleFilenameTemplate: isEnvProduction
? info =>
path
.relative(paths.appSrc, info.absoluteResourcePath)
.replace(/\\/g, '/')
: isEnvDevelopment &&
(info => path.resolve(info.absoluteResourcePath).replace(/\\/g, '/')),
},
optimization: {
minimize: isEnvProduction,
minimizer: [
// This is only used in production mode
new TerserPlugin({
terserOptions: {
parse: {
// we want terser to parse ecma 8 code. However, we don't want it
// to apply any minfication steps that turns valid ecma 5 code
// into invalid ecma 5 code. This is why the 'compress' and 'output'
// sections only apply transformations that are ecma 5 safe
// https://github.com/facebook/create-react-app/pull/4234
ecma: 8,
},
compress: {
ecma: 5,
warnings: false,
// Disabled because of an issue with Uglify breaking seemingly valid code:
// https://github.com/facebook/create-react-app/issues/2376
// Pending further investigation:
// https://github.com/mishoo/UglifyJS2/issues/2011
comparisons: false,
// Disabled because of an issue with Terser breaking valid code:
// https://github.com/facebook/create-react-app/issues/5250
// Pending futher investigation:
// https://github.com/terser-js/terser/issues/120
inline: 2,
},
mangle: {
safari10: true,
},
output: {
ecma: 5,
comments: false,
// Turned on because emoji and regex is not minified properly using default
// https://github.com/facebook/create-react-app/issues/2488
ascii_only: true,
},
},
// Use multi-process parallel running to improve the build speed
// Default number of concurrent runs: os.cpus().length - 1
parallel: true,
// Enable file caching
cache: true,
sourceMap: shouldUseSourceMap,
}),
// This is only used in production mode
new OptimizeCSSAssetsPlugin({
cssProcessorOptions: {
parser: safePostCssParser,
map: shouldUseSourceMap
? {
// `inline: false` forces the sourcemap to be output into a
// separate file
inline: false,
// `annotation: true` appends the sourceMappingURL to the end of
// the css file, helping the browser find the sourcemap
annotation: true,
}
: false,
},
}),
],
// Automatically split vendor and commons
// https://twitter.com/wSokra/status/969633336732905474
// https://medium.com/webpack/webpack-4-code-splitting-chunk-graph-and-the-splitchunks-optimization-be739a861366
splitChunks: {
chunks: 'all',
name: false,
},
// Keep the runtime chunk separated to enable long term caching
// https://twitter.com/wSokra/status/969679223278505985
runtimeChunk: true,
},
resolve: {
// This allows you to set a fallback for where Webpack should look for modules.
// We placed these paths second because we want `node_modules` to "win"
// if there are any conflicts. This matches Node resolution mechanism.
// https://github.com/facebook/create-react-app/issues/253
modules: ['node_modules'].concat(
// It is guaranteed to exist because we tweak it in `env.js`
process.env.NODE_PATH.split(path.delimiter).filter(Boolean)
),
// These are the reasonable defaults supported by the Node ecosystem.
// We also include JSX as a common component filename extension to support
// some tools, although we do not recommend using it, see:
// https://github.com/facebook/create-react-app/issues/290
// `web` extension prefixes have been added for better support
// for React Native Web.
extensions: paths.moduleFileExtensions
.map(ext => `.${ext}`)
.filter(ext => useTypeScript || !ext.includes('ts')),
alias: {
// Support React Native Web
// https://www.smashingmagazine.com/2016/08/a-glimpse-into-the-future-with-react-native-for-web/
'react-native': 'react-native-web',
},
plugins: [
// Adds support for installing with Plug'n'Play, leading to faster installs and adding
// guards against forgotten dependencies and such.
PnpWebpackPlugin,
// Prevents users from importing files from outside of src/ (or node_modules/).
// This often causes confusion because we only process files within src/ with babel.
// To fix this, we prevent you from importing files out of src/ -- if you'd like to,
// please link the files into your node_modules/ and let module-resolution kick in.
// Make sure your source files are compiled, as they will not be processed in any way.
new ModuleScopePlugin(paths.appSrc, [paths.appPackageJson]),
],
},
resolveLoader: {
plugins: [
// Also related to Plug'n'Play, but this time it tells Webpack to load its loaders
// from the current package.
PnpWebpackPlugin.moduleLoader(module),
],
},
module: {
strictExportPresence: true,
rules: [
// Disable require.ensure as it's not a standard language feature.
{ parser: { requireEnsure: false } },
// First, run the linter.
// It's important to do this before Babel processes the JS.
{
test: /\.(js|mjs|jsx)$/,
enforce: 'pre',
use: [
{
options: {
formatter: require.resolve('react-dev-utils/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 like "file" loader except that it embeds assets
// smaller than specified limit in bytes as data URLs to avoid requests.
// A missing `test` is equivalent to a match.
{
test: [/\.bmp$/, /\.gif$/, /\.jpe?g$/, /\.png$/],
loader: require.resolve('url-loader'),
options: {
limit: 10000,
name: 'static/media/[name].[hash:8].[ext]',
},
},
// Process application JS with Babel.
// The preset includes JSX, Flow, TypeScript, and some ESnext features.
{
test: /\.(js|mjs|jsx|ts|tsx)$/,
include: paths.appSrc,
loader: require.resolve('babel-loader'),
options: {
customize: require.resolve(
'babel-preset-react-app/webpack-overrides'
),
plugins: [
[
require.resolve('babel-plugin-named-asset-import'),
{
loaderMap: {
svg: {
ReactComponent: '@svgr/webpack?-svgo,+ref![path]',
},
},
},
],
],
// This is a feature of `babel-loader` for webpack (not Babel itself).
// It enables caching results in ./node_modules/.cache/babel-loader/
// directory for faster rebuilds.
cacheDirectory: true,
cacheCompression: isEnvProduction,
compact: isEnvProduction,
},
},
// Process any JS outside of the app with Babel.
// Unlike the application JS, we only compile the standard ES features.
{
test: /\.(js|mjs)$/,
exclude: /@babel(?:\/|\\{1,2})runtime/,
loader: require.resolve('babel-loader'),
options: {
babelrc: false,
configFile: false,
compact: false,
presets: [
[
require.resolve('babel-preset-react-app/dependencies'),
{ helpers: true },
],
],
cacheDirectory: true,
cacheCompression: isEnvProduction,
// If an error happens in a package, it's possible to be
// because it was compiled. Thus, we don't want the browser
// debugger to show the original code. Instead, the code
// being evaluated would be much more helpful.
sourceMaps: false,
},
},
// "postcss" loader applies autoprefixer to our CSS.
// "css" loader resolves paths in CSS and adds assets as dependencies.
// "style" loader turns CSS into JS modules that inject <style> tags.
// In production, we use MiniCSSExtractPlugin to extract that CSS
// to a file, but in development "style" loader enables hot editing
// of CSS.
// By default we support CSS Modules with the extension .module.css
{
test: cssRegex,
exclude: cssModuleRegex,
use: getStyleLoaders({
importLoaders: 1,
sourceMap: isEnvProduction && shouldUseSourceMap,
}),
// Don't consider CSS imports dead code even if the
// containing package claims to have no side effects.
// Remove this when webpack adds a warning or an error for this.
// See https://github.com/webpack/webpack/issues/6571
sideEffects: true,
},
// Adds support for CSS Modules (https://github.com/css-modules/css-modules)
// using the extension .module.css
{
test: cssModuleRegex,
use: getStyleLoaders({
importLoaders: 1,
sourceMap: isEnvProduction && shouldUseSourceMap,
modules: true,
getLocalIdent: getCSSModuleLocalIdent,
}),
},
// Opt-in support for SASS (using .scss or .sass extensions).
// By default we support SASS Modules with the
// extensions .module.scss or .module.sass
{
test: sassRegex,
exclude: sassModuleRegex,
use: getStyleLoaders(
{
importLoaders: 2,
sourceMap: isEnvProduction && shouldUseSourceMap,
modules: false
},
'sass-loader'
),
// Don't consider CSS imports dead code even if the
// containing package claims to have no side effects.
// Remove this when webpack adds a warning or an error for this.
// See https://github.com/webpack/webpack/issues/6571
sideEffects: true,
},
// Adds support for CSS Modules, but using SASS
// using the extension .module.scss or .module.sass
{
test: sassModuleRegex,
use: getStyleLoaders(
{
importLoaders: 2,
sourceMap: isEnvProduction && shouldUseSourceMap,
modules: true,
getLocalIdent: getCSSModuleLocalIdent,
},
'sass-loader'
),
},
{
test: /\.less$/,
use: [
'style-loader',
'css-loader',
{ loader: 'less-loader', options: { modifyVars: theme } },
],
include: /node_modules/,
options: {
javascriptEnabled: true
}
},
// "file" loader makes sure those assets get served by WebpackDevServer.
// When you `import` an asset, you get its (virtual) filename.
// In production, they would get copied to the `build` folder.
// 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
// its runtime that would otherwise be processed through "file" loader.
// Also exclude `html` and `json` extensions so they get processed
// by webpacks internal loaders.
exclude: [/\.(js|mjs|jsx|ts|tsx)$/, /\.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: [
// Generates an `index.html` file with the <script> injected.
new HtmlWebpackPlugin(
Object.assign(
{},
{
inject: true,
template: paths.appHtml,
},
isEnvProduction
? {
minify: {
removeComments: true,
collapseWhitespace: true,
removeRedundantAttributes: true,
useShortDoctype: true,
removeEmptyAttributes: true,
removeStyleLinkTypeAttributes: true,
keepClosingSlash: true,
minifyJS: true,
minifyCSS: true,
minifyURLs: true,
},
}
: undefined
)
),
// Inlines the webpack runtime script. This script is too small to warrant
// a network request.
isEnvProduction &&
shouldInlineRuntimeChunk &&
new InlineChunkHtmlPlugin(HtmlWebpackPlugin, [/runtime~.+[.]js/]),
// 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.
// In development, this will be an empty string.
new InterpolateHtmlPlugin(HtmlWebpackPlugin, env.raw),
// This gives some necessary context to module not found errors, such as
// the requesting resource.
new ModuleNotFoundPlugin(paths.appPath),
// 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 is set to production
// during a production build.
// Otherwise React will be compiled in the very slow development mode.
new webpack.DefinePlugin(env.stringified),
// This is necessary to emit hot updates (currently CSS only):
isEnvDevelopment && new webpack.HotModuleReplacementPlugin(),
// Watcher doesn't work well if you mistype casing in a path so we use
// a plugin that prints an error when you attempt to do this.
// See https://github.com/facebook/create-react-app/issues/240
isEnvDevelopment && new CaseSensitivePathsPlugin(),
// If you require a missing module and then `npm install` it, you still have
// to restart the development server for Webpack to discover it. This plugin
// makes the discovery automatic so you don't have to restart.
// See https://github.com/facebook/create-react-app/issues/186
isEnvDevelopment &&
new WatchMissingNodeModulesPlugin(paths.appNodeModules),
isEnvProduction &&
new MiniCssExtractPlugin({
// Options similar to the same options in webpackOptions.output
// both options are optional
filename: 'static/css/[name].[contenthash:8].css',
chunkFilename: 'static/css/[name].[contenthash:8].chunk.css',
}),
// 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
// having to parse `index.html`.
new ManifestPlugin({
fileName: 'asset-manifest.json',
publicPath: publicPath,
}),
// 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
// solution that requires the user to opt into importing specific locales.
// https://github.com/jmblog/how-to-optimize-momentjs-with-webpack
// You can remove this if you don't use Moment.js:
new webpack.IgnorePlugin(/^\.\/locale$/, /moment$/),
// Generate a service worker script that will precache, and keep up to date,
// the HTML & assets that are part of the Webpack build.
isEnvProduction &&
new WorkboxWebpackPlugin.GenerateSW({
clientsClaim: true,
exclude: [/\.map$/, /asset-manifest\.json$/],
importWorkboxFrom: 'cdn',
navigateFallback: publicUrl + '/index.html',
navigateFallbackBlacklist: [
// Exclude URLs starting with /_, as they're likely an API call
new RegExp('^/_'),
// Exclude URLs containing a dot, as they're likely a resource in
// public/ and not a SPA route
new RegExp('/[^/]+\\.[^/]+$'),
],
}),
// TypeScript type checking
useTypeScript &&
new ForkTsCheckerWebpackPlugin({
typescript: resolve.sync('typescript', {
basedir: paths.appNodeModules,
}),
async: isEnvDevelopment,
useTypescriptIncrementalApi: true,
checkSyntacticErrors: true,
tsconfig: paths.appTsConfig,
reportFiles: [
'**',
'!**/*.json',
'!**/__tests__/**',
'!**/?(*.)(spec|test).*',
'!**/src/setupProxy.*',
'!**/src/setupTests.*',
],
watch: paths.appSrc,
silent: true,
// The formatter is invoked directly in WebpackDevServerUtils during development
formatter: isEnvProduction ? typescriptFormatter : undefined,
}),
].filter(Boolean),
// 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.
node: {
module: 'empty',
dgram: 'empty',
dns: 'mock',
fs: 'empty',
net: 'empty',
tls: 'empty',
child_process: 'empty',
},
// Turn off performance processing because we utilize
// our own hints via the FileSizeReporter
performance: false,
};
};
.history/config/webpack.config_20190419105639.js 0 → 100644
'use strict';
const fs = require('fs');
const path = require('path');
const webpack = require('webpack');
const resolve = require('resolve');
const PnpWebpackPlugin = require('pnp-webpack-plugin');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const CaseSensitivePathsPlugin = require('case-sensitive-paths-webpack-plugin');
const InlineChunkHtmlPlugin = require('react-dev-utils/InlineChunkHtmlPlugin');
const TerserPlugin = require('terser-webpack-plugin');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const OptimizeCSSAssetsPlugin = require('optimize-css-assets-webpack-plugin');
const safePostCssParser = require('postcss-safe-parser');
const ManifestPlugin = require('webpack-manifest-plugin');
const InterpolateHtmlPlugin = require('react-dev-utils/InterpolateHtmlPlugin');
const WorkboxWebpackPlugin = require('workbox-webpack-plugin');
const WatchMissingNodeModulesPlugin = require('react-dev-utils/WatchMissingNodeModulesPlugin');
const ModuleScopePlugin = require('react-dev-utils/ModuleScopePlugin');
const getCSSModuleLocalIdent = require('react-dev-utils/getCSSModuleLocalIdent');
const paths = require('./paths');
const getClientEnvironment = require('./env');
const ModuleNotFoundPlugin = require('react-dev-utils/ModuleNotFoundPlugin');
const ForkTsCheckerWebpackPlugin = require('react-dev-utils/ForkTsCheckerWebpackPlugin');
const typescriptFormatter = require('react-dev-utils/typescriptFormatter');
// Source maps are resource heavy and can cause out of memory issue for large source files.
const shouldUseSourceMap = process.env.GENERATE_SOURCEMAP !== 'false';
// Some apps do not need the benefits of saving a web request, so not inlining the chunk
// makes for a smoother build process.
const shouldInlineRuntimeChunk = process.env.INLINE_RUNTIME_CHUNK !== 'false';
// Check if TypeScript is setup
const useTypeScript = fs.existsSync(paths.appTsConfig);
const theme = require('../package.json').theme;
// style files regexes
const cssRegex = /\.css$/;
const cssModuleRegex = /\.module\.css$/;
const sassRegex = /\.(scss|sass)$/;
const sassModuleRegex = /\.module\.(scss|sass)$/;
// This is the production and development configuration.
// It is focused on developer experience, fast rebuilds, and a minimal bundle.
module.exports = function(webpackEnv) {
const isEnvDevelopment = webpackEnv === 'development';
const isEnvProduction = webpackEnv === 'production';
// 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.
// In development, we always serve from the root. This makes config easier.
const publicPath = isEnvProduction
? paths.servedPath
: isEnvDevelopment && '/';
// Some apps do not use client-side routing with pushState.
// For these, "homepage" can be set to "." to enable relative asset paths.
const shouldUseRelativeAssetPaths = publicPath === './';
// `publicUrl` is just like `publicPath`, but we will provide it to our app
// as %PUBLIC_URL% in `index.html` and `process.env.PUBLIC_URL` in JavaScript.
// Omit trailing slash as %PUBLIC_URL%/xyz looks better than %PUBLIC_URL%xyz.
const publicUrl = isEnvProduction
? publicPath.slice(0, -1)
: isEnvDevelopment && '';
// Get environment variables to inject into our app.
const env = getClientEnvironment(publicUrl);
// common function to get style loaders
const getStyleLoaders = (cssOptions, preProcessor) => {
const loaders = [
isEnvDevelopment && require.resolve('style-loader'),
isEnvProduction && {
loader: MiniCssExtractPlugin.loader,
options: Object.assign(
{},
shouldUseRelativeAssetPaths ? { publicPath: '../../' } : undefined
),
},
{
loader: require.resolve('css-loader'),
options: cssOptions,
},
{
// Options for PostCSS as we reference these options twice
// Adds vendor prefixing based on your specified browser support in
// package.json
loader: require.resolve('postcss-loader'),
options: {
// Necessary for external CSS imports to work
// https://github.com/facebook/create-react-app/issues/2677
ident: 'postcss',
plugins: () => [
require('postcss-flexbugs-fixes'),
require('postcss-preset-env')({
autoprefixer: {
flexbox: 'no-2009',
},
stage: 3,
}),
],
sourceMap: isEnvProduction && shouldUseSourceMap,
},
},
].filter(Boolean);
if (preProcessor) {
loaders.push({
loader: require.resolve(preProcessor),
options: {
sourceMap: isEnvProduction && shouldUseSourceMap,
},
});
if(preProcessor == 'sass-loader' && !cssOptions.modules){
loaders.push({
loader: require.resolve('sass-resources-loader'),
options: {
resources: [require.resolve('../src/styles/variable.scss')]
}
})
}
}
return loaders;
};
return {
mode: isEnvProduction ? 'production' : isEnvDevelopment && 'development',
// Stop compilation early in production
bail: isEnvProduction,
devtool: isEnvProduction
? shouldUseSourceMap
? 'source-map'
: false
: isEnvDevelopment && 'cheap-module-source-map',
// These are the "entry points" to our application.
// This means they will be the "root" imports that are included in JS bundle.
entry: [
// Include an alternative client for WebpackDevServer. A client's job is to
// connect to WebpackDevServer by a socket and get notified about changes.
// When you save a file, the client will either apply hot updates (in case
// of CSS changes), or refresh the page (in case of JS changes). When you
// make a syntax error, this client will display a syntax error overlay.
// Note: instead of the default WebpackDevServer client, we use a custom one
// to bring better experience for Create React App users. You can replace
// the line below with these two lines if you prefer the stock client:
// require.resolve('webpack-dev-server/client') + '?/',
// require.resolve('webpack/hot/dev-server'),
isEnvDevelopment &&
require.resolve('react-dev-utils/webpackHotDevClient'),
// Finally, this is your app's code:
paths.appIndexJs,
// We include the app code last so that if there is a runtime error during
// initialization, it doesn't blow up the WebpackDevServer client, and
// changing JS code would still trigger a refresh.
].filter(Boolean),
output: {
// The build folder.
path: isEnvProduction ? paths.appBuild : undefined,
// Add /* filename */ comments to generated require()s in the output.
pathinfo: isEnvDevelopment,
// There will be one main bundle, and one file per asynchronous chunk.
// In development, it does not produce real files.
filename: isEnvProduction
? 'static/js/[name].[contenthash:8].js'
: isEnvDevelopment && 'static/js/bundle.js',
// There are also additional JS chunk files if you use code splitting.
chunkFilename: isEnvProduction
? 'static/js/[name].[contenthash:8].chunk.js'
: isEnvDevelopment && 'static/js/[name].chunk.js',
// We inferred the "public path" (such as / or /my-project) from homepage.
// We use "/" in development.
publicPath: publicPath,
// Point sourcemap entries to original disk location (format as URL on Windows)
devtoolModuleFilenameTemplate: isEnvProduction
? info =>
path
.relative(paths.appSrc, info.absoluteResourcePath)
.replace(/\\/g, '/')
: isEnvDevelopment &&
(info => path.resolve(info.absoluteResourcePath).replace(/\\/g, '/')),
},
optimization: {
minimize: isEnvProduction,
minimizer: [
// This is only used in production mode
new TerserPlugin({
terserOptions: {
parse: {
// we want terser to parse ecma 8 code. However, we don't want it
// to apply any minfication steps that turns valid ecma 5 code
// into invalid ecma 5 code. This is why the 'compress' and 'output'
// sections only apply transformations that are ecma 5 safe
// https://github.com/facebook/create-react-app/pull/4234
ecma: 8,
},
compress: {
ecma: 5,
warnings: false,
// Disabled because of an issue with Uglify breaking seemingly valid code:
// https://github.com/facebook/create-react-app/issues/2376
// Pending further investigation:
// https://github.com/mishoo/UglifyJS2/issues/2011
comparisons: false,
// Disabled because of an issue with Terser breaking valid code:
// https://github.com/facebook/create-react-app/issues/5250
// Pending futher investigation:
// https://github.com/terser-js/terser/issues/120
inline: 2,
},
mangle: {
safari10: true,
},
output: {
ecma: 5,
comments: false,
// Turned on because emoji and regex is not minified properly using default
// https://github.com/facebook/create-react-app/issues/2488
ascii_only: true,
},
},
// Use multi-process parallel running to improve the build speed
// Default number of concurrent runs: os.cpus().length - 1
parallel: true,
// Enable file caching
cache: true,
sourceMap: shouldUseSourceMap,
}),
// This is only used in production mode
new OptimizeCSSAssetsPlugin({
cssProcessorOptions: {
parser: safePostCssParser,
map: shouldUseSourceMap
? {
// `inline: false` forces the sourcemap to be output into a
// separate file
inline: false,
// `annotation: true` appends the sourceMappingURL to the end of
// the css file, helping the browser find the sourcemap
annotation: true,
}
: false,
},
}),
],
// Automatically split vendor and commons
// https://twitter.com/wSokra/status/969633336732905474
// https://medium.com/webpack/webpack-4-code-splitting-chunk-graph-and-the-splitchunks-optimization-be739a861366
splitChunks: {
chunks: 'all',
name: false,
},
// Keep the runtime chunk separated to enable long term caching
// https://twitter.com/wSokra/status/969679223278505985
runtimeChunk: true,
},
resolve: {
// This allows you to set a fallback for where Webpack should look for modules.
// We placed these paths second because we want `node_modules` to "win"
// if there are any conflicts. This matches Node resolution mechanism.
// https://github.com/facebook/create-react-app/issues/253
modules: ['node_modules'].concat(
// It is guaranteed to exist because we tweak it in `env.js`
process.env.NODE_PATH.split(path.delimiter).filter(Boolean)
),
// These are the reasonable defaults supported by the Node ecosystem.
// We also include JSX as a common component filename extension to support
// some tools, although we do not recommend using it, see:
// https://github.com/facebook/create-react-app/issues/290
// `web` extension prefixes have been added for better support
// for React Native Web.
extensions: paths.moduleFileExtensions
.map(ext => `.${ext}`)
.filter(ext => useTypeScript || !ext.includes('ts')),
alias: {
// Support React Native Web
// https://www.smashingmagazine.com/2016/08/a-glimpse-into-the-future-with-react-native-for-web/
'react-native': 'react-native-web',
},
plugins: [
// Adds support for installing with Plug'n'Play, leading to faster installs and adding
// guards against forgotten dependencies and such.
PnpWebpackPlugin,
// Prevents users from importing files from outside of src/ (or node_modules/).
// This often causes confusion because we only process files within src/ with babel.
// To fix this, we prevent you from importing files out of src/ -- if you'd like to,
// please link the files into your node_modules/ and let module-resolution kick in.
// Make sure your source files are compiled, as they will not be processed in any way.
new ModuleScopePlugin(paths.appSrc, [paths.appPackageJson]),
],
},
resolveLoader: {
plugins: [
// Also related to Plug'n'Play, but this time it tells Webpack to load its loaders
// from the current package.
PnpWebpackPlugin.moduleLoader(module),
],
},
module: {
strictExportPresence: true,
rules: [
// Disable require.ensure as it's not a standard language feature.
{ parser: { requireEnsure: false } },
// First, run the linter.
// It's important to do this before Babel processes the JS.
{
test: /\.(js|mjs|jsx)$/,
enforce: 'pre',
use: [
{
options: {
formatter: require.resolve('react-dev-utils/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 like "file" loader except that it embeds assets
// smaller than specified limit in bytes as data URLs to avoid requests.
// A missing `test` is equivalent to a match.
{
test: [/\.bmp$/, /\.gif$/, /\.jpe?g$/, /\.png$/],
loader: require.resolve('url-loader'),
options: {
limit: 10000,
name: 'static/media/[name].[hash:8].[ext]',
},
},
// Process application JS with Babel.
// The preset includes JSX, Flow, TypeScript, and some ESnext features.
{
test: /\.(js|mjs|jsx|ts|tsx)$/,
include: paths.appSrc,
loader: require.resolve('babel-loader'),
options: {
customize: require.resolve(
'babel-preset-react-app/webpack-overrides'
),
plugins: [
[
require.resolve('babel-plugin-named-asset-import'),
{
loaderMap: {
svg: {
ReactComponent: '@svgr/webpack?-svgo,+ref![path]',
},
},
},
],
],
// This is a feature of `babel-loader` for webpack (not Babel itself).
// It enables caching results in ./node_modules/.cache/babel-loader/
// directory for faster rebuilds.
cacheDirectory: true,
cacheCompression: isEnvProduction,
compact: isEnvProduction,
},
},
// Process any JS outside of the app with Babel.
// Unlike the application JS, we only compile the standard ES features.
{
test: /\.(js|mjs)$/,
exclude: /@babel(?:\/|\\{1,2})runtime/,
loader: require.resolve('babel-loader'),
options: {
babelrc: false,
configFile: false,
compact: false,
presets: [
[
require.resolve('babel-preset-react-app/dependencies'),
{ helpers: true },
],
],
cacheDirectory: true,
cacheCompression: isEnvProduction,
// If an error happens in a package, it's possible to be
// because it was compiled. Thus, we don't want the browser
// debugger to show the original code. Instead, the code
// being evaluated would be much more helpful.
sourceMaps: false,
},
},
// "postcss" loader applies autoprefixer to our CSS.
// "css" loader resolves paths in CSS and adds assets as dependencies.
// "style" loader turns CSS into JS modules that inject <style> tags.
// In production, we use MiniCSSExtractPlugin to extract that CSS
// to a file, but in development "style" loader enables hot editing
// of CSS.
// By default we support CSS Modules with the extension .module.css
{
test: cssRegex,
exclude: cssModuleRegex,
use: getStyleLoaders({
importLoaders: 1,
sourceMap: isEnvProduction && shouldUseSourceMap,
}),
// Don't consider CSS imports dead code even if the
// containing package claims to have no side effects.
// Remove this when webpack adds a warning or an error for this.
// See https://github.com/webpack/webpack/issues/6571
sideEffects: true,
},
// Adds support for CSS Modules (https://github.com/css-modules/css-modules)
// using the extension .module.css
{
test: cssModuleRegex,
use: getStyleLoaders({
importLoaders: 1,
sourceMap: isEnvProduction && shouldUseSourceMap,
modules: true,
getLocalIdent: getCSSModuleLocalIdent,
}),
},
// Opt-in support for SASS (using .scss or .sass extensions).
// By default we support SASS Modules with the
// extensions .module.scss or .module.sass
{
test: sassRegex,
exclude: sassModuleRegex,
use: getStyleLoaders(
{
importLoaders: 2,
sourceMap: isEnvProduction && shouldUseSourceMap,
modules: false
},
'sass-loader'
),
// Don't consider CSS imports dead code even if the
// containing package claims to have no side effects.
// Remove this when webpack adds a warning or an error for this.
// See https://github.com/webpack/webpack/issues/6571
sideEffects: true,
},
// Adds support for CSS Modules, but using SASS
// using the extension .module.scss or .module.sass
{
test: sassModuleRegex,
use: getStyleLoaders(
{
importLoaders: 2,
sourceMap: isEnvProduction && shouldUseSourceMap,
modules: true,
getLocalIdent: getCSSModuleLocalIdent,
},
'sass-loader'
),
},
{
test: /\.less$/,
use: [
'style-loader',
'css-loader',
{ loader: 'less-loader', options: { modifyVars: theme } },
],
include: /node_modules/,
},
// "file" loader makes sure those assets get served by WebpackDevServer.
// When you `import` an asset, you get its (virtual) filename.
// In production, they would get copied to the `build` folder.
// 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
// its runtime that would otherwise be processed through "file" loader.
// Also exclude `html` and `json` extensions so they get processed
// by webpacks internal loaders.
exclude: [/\.(js|mjs|jsx|ts|tsx)$/, /\.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: [
// Generates an `index.html` file with the <script> injected.
new HtmlWebpackPlugin(
Object.assign(
{},
{
inject: true,
template: paths.appHtml,
},
isEnvProduction
? {
minify: {
removeComments: true,
collapseWhitespace: true,
removeRedundantAttributes: true,
useShortDoctype: true,
removeEmptyAttributes: true,
removeStyleLinkTypeAttributes: true,
keepClosingSlash: true,
minifyJS: true,
minifyCSS: true,
minifyURLs: true,
},
}
: undefined
)
),
// Inlines the webpack runtime script. This script is too small to warrant
// a network request.
isEnvProduction &&
shouldInlineRuntimeChunk &&
new InlineChunkHtmlPlugin(HtmlWebpackPlugin, [/runtime~.+[.]js/]),
// 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.
// In development, this will be an empty string.
new InterpolateHtmlPlugin(HtmlWebpackPlugin, env.raw),
// This gives some necessary context to module not found errors, such as
// the requesting resource.
new ModuleNotFoundPlugin(paths.appPath),
// 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 is set to production
// during a production build.
// Otherwise React will be compiled in the very slow development mode.
new webpack.DefinePlugin(env.stringified),
// This is necessary to emit hot updates (currently CSS only):
isEnvDevelopment && new webpack.HotModuleReplacementPlugin(),
// Watcher doesn't work well if you mistype casing in a path so we use
// a plugin that prints an error when you attempt to do this.
// See https://github.com/facebook/create-react-app/issues/240
isEnvDevelopment && new CaseSensitivePathsPlugin(),
// If you require a missing module and then `npm install` it, you still have
// to restart the development server for Webpack to discover it. This plugin
// makes the discovery automatic so you don't have to restart.
// See https://github.com/facebook/create-react-app/issues/186
isEnvDevelopment &&
new WatchMissingNodeModulesPlugin(paths.appNodeModules),
isEnvProduction &&
new MiniCssExtractPlugin({
// Options similar to the same options in webpackOptions.output
// both options are optional
filename: 'static/css/[name].[contenthash:8].css',
chunkFilename: 'static/css/[name].[contenthash:8].chunk.css',
}),
// 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
// having to parse `index.html`.
new ManifestPlugin({
fileName: 'asset-manifest.json',
publicPath: publicPath,
}),
// 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
// solution that requires the user to opt into importing specific locales.
// https://github.com/jmblog/how-to-optimize-momentjs-with-webpack
// You can remove this if you don't use Moment.js:
new webpack.IgnorePlugin(/^\.\/locale$/, /moment$/),
// Generate a service worker script that will precache, and keep up to date,
// the HTML & assets that are part of the Webpack build.
isEnvProduction &&
new WorkboxWebpackPlugin.GenerateSW({
clientsClaim: true,
exclude: [/\.map$/, /asset-manifest\.json$/],
importWorkboxFrom: 'cdn',
navigateFallback: publicUrl + '/index.html',
navigateFallbackBlacklist: [
// Exclude URLs starting with /_, as they're likely an API call
new RegExp('^/_'),
// Exclude URLs containing a dot, as they're likely a resource in
// public/ and not a SPA route
new RegExp('/[^/]+\\.[^/]+$'),
],
}),
// TypeScript type checking
useTypeScript &&
new ForkTsCheckerWebpackPlugin({
typescript: resolve.sync('typescript', {
basedir: paths.appNodeModules,
}),
async: isEnvDevelopment,
useTypescriptIncrementalApi: true,
checkSyntacticErrors: true,
tsconfig: paths.appTsConfig,
reportFiles: [
'**',
'!**/*.json',
'!**/__tests__/**',
'!**/?(*.)(spec|test).*',
'!**/src/setupProxy.*',
'!**/src/setupTests.*',
],
watch: paths.appSrc,
silent: true,
// The formatter is invoked directly in WebpackDevServerUtils during development
formatter: isEnvProduction ? typescriptFormatter : undefined,
}),
].filter(Boolean),
// 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.
node: {
module: 'empty',
dgram: 'empty',
dns: 'mock',
fs: 'empty',
net: 'empty',
tls: 'empty',
child_process: 'empty',
},
// Turn off performance processing because we utilize
// our own hints via the FileSizeReporter
performance: false,
};
};
.history/src/assets/theme/config_20190419102304.js 0 → 100644
module.exports = function() {
return {
"brand-primary": 'green'
}
}
\ No newline at end of file
.history/src/assets/theme/config_20190419102406.js 0 → 100644
module.exports = function() {
return {
// "brand-primary": 'green'
}
}
\ No newline at end of file
.history/src/assets/theme/config_20190419102410.js 0 → 100644
module.exports = function() {
return {
"brand-primary": 'green'
}
}
\ No newline at end of file
.history/src/components/my/index_20190419101826.js 0 → 100644
import React, { Component } from 'react';
import { Flex, WhiteSpace, NavBarm, List } from 'antd-mobile';
import './index.scss';
const Item = List.Item;
class My extends Component {
render() {
return (
<div className="flex-container">
<Flex>
<Flex.Item>
<div >
<NavBar
className="my-tab"
mode="light"
onLeftClick={() => console.log('onLeftClick')}
rightContent={[
]}
>
我的
</NavBar>
<List renderHeader={() => 'Align Vertical Center'} className="my-list">
<Item multipleLine extra="extra content">
Title <Brief>subtitle</Brief>
</Item>
</List>
</div>
</Flex.Item>
</Flex>
<WhiteSpace size="lg" />
</div>
)
}
}
export default My;
\ No newline at end of file
.history/src/components/my/index_20190419101847.js 0 → 100644
import React, { Component } from 'react';
import { Flex, WhiteSpace, NavBarm, List } from 'antd-mobile';
import './index.scss';
const Item = List.Item;
class My extends Component {
render() {
return (
<div className="flex-container">
<Flex>
<Flex.Item>
<div >
<NavBar
className="my-tab"
mode="light"
onLeftClick={() => console.log('onLeftClick')}
rightContent={[
]}
>
我的
</NavBar>
<List renderHeader={() => 'Align Vertical Center'} className="my-list">
<Item multipleLine extra="extra content">
</Item>
</List>
</div>
</Flex.Item>
</Flex>
<WhiteSpace size="lg" />
</div>
)
}
}
export default My;
\ No newline at end of file
.history/src/components/my/index_20190419101855.js 0 → 100644
import React, { Component } from 'react';
import { Flex, WhiteSpace, NavBar, List } from 'antd-mobile';
import './index.scss';
const Item = List.Item;
class My extends Component {
render() {
return (
<div className="flex-container">
<Flex>
<Flex.Item>
<div >
<NavBar
className="my-tab"
mode="light"
onLeftClick={() => console.log('onLeftClick')}
rightContent={[
]}
>
我的
</NavBar>
<List renderHeader={() => 'Align Vertical Center'} className="my-list">
<Item multipleLine extra="extra content">
</Item>
</List>
</div>
</Flex.Item>
</Flex>
<WhiteSpace size="lg" />
</div>
)
}
}
export default My;
\ No newline at end of file
.history/src/components/my/index_20190419101930.js 0 → 100644
import React, { Component } from 'react';
import { Flex, WhiteSpace, NavBar, List } from 'antd-mobile';
import './index.scss';
const Item = List.Item;
class My extends Component {
render() {
return (
<div className="flex-container">
<Flex>
<Flex.Item>
<div >
<NavBar
className="my-tab"
mode="light"
onLeftClick={() => console.log('onLeftClick')}
rightContent={[
]}
>
我的
</NavBar>
<List renderHeader={() => 'Align Vertical Center'} className="my-list">
</List>
</div>
</Flex.Item>
</Flex>
<WhiteSpace size="lg" />
</div>
)
}
}
export default My;
\ No newline at end of file
.history/src/components/my/index_20190419102003.js 0 → 100644
import React, { Component } from 'react';
import { Flex, WhiteSpace, NavBarm, List } from 'antd-mobile';
import './index.scss';
const Item = List.Item;
const Brief = List.Brief;
class My extends Component {
render() {
return (
<div className="flex-container">
<Flex>
<Flex.Item>
<div >
<NavBar
className="my-tab"
mode="light"
onLeftClick={() => console.log('onLeftClick')}
rightContent={[
]}
>
我的
</NavBar>
<List renderHeader={() => 'Align Vertical Center'} className="my-list">
<Item multipleLine extra="extra content">
Title <Brief>subtitle</Brief>
</Item>
</List>
</div>
</Flex.Item>
</Flex>
<WhiteSpace size="lg" />
</div>
)
}
}
export default My;
\ No newline at end of file
.history/src/components/my/index_20190419102009.js 0 → 100644
import React, { Component } from 'react';
import { Flex, WhiteSpace, NavBar, List } from 'antd-mobile';
import './index.scss';
const Item = List.Item;
const Brief = List.Brief;
class My extends Component {
render() {
return (
<div className="flex-container">
<Flex>
<Flex.Item>
<div >
<NavBar
className="my-tab"
mode="light"
onLeftClick={() => console.log('onLeftClick')}
rightContent={[
]}
>
我的
</NavBar>
<List renderHeader={() => 'Align Vertical Center'} className="my-list">
<Item multipleLine extra="extra content">
Title <Brief>subtitle</Brief>
</Item>
</List>
</div>
</Flex.Item>
</Flex>
<WhiteSpace size="lg" />
</div>
)
}
}
export default My;
\ No newline at end of file
.history/src/components/my/index_20190419102846.js 0 → 100644
import React, { Component } from 'react';
import { Flex, WhiteSpace, NavBar, List } from 'antd-mobile';
import './index.scss';
const Item = List.Item;
const Brief = List.Brief;
class My extends Component {
render() {
return (
<div className="flex-container">
<Flex>
<Flex.Item>
<div >
<NavBar
className="my-tab"
mode="light"
onLeftClick={() => console.log('onLeftClick')}
rightContent={[
]}
>
我的
</NavBar>
</div>
</Flex.Item>
</Flex>
<WhiteSpace size="lg" />
</div>
)
}
}
export default My;
\ No newline at end of file
.history/src/components/my/index_20190419102856.js 0 → 100644
import React, { Component } from 'react';
import { Flex, WhiteSpace, NavBar, List } from 'antd-mobile';
import './index.scss';
class My extends Component {
render() {
return (
<div className="flex-container">
<Flex>
<Flex.Item>
<div >
<NavBar
className="my-tab"
mode="light"
onLeftClick={() => console.log('onLeftClick')}
rightContent={[
]}
>
我的
</NavBar>
</div>
</Flex.Item>
</Flex>
<WhiteSpace size="lg" />
</div>
)
}
}
export default My;
\ No newline at end of file
.history/src/components/my/index_20190419103104.js 0 → 100644
import React, { Component } from 'react';
import { Flex, WhiteSpace, NavBar, List } from 'antd-mobile';
import './index.scss';
class My extends Component {
render() {
return (
<div className="flex-container">
<Flex>
<Flex.Item>
<NavBar
className="my-tab"
mode="light"
onLeftClick={() => console.log('onLeftClick')}
rightContent={[
]}
>
我的
</NavBar>
<List renderHeader={() => 'Align Vertical Center'} className="my-list">
</List>
</Flex.Item>
</Flex>
<WhiteSpace size="lg" />
</div>
)
}
}
export default My;
\ No newline at end of file
.history/src/components/my/index_20190419104806.js 0 → 100644
import React, { Component } from 'react';
import { Flex, WhiteSpace, NavBar, List } from 'antd-mobile';
import './index.scss';
class My extends Component {
render() {
return (
<div className="flex-container">
<Flex>
<Flex.Item>
<NavBar
className="my-tab"
mode="light"
onLeftClick={() => console.log('onLeftClick')}
rightContent={[
]}
>
我的
</NavBar>
{/* <List renderHeader={() => 'Align Vertical Center'} className="my-list">
</List> */}
</Flex.Item>
</Flex>
<WhiteSpace size="lg" />
</div>
)
}
}
export default My;
\ No newline at end of file
.history/src/components/my/index_20190419105151.js 0 → 100644
import React, { Component } from 'react';
import { Flex, WhiteSpace, NavBar, List } from 'antd-mobile';
import './index.scss';
class My extends Component {
render() {
return (
<div className="flex-container">
<Flex>
<Flex.Item>
<NavBar
className="my-tab"
mode="light"
onLeftClick={() => console.log('onLeftClick')}
rightContent={[
]}
>
我的
</NavBar>
<List renderHeader={() => 'Align Vertical Center'} className="my-list">
</List>
</Flex.Item>
</Flex>
<WhiteSpace size="lg" />
</div>
)
}
}
export default My;
\ No newline at end of file
.history/src/components/my/index_20190419110119.js 0 → 100644
import React, { Component } from 'react';
import { Flex, WhiteSpace, NavBar, List } from 'antd-mobile';
import './index.scss';
class My extends Component {
render() {
return (
<div className="flex-container">
<Flex>
<Flex.Item>
<NavBar
className="my-tab"
mode="light"
onLeftClick={() => console.log('onLeftClick')}
rightContent={[
]}
>
我的
</NavBar>
<List renderHeader={() => 'Align Vertical Center'} className="my-list">
</List>
</Flex.Item>
</Flex>
<WhiteSpace size="lg" />
</div>
)
}
}
export default My;
\ No newline at end of file
.history/src/components/my/index_20190419110208.js 0 → 100644
import React, { Component } from 'react';
import { Flex, WhiteSpace, NavBar, List } from 'antd-mobile';
import './index.scss';
const Item = List.Item;
const Brief = List.Brief;
class My extends Component {
render() {
return (
<div className="flex-container">
<Flex>
<Flex.Item>
<NavBar
className="my-tab"
mode="light"
onLeftClick={() => console.log('onLeftClick')}
rightContent={[
]}
>
我的
</NavBar>
<List renderHeader={() => 'Align Vertical Center'} className="my-list">
<Item multipleLine extra="extra content">
Title <Brief>subtitle</Brief>
</Item>
</List>
</Flex.Item>
</Flex>
<WhiteSpace size="lg" />
</div>
)
}
}
export default My;
\ No newline at end of file
.history/src/components/my/index_20190419110252.js 0 → 100644
import React, { Component } from 'react';
import { Flex, WhiteSpace, NavBar, List } from 'antd-mobile';
import './index.scss';
const Item = List.Item;
const Brief = List.Brief;
class My extends Component {
render() {
return (
<div className="flex-container">
<Flex>
<Flex.Item>
<NavBar
className="my-tab"
mode="light"
onLeftClick={() => console.log('onLeftClick')}
rightContent={[
]}
>
我的
</NavBar>
<div>
<List renderHeader={() => 'Align Vertical Center'} className="my-list">
<Item multipleLine extra="extra content">
Title <Brief>subtitle</Brief>
</Item>
</List>
</div>
</Flex.Item>
</Flex>
<WhiteSpace size="lg" />
</div>
)
}
}
export default My;
\ No newline at end of file
.history/src/components/my/index_20190419110341.js 0 → 100644
import React, { Component } from 'react';
import { Flex, WhiteSpace, NavBar, List } from 'antd-mobile';
import './index.scss';
const Item = List.Item;
const Brief = List.Brief;
class My extends Component {
render() {
return (
<div className="flex-container">
<Flex>
<Flex.Item>
<NavBar
className="my-tab"
mode="light"
onLeftClick={() => console.log('onLeftClick')}
rightContent={[
]}
>
我的
</NavBar>
<div>
<List renderHeader={() => 'Align Vertical Center'} className="my-list">
<Item extra="extra content">
Title <Brief>subtitle</Brief>
</Item>
</List>
</div>
</Flex.Item>
</Flex>
<WhiteSpace size="lg" />
</div>
)
}
}
export default My;
\ No newline at end of file
.history/src/components/my/index_20190419110411.js 0 → 100644
import React, { Component } from 'react';
import { Flex, WhiteSpace, NavBar, List } from 'antd-mobile';
import './index.scss';
const Item = List.Item;
const Brief = List.Brief;
class My extends Component {
render() {
return (
<div className="flex-container">
<Flex>
<Flex.Item>
<NavBar
className="my-tab"
mode="light"
onLeftClick={() => console.log('onLeftClick')}
rightContent={[
]}
>
我的
</NavBar>
<div>
<List renderHeader={() => 'Align Vertical Center'} className="my-list">
{/* <Item extra="extra content"> */}
Title <Brief>subtitle</Brief>
{/* </Item> */}
</List>
</div>
</Flex.Item>
</Flex>
<WhiteSpace size="lg" />
</div>
)
}
}
export default My;
\ No newline at end of file
.history/src/components/my/index_20190419110419.js 0 → 100644
import React, { Component } from 'react';
import { Flex, WhiteSpace, NavBar, List } from 'antd-mobile';
import './index.scss';
const Item = List.Item;
const Brief = List.Brief;
class My extends Component {
render() {
return (
<div className="flex-container">
<Flex>
<Flex.Item>
<NavBar
className="my-tab"
mode="light"
onLeftClick={() => console.log('onLeftClick')}
rightContent={[
]}
>
我的
</NavBar>
<div>
<List renderHeader={() => 'Align Vertical Center'} className="my-list">
{/* <Item extra="extra content"> */}
{/* Title <Brief>subtitle</Brief> */}
{/* </Item> */}
</List>
</div>
</Flex.Item>
</Flex>
<WhiteSpace size="lg" />
</div>
)
}
}
export default My;
\ No newline at end of file
.history/src/components/my/index_20190419110558.js 0 → 100644
import React, { Component } from 'react';
import { Flex, WhiteSpace, NavBar, List } from 'antd-mobile';
import './index.scss';
const Item = List.Item;
const Brief = List.Brief;
class My extends Component {
render() {
return (
<div className="flex-container">
<Flex>
<Flex.Item>
<NavBar
className="my-tab"
mode="light"
onLeftClick={() => console.log('onLeftClick')}
rightContent={[
]}
>
我的
</NavBar>
<div>
<List renderHeader={() => 'Align Vertical Center'} className="my-list">
<Item extra="extra content">
{/* Title <Brief>subtitle</Brief> */}
Title
</Item>
</List>
</div>
</Flex.Item>
</Flex>
<WhiteSpace size="lg" />
</div>
)
}
}
export default My;
\ No newline at end of file
.history/src/components/my/index_20190419110606.js 0 → 100644
import React, { Component } from 'react';
import { Flex, WhiteSpace, NavBar, List } from 'antd-mobile';
import './index.scss';
const Item = List.Item;
const Brief = List.Brief;
class My extends Component {
render() {
return (
<div className="flex-container">
<Flex>
<Flex.Item>
<NavBar
className="my-tab"
mode="light"
onLeftClick={() => console.log('onLeftClick')}
rightContent={[
]}
>
我的
</NavBar>
<div>
<List renderHeader={() => 'Align Vertical Center'} className="my-list">
<Item extra="extra content">
Title <Brief>subtitle</Brief>
Title
</Item>
</List>
</div>
</Flex.Item>
</Flex>
<WhiteSpace size="lg" />
</div>
)
}
}
export default My;
\ No newline at end of file
.history/src/components/my/index_20190419110610.js 0 → 100644
import React, { Component } from 'react';
import { Flex, WhiteSpace, NavBar, List } from 'antd-mobile';
import './index.scss';
const Item = List.Item;
const Brief = List.Brief;
class My extends Component {
render() {
return (
<div className="flex-container">
<Flex>
<Flex.Item>
<NavBar
className="my-tab"
mode="light"
onLeftClick={() => console.log('onLeftClick')}
rightContent={[
]}
>
我的
</NavBar>
<div>
<List renderHeader={() => 'Align Vertical Center'} className="my-list">
<Item extra="extra content">
Title
</Item>
</List>
</div>
</Flex.Item>
</Flex>
<WhiteSpace size="lg" />
</div>
)
}
}
export default My;
\ No newline at end of file
.history/src/components/my/index_20190419110612.js 0 → 100644
import React, { Component } from 'react';
import { Flex, WhiteSpace, NavBar, List } from 'antd-mobile';
import './index.scss';
const Item = List.Item;
const Brief = List.Brief;
class My extends Component {
render() {
return (
<div className="flex-container">
<Flex>
<Flex.Item>
<NavBar
className="my-tab"
mode="light"
onLeftClick={() => console.log('onLeftClick')}
rightContent={[
]}
>
我的
</NavBar>
<div>
<List renderHeader={() => 'Align Vertical Center'} className="my-list">
<Item extra="extra content">
Title
</Item>
</List>
</div>
</Flex.Item>
</Flex>
<WhiteSpace size="lg" />
</div>
)
}
}
export default My;
\ No newline at end of file
.history/src/components/my/index_20190419110638.js 0 → 100644
import React, { Component } from 'react';
import { Flex, WhiteSpace, NavBar, List } from 'antd-mobile';
import './index.scss';
const Item = List.Item;
const Brief = List.Brief;
class My extends Component {
render() {
return (
<div className="flex-container">
<Flex>
<Flex.Item>
<NavBar
className="my-tab"
mode="light"
onLeftClick={() => console.log('onLeftClick')}
rightContent={[
]}
>
我的
</NavBar>
<div>
<List className="my-list">
<Item extra="extra content">
Title
</Item>
</List>
</div>
</Flex.Item>
</Flex>
<WhiteSpace size="lg" />
</div>
)
}
}
export default My;
\ No newline at end of file
.history/src/components/my/index_20190419110744.js 0 → 100644
import React, { Component } from 'react';
import { Flex, WhiteSpace, NavBar, List } from 'antd-mobile';
import './index.scss';
const Item = List.Item;
const Brief = List.Brief;
class My extends Component {
render() {
return (
<div className="flex-container">
<Flex>
<Flex.Item>
<NavBar
className="my-tab"
mode="light"
onLeftClick={() => console.log('onLeftClick')}
rightContent={[
]}
>
我的
</NavBar>
<div>
<List className="my-list">
<Item multipleLine extra="extra content">
Title
</Item>
</List>
</div>
</Flex.Item>
</Flex>
<WhiteSpace size="lg" />
</div>
)
}
}
export default My;
\ No newline at end of file
.history/src/components/my/index_20190419110800.js 0 → 100644
import React, { Component } from 'react';
import { Flex, WhiteSpace, NavBar, List } from 'antd-mobile';
import './index.scss';
const Item = List.Item;
const Brief = List.Brief;
class My extends Component {
render() {
return (
<div className="flex-container">
<Flex>
<Flex.Item>
<NavBar
className="my-tab"
mode="light"
onLeftClick={() => console.log('onLeftClick')}
rightContent={[
]}
>
我的
</NavBar>
<div>
<List className="my-list">
<Item multipleLine extra="extra content">
Title
<Brief></Brief>
</Item>
</List>
</div>
</Flex.Item>
</Flex>
<WhiteSpace size="lg" />
</div>
)
}
}
export default My;
\ No newline at end of file
.history/src/components/my/index_20190419111236.js 0 → 100644
import React, { Component } from 'react';
import { Flex, WhiteSpace, NavBar, List } from 'antd-mobile';
import './index.scss';
const Item = List.Item;
const Brief = Item.Brief;
class My extends Component {
render() {
return (
<div className="flex-container">
<Flex>
<Flex.Item>
<NavBar
className="my-tab"
mode="light"
onLeftClick={() => console.log('onLeftClick')}
rightContent={[
]}
>
我的
</NavBar>
<div>
<List className="my-list">
<Item multipleLine extra="extra content">
Title
<Brief></Brief>
</Item>
</List>
</div>
</Flex.Item>
</Flex>
<WhiteSpace size="lg" />
</div>
)
}
}
export default My;
\ No newline at end of file
.history/src/components/my/index_20190419111550.js 0 → 100644
import React, { Component } from 'react';
import { Flex, WhiteSpace, NavBar, List } from 'antd-mobile';
import './index.scss';
const Item = List.Item;
const Brief = Item.Brief;
class My extends Component {
render() {
return (
<div className="flex-container">
<Flex>
<Flex.Item>
<NavBar
className="my-tab"
mode="light"
onLeftClick={() => console.log('onLeftClick')}
rightContent={[
]}
>
我的
</NavBar>
<div>
<List className="my-list">
<Item multipleLine extra="extra content">
Title <Brief>subtitle</Brief>
</Item>
</List>
</div>
</Flex.Item>
</Flex>
<WhiteSpace size="lg" />
</div>
)
}
}
export default My;
\ No newline at end of file
.history/src/components/my/index_20190419111656.js 0 → 100644
import React, { Component } from 'react';
import { Flex, WhiteSpace, NavBar, List } from 'antd-mobile';
import './index.scss';
const Item = List.Item;
const Brief = Item.Brief;
class My extends Component {
render() {
return (
<div className="flex-container">
<Flex>
<Flex.Item>
<NavBar
className="my-tab"
mode="light"
onLeftClick={() => console.log('onLeftClick')}
rightContent={[
]}
>
我的
</NavBar>
<List className="my-list">
<Item multipleLine extra="extra content">
Title <Brief>subtitle</Brief>
</Item>
</List>
</Flex.Item>
</Flex>
<WhiteSpace size="lg" />
</div>
)
}
}
export default My;
\ No newline at end of file
.history/src/components/my/index_20190419111754.scss 0 → 100644
.my-tab{
width: 100%;
height: 44px;
font-size: $font_16;
background: #f7f9fc;
}
.my-list{
}
\ No newline at end of file
.history/src/components/my/index_20190419111807.js 0 → 100644
import React, { Component } from 'react';
import { Flex, WhiteSpace, NavBar, List } from 'antd-mobile';
import './index.scss';
const Item = List.Item;
const Brief = Item.Brief;
class My extends Component {
render() {
return (
<div className="flex-container">
<Flex>
<Flex.Item>
<NavBar
className="my-tab"
mode="light"
onLeftClick={() => console.log('onLeftClick')}
rightContent={[
]}
>
我的
</NavBar>
<List className="my-list">
<Item multipleLine extra="extra content">
Title <Brief>subtitle</Brief>
</Item>
</List>
</Flex.Item>
</Flex>
<WhiteSpace size="lg" />
</div>
)
}
}
export default My;
\ No newline at end of file
.history/src/components/my/index_20190419112414.js 0 → 100644
import React, { Component } from 'react';
import { Flex, WhiteSpace, NavBar, List } from 'antd-mobile';
import './index.scss';
const Item = List.Item;
const Brief = Item.Brief;
class My extends Component {
render() {
return (
<div className="flex-container">
<Flex>
<Flex.Item>
<NavBar
className="my-tab"
mode="light"
onLeftClick={() => console.log('onLeftClick')}
rightContent={[
]}
>
我的
</NavBar>
<List renderHeader={() => 'Subtitle'} className="my-list">
<Item arrow="horizontal" multipleLine onClick={() => { }}>
Title <Brief>subtitle</Brief>
</Item>
<Item
arrow="horizontal"
multipleLine
onClick={() => { }}
platform="android"
>
ListItem （Android）<Brief>There may have water ripple effect of <br /> material if you set the click event.</Brief>
</Item>
<Item
arrow="horizontal"
thumb="https://zos.alipayobjects.com/rmsportal/dNuvNrtqUztHCwM.png"
multipleLine
onClick={() => { }}
>
Title <Brief>subtitle</Brief>
</Item>
</List>
</Flex.Item>
</Flex>
<WhiteSpace size="lg" />
</div>
)
}
}
export default My;
\ No newline at end of file
.history/src/components/my/index_20190419112454.js 0 → 100644
import React, { Component } from 'react';
import { Flex, WhiteSpace, NavBar, List } from 'antd-mobile';
import './index.scss';
const Item = List.Item;
const Brief = Item.Brief;
class My extends Component {
render() {
return (
<div className="flex-container">
<Flex>
<Flex.Item>
<NavBar
className="my-tab"
mode="light"
onLeftClick={() => console.log('onLeftClick')}
rightContent={[
]}
>
我的
</NavBar>
<List renderHeader={() => 'Subtitle'} className="my-list">
<Item arrow="horizontal" multipleLine onClick={() => { }}>
Title <Brief>subtitle</Brief>
</Item>
</List>
</Flex.Item>
</Flex>
<WhiteSpace size="lg" />
</div>
)
}
}
export default My;
\ No newline at end of file
.history/src/components/my/index_20190419112503.js 0 → 100644
import React, { Component } from 'react';
import { Flex, WhiteSpace, NavBar, List } from 'antd-mobile';
import './index.scss';
const Item = List.Item;
const Brief = Item.Brief;
class My extends Component {
render() {
return (
<div className="flex-container">
<Flex>
<Flex.Item>
<NavBar
className="my-tab"
mode="light"
onLeftClick={() => console.log('onLeftClick')}
rightContent={[
]}
>
我的
</NavBar>
<List className="my-list">
<Item arrow="horizontal" multipleLine onClick={() => { }}>
Title <Brief>subtitle</Brief>
</Item>
</List>
</Flex.Item>
</Flex>
<WhiteSpace size="lg" />
</div>
)
}
}
export default My;
\ No newline at end of file
.history/src/components/my/index_20190419112511.js 0 → 100644
import React, { Component } from 'react';
import { Flex, WhiteSpace, NavBar, List } from 'antd-mobile';
import './index.scss';
const Item = List.Item;
const Brief = Item.Brief;
class My extends Component {
render() {
return (
<div className="flex-container">
<Flex>
<Flex.Item>
<NavBar
className="my-tab"
mode="light"
onLeftClick={() => console.log('onLeftClick')}
rightContent={[
]}
>
我的
</NavBar>
<List className="my-list">
<Item arrow="horizontal" multipleLine onClick={() => { }}>
Title <Brief>subtitle</Brief>
</Item>
</List>
</Flex.Item>
</Flex>
<WhiteSpace size="lg" />
</div>
)
}
}
export default My;
\ No newline at end of file
.history/src/components/my/index_20190419113908.js 0 → 100644
import React, { Component } from 'react';
import { Flex, WhiteSpace, NavBar, List } from 'antd-mobile';
import './index.scss';
const Item = List.Item;
const Brief = Item.Brief;
class My extends Component {
render() {
return (
<div className="flex-container">
<Flex>
<Flex.Item>
<NavBar
className="my-tab"
mode="light"
>
我的
</NavBar>
<List className="my-list">
<Item arrow="horizontal" multipleLine onClick={() => { }}>
Title <Brief>subtitle</Brief>
</Item>
</List>
</Flex.Item>
</Flex>
<WhiteSpace size="lg" />
</div>
)
}
}
export default My;
\ No newline at end of file
.history/src/components/my/index_20190419114005.js 0 → 100644
import React, { Component } from 'react';
import { Flex, WhiteSpace, NavBar, List } from 'antd-mobile';
import './index.scss';
const Item = List.Item;
const Brief = Item.Brief;
class My extends Component {
render() {
return (
<div className="flex-container">
<Flex>
<Flex.Item>
<NavBar
className="my-tab"
mode="light"
>
我的
</NavBar>
<List className="my-list">
<Item arrow="horizontal" multipleLine onClick={() => { }}>
<img src="./image/avatar.png" />
<Brief>subtitle</Brief>
</Item>
</List>
</Flex.Item>
</Flex>
<WhiteSpace size="lg" />
</div>
)
}
}
export default My;
\ No newline at end of file
.history/src/components/my/index_20190419114010.js 0 → 100644
import React, { Component } from 'react';
import { Flex, WhiteSpace, NavBar, List } from 'antd-mobile';
import './index.scss';
const Item = List.Item;
const Brief = Item.Brief;
class My extends Component {
render() {
return (
<div className="flex-container">
<Flex>
<Flex.Item>
<NavBar
className="my-tab"
mode="light"
>
我的
</NavBar>
<List className="my-list">
<Item arrow="horizontal" multipleLine onClick={() => { }}>
<img src="./image/avatar.png" alt=""/>
<Brief>subtitle</Brief>
</Item>
</List>
</Flex.Item>
</Flex>
<WhiteSpace size="lg" />
</div>
)
}
}
export default My;
\ No newline at end of file
.history/src/components/my/index_20190419114050.js 0 → 100644
import React, { Component } from 'react';
import { Flex, WhiteSpace, NavBar, List } from 'antd-mobile';
import './index.scss';
const Item = List.Item;
const Brief = Item.Brief;
class My extends Component {
render() {
return (
<div className="flex-container">
<Flex>
<Flex.Item>
<NavBar
className="my-tab"
mode="light"
>
我的
</NavBar>
<List className="my-list">
<Item arrow="horizontal" multipleLine onClick={() => { }}>
<img src="../image/avatar.png" alt=""/>
<Brief>subtitle</Brief>
</Item>
</List>
</Flex.Item>
</Flex>
<WhiteSpace size="lg" />
</div>
)
}
}
export default My;
\ No newline at end of file
.history/src/components/my/index_20190419114055.js 0 → 100644
import React, { Component } from 'react';
import { Flex, WhiteSpace, NavBar, List } from 'antd-mobile';
import './index.scss';
const Item = List.Item;
const Brief = Item.Brief;
class My extends Component {
render() {
return (
<div className="flex-container">
<Flex>
<Flex.Item>
<NavBar
className="my-tab"
mode="light"
>
我的
</NavBar>
<List className="my-list">
<Item arrow="horizontal" multipleLine onClick={() => { }}>
<img src="./image/avatar.png" alt=""/>
<Brief>subtitle</Brief>
</Item>
</List>
</Flex.Item>
</Flex>
<WhiteSpace size="lg" />
</div>
)
}
}
export default My;
\ No newline at end of file
.history/src/components/my/index_20190419114325.js 0 → 100644
import React, { Component } from 'react';
import { Flex, WhiteSpace, NavBar, List } from 'antd-mobile';
import './index.scss';
import Avatar from './image/avatar.png';
const Item = List.Item;
const Brief = Item.Brief;
class My extends Component {
render() {
return (
<div className="flex-container">
<Flex>
<Flex.Item>
<NavBar
className="my-tab"
mode="light"
>
我的
</NavBar>
<List className="my-list">
<Item arrow="horizontal" multipleLine onClick={() => { }}>
<img src="./image/avatar.png" alt=""/>
<Brief>subtitle</Brief>
</Item>
</List>
</Flex.Item>
</Flex>
<WhiteSpace size="lg" />
</div>
)
}
}
export default My;
\ No newline at end of file
.history/src/components/my/index_20190419114335.js 0 → 100644
import React, { Component } from 'react';
import { Flex, WhiteSpace, NavBar, List } from 'antd-mobile';
import './index.scss';
import Avatar from './image/avatar.png';
const Item = List.Item;
const Brief = Item.Brief;
class My extends Component {
render() {
return (
<div className="flex-container">
<Flex>
<Flex.Item>
<NavBar
className="my-tab"
mode="light"
>
我的
</NavBar>
<List className="my-list">
<Item arrow="horizontal" multipleLine onClick={() => { }}>
<img src={Avatar} alt=""/>
<Brief>subtitle</Brief>
</Item>
</List>
</Flex.Item>
</Flex>
<WhiteSpace size="lg" />
</div>
)
}
}
export default My;
\ No newline at end of file
.history/src/components/my/index_20190419114426.js 0 → 100644
import React, { Component } from 'react';
import { Flex, WhiteSpace, NavBar, List } from 'antd-mobile';
import './index.scss';
import Avatar from './image/avatar.png';
const Item = List.Item;
const Brief = Item.Brief;
class My extends Component {
render() {
return (
<div className="flex-container">
<Flex>
<Flex.Item>
<NavBar
className="my-tab"
mode="light"
>
我的
</NavBar>
<List className="my-list">
<Item arrow="horizontal" multipleLine onClick={() => { }}>
<img className="avatar" src={Avatar} alt=""/>
<Brief>subtitle</Brief>
</Item>
</List>
</Flex.Item>
</Flex>
<WhiteSpace size="lg" />
</div>
)
}
}
export default My;
\ No newline at end of file
.history/src/components/my/index_20190419114440.scss 0 → 100644
.my-tab{
width: 100%;
height: 44px;
font-size: $font_16;
background: #f7f9fc;
}
.my-list{
.avatar{
width: 64px;
height: 64px;
}
}
\ No newline at end of file
.history/src/components/my/index_20190419114510.scss 0 → 100644
.my-tab{
width: 100%;
height: 44px;
font-size: $font_16;
background: #f7f9fc;
}
.my-list{
padding: 15px 20px;
.avatar{
width: 64px;
height: 64px;
}
}
\ No newline at end of file
.history/src/components/my/index_20190419114650.js 0 → 100644
import React, { Component } from 'react';
import { Flex, WhiteSpace, NavBar, List } from 'antd-mobile';
import './index.scss';
import Avatar from './image/avatar.png';
const Item = List.Item;
const Brief = Item.Brief;
class My extends Component {
render() {
return (
<div className="flex-container">
<Flex>
<Flex.Item>
<NavBar
className="my-tab"
mode="light"
>
我的
</NavBar>
<List className="my-list">
<Item className="avatar-wrap" arrow="horizontal" multipleLine onClick={() => { }}>
<img className="avatar" src={Avatar} alt=""/>
<Brief>subtitle</Brief>
</Item>
</List>
</Flex.Item>
</Flex>
<WhiteSpace size="lg" />
</div>
)
}
}
export default My;
\ No newline at end of file
.history/src/components/my/index_20190419114707.scss 0 → 100644
.my-tab{
width: 100%;
height: 44px;
font-size: $font_16;
background: #f7f9fc;
}
.my-list{
.avatar-wrap{
padding: 15px 20px;
.avatar{
width: 64px;
height: 64px;
}
}
}
\ No newline at end of file
.history/src/components/my/index_20190419114710.scss 0 → 100644
.my-tab{
width: 100%;
height: 44px;
font-size: $font_16;
background: #f7f9fc;
}
.my-list{
.avatar-wrap{
padding: 15px 20px;
.avatar{
width: 64px;
height: 64px;
}
}
}
\ No newline at end of file
.history/src/components/my/index_20190419115032.scss 0 → 100644
.my-tab{
width: 100%;
height: 44px;
font-size: $font_16;
background: #f7f9fc;
}
.my-list{
.avatar-wrap{
padding: 15px 20px;
.am-list-item .am-list-line-multiple{
padding: 0 !important;
}
.avatar{
width: 64px;
height: 64px;
}
}
}
\ No newline at end of file
.history/src/components/my/index_20190419115112.scss 0 → 100644
.my-tab{
width: 100%;
height: 44px;
font-size: $font_16;
background: #f7f9fc;
}
.my-list{
.avatar-wrap{
padding: 15px 20px;
.avatar{
width: 64px;
height: 64px;
}
}
}
.am-list-item .am-list-line-multiple{
padding: 0 !important;
}
\ No newline at end of file
.history/src/components/my/index_20190419115141.scss 0 → 100644
.my-tab{
width: 100%;
height: 44px;
font-size: $font_16;
background: #f7f9fc;
}
.my-list{
.avatar-wrap{
padding: 15px 20px;
.avatar{
width: 64px;
height: 64px;
}
}
}
// 修改List组件默认样式
.am-list-item .am-list-line-multiple{
padding: 0 !important;
}
\ No newline at end of file
.history/src/components/my/index_20190419115215.scss 0 → 100644
.my-tab{
width: 100%;
height: 44px;
font-size: $font_16;
background: #f7f9fc;
}
.my-list{
.avatar-wrap{
padding: 15px 20px;
.avatar{
width: 64px;
height: 64px;
}
}
}
// 修改List组件默认样式
.am-list-item .am-list-line-multiple{
padding: 0 !important;
}
\ No newline at end of file
.history/src/components/my/index_20190419115400.js 0 → 100644
import React, { Component } from 'react';
import { Flex, WhiteSpace, NavBar, List } from 'antd-mobile';
import './index.scss';
import Avatar from './image/avatar.png';
const Item = List.Item;
const Brief = Item.Brief;
class My extends Component {
render() {
return (
<div className="flex-container">
<Flex>
<Flex.Item>
<NavBar
className="my-tab"
mode="light"
>
我的
</NavBar>
<List className="my-list">
<Item
className="avatar-wrap"
arrow="horizontal"
multipleLine
thumb={Avatar}
onClick={() => { }}>
{/* <img className="avatar" src={Avatar} alt=""/> */}
<Brief>subtitle</Brief>
</Item>
</List>
</Flex.Item>
</Flex>
<WhiteSpace size="lg" />
</div>
)
}
}
export default My;
\ No newline at end of file
.history/src/components/my/index_20190419115453.scss 0 → 100644
.my-tab{
width: 100%;
height: 44px;
font-size: $font_16;
background: #f7f9fc;
}
.my-list{
.avatar-wrap{
padding: 15px 20px;
}
}
// 修改List组件默认样式
.am-list-item .am-list-line-multiple{
padding: 0 !important;
}
\ No newline at end of file
.history/src/components/my/index_20190419115649.js 0 → 100644
import React, { Component } from 'react';
import { Flex, WhiteSpace, NavBar, List } from 'antd-mobile';
import './index.scss';
import Avatar from './image/avatar.png';
const Item = List.Item;
const Brief = Item.Brief;
class My extends Component {
render() {
return (
<div className="flex-container">
<Flex>
<Flex.Item>
<NavBar
className="my-tab"
mode="light"
>
我的
</NavBar>
<List className="my-list">
<Item
className="avatar-wrap"
arrow="horizontal"
multipleLine
thumb={Avatar}
activeStyle={{width: '100px'}}
onClick={() => { }}>
{/* <img className="avatar" src={Avatar} alt=""/> */}
<Brief>subtitle</Brief>
</Item>
</List>
</Flex.Item>
</Flex>
<WhiteSpace size="lg" />
</div>
)
}
}
export default My;
\ No newline at end of file
.history/src/components/my/index_20190419115728.js 0 → 100644
import React, { Component } from 'react';
import { Flex, WhiteSpace, NavBar, List } from 'antd-mobile';
import './index.scss';
import Avatar from './image/avatar.png';
const Item = List.Item;
const Brief = Item.Brief;
class My extends Component {
render() {
return (
<div className="flex-container">
<Flex>
<Flex.Item>
<NavBar
className="my-tab"
mode="light"
>
我的
</NavBar>
<List className="my-list">
<Item
className="avatar-wrap"
arrow="horizontal"
multipleLine
thumb={Avatar}
activeStyle={{width: '100111px'}}
onClick={() => { }}>
{/* <img className="avatar" src={Avatar} alt=""/> */}
<Brief>subtitle</Brief>
</Item>
</List>
</Flex.Item>
</Flex>
<WhiteSpace size="lg" />
</div>
)
}
}
export default My;
\ No newline at end of file
.history/src/components/my/index_20190419115736.js 0 → 100644
import React, { Component } from 'react';
import { Flex, WhiteSpace, NavBar, List } from 'antd-mobile';
import './index.scss';
import Avatar from './image/avatar.png';
const Item = List.Item;
const Brief = Item.Brief;
class My extends Component {
render() {
return (
<div className="flex-container">
<Flex>
<Flex.Item>
<NavBar
className="my-tab"
mode="light"
>
我的
</NavBar>
<List className="my-list">
<Item
className="avatar-wrap"
arrow="horizontal"
multipleLine
thumb={Avatar}
onClick={() => { }}>
{/* <img className="avatar" src={Avatar} alt=""/> */}
<Brief>subtitle</Brief>
</Item>
</List>
</Flex.Item>
</Flex>
<WhiteSpace size="lg" />
</div>
)
}
}
export default My;
\ No newline at end of file
.history/src/components/my/index_20190419115740.js 0 → 100644
import React, { Component } from 'react';
import { Flex, WhiteSpace, NavBar, List } from 'antd-mobile';
import './index.scss';
import Avatar from './image/avatar.png';
const Item = List.Item;
const Brief = Item.Brief;
class My extends Component {
render() {
return (
<div className="flex-container">
<Flex>
<Flex.Item>
<NavBar
className="my-tab"
mode="light"
>
我的
</NavBar>
<List className="my-list">
<Item
className="avatar-wrap"
arrow="horizontal"
multipleLine
thumb={Avatar}
onClick={() => { }}>
<Brief>subtitle</Brief>
</Item>
</List>
</Flex.Item>
</Flex>
<WhiteSpace size="lg" />
</div>
)
}
}
export default My;
\ No newline at end of file
.history/src/components/my/index_20190419115821.scss 0 → 100644
.my-tab{
width: 100%;
height: 44px;
font-size: $font_16;
background: #f7f9fc;
}
.my-list{
.avatar-wrap{
padding: 15px 20px;
}
}
// 修改List组件默认样式
.am-list-item .am-list-line-multiple{
padding: 0 !important;
}
.am-list-thumb{
img{
width: 64px;
height: 64px;
}
}
\ No newline at end of file
.history/src/components/my/index_20190419115916.scss 0 → 100644
.my-tab{
width: 100%;
height: 44px;
font-size: $font_16;
background: #f7f9fc;
}
.my-list{
.avatar-wrap{
padding: 15px 20px;
}
}
// 修改List组件默认样式
.am-list-item .am-list-line-multiple{
padding: 0 !important;
}
.am-list-thumb{
img{
width: 64px;
height: 64px;
}
}
\ No newline at end of file
.history/src/components/my/index_20190419115939.js 0 → 100644
import React, { Component } from 'react';
import { Flex, WhiteSpace, NavBar, List } from 'antd-mobile';
import './index.scss';
import Avatar from './image/avatar.png';
const Item = List.Item;
const Brief = Item.Brief;
class My extends Component {
render() {
return (
<div className="flex-container">
<Flex>
<Flex.Item>
<NavBar
className="my-tab"
mode="light"
>
我的
</NavBar>
<List className="my-list">
<Item
className="avatar-wrap"
arrow="horizontal"
multipleLine
thumb={Avatar}
onClick={() => { }}>
<Brief>点击登录</Brief>
</Item>
</List>
</Flex.Item>
</Flex>
<WhiteSpace size="lg" />
</div>
)
}
}
export default My;
\ No newline at end of file
.history/src/components/my/index_20190419120512.js 0 → 100644
import React, { Component } from 'react';
import { Flex, WhiteSpace, NavBar, List } from 'antd-mobile';
import './index.scss';
import Avatar from './image/avatar.png';
const Item = List.Item;
const Brief = Item.Brief;
class My extends Component {
render() {
return (
<div className="flex-container">
<Flex>
<Flex.Item>
<NavBar
className="my-tab"
mode="light"
>
我的
</NavBar>
<List className="my-list">
<Item
className="avatar-wrap"
arrow="horizontal"
multipleLine
thumb={Avatar}
onClick={() => { }}>
<Brief style={{color: '#333'}}>点击登录</Brief>
</Item>
</List>
</Flex.Item>
</Flex>
<WhiteSpace size="lg" />
</div>
)
}
}
export default My;
\ No newline at end of file
.history/src/components/my/index_20190419120600.scss 0 → 100644
.my-tab{
width: 100%;
height: 44px;
font-size: $font_16;
background: #f7f9fc;
}
.my-list{
.avatar-wrap{
padding: 15px 20px;
}
.login{
color: $color_333;
}
}
// 修改List组件默认样式
.am-list-item .am-list-line-multiple{
padding: 0 !important;
}
.am-list-thumb{
img{
width: 64px;
height: 64px;
}
}
\ No newline at end of file
.history/src/components/my/index_20190419120612.js 0 → 100644
import React, { Component } from 'react';
import { Flex, WhiteSpace, NavBar, List } from 'antd-mobile';
import './index.scss';
import Avatar from './image/avatar.png';
const Item = List.Item;
const Brief = Item.Brief;
class My extends Component {
render() {
return (
<div className="flex-container">
<Flex>
<Flex.Item>
<NavBar
className="my-tab"
mode="light"
>
我的
</NavBar>
<List className="my-list">
<Item
className="avatar-wrap"
arrow="horizontal"
multipleLine
thumb={Avatar}
onClick={() => { }}>
<Brief className="login">点击登录</Brief>
</Item>
</List>
</Flex.Item>
</Flex>
<WhiteSpace size="lg" />
</div>
)
}
}
export default My;
\ No newline at end of file
.history/src/components/my/index_20190419120640.scss 0 → 100644
.my-tab{
width: 100%;
height: 44px;
font-size: $font_16;
background: #f7f9fc;
}
.my-list{
.avatar-wrap{
padding: 15px 20px;
}
}
// 修改List组件默认样式
.am-list-item .am-list-line-multiple{
padding: 0 !important;
}
.am-list-thumb{
img{
width: 64px;
height: 64px;
}
}
.am-list-brief{
color: $color_333;
}
\ No newline at end of file
.history/src/components/my/index_20190419120648.js 0 → 100644
import React, { Component } from 'react';
import { Flex, WhiteSpace, NavBar, List } from 'antd-mobile';
import './index.scss';
import Avatar from './image/avatar.png';
const Item = List.Item;
const Brief = Item.Brief;
class My extends Component {
render() {
return (
<div className="flex-container">
<Flex>
<Flex.Item>
<NavBar
className="my-tab"
mode="light"
>
我的
</NavBar>
<List className="my-list">
<Item
className="avatar-wrap"
arrow="horizontal"
multipleLine
thumb={Avatar}
onClick={() => { }}>
<Brief>点击登录</Brief>
</Item>
</List>
</Flex.Item>
</Flex>
<WhiteSpace size="lg" />
</div>
)
}
}
export default My;
\ No newline at end of file
.history/src/components/my/index_20190419120659.scss 0 → 100644
.my-tab{
width: 100%;
height: 44px;
font-size: $font_16;
background: #f7f9fc;
}
.my-list{
.avatar-wrap{
padding: 15px 20px;
}
}
// 修改List组件默认样式
.am-list-item .am-list-line-multiple{
padding: 0 !important;
}
.am-list-thumb{
img{
width: 64px;
height: 64px;
}
}
.am-list-brief{
color: $color_333 !important;
}
\ No newline at end of file
.history/src/components/my/index_20190419121057.scss 0 → 100644
.my-tab{
width: 100%;
height: 44px;
font-size: $font_16;
background: $bg_f7f9fc;
}
.my-list{
.avatar-wrap{
padding: 15px 20px;
}
}
// 修改List组件默认样式
.am-list-item .am-list-line-multiple{
padding: 0 !important;
}
.am-list-thumb{
img{
width: 64px;
height: 64px;
}
}
.am-list-brief{
color: $color_333 !important;
}
\ No newline at end of file
.history/src/components/my/index_20190419121247.js 0 → 100644
import React, { Component } from 'react';
import { Flex, WhiteSpace, NavBar, List } from 'antd-mobile';
import './index.scss';
import Avatar from './image/avatar.png';
const Item = List.Item;
const Brief = Item.Brief;
class My extends Component {
render() {
return (
<div className="flex-container">
<Flex>
<Flex.Item>
<NavBar
className="my-tab"
mode="light"
>
我的
</NavBar>
<List className="my-list">
<Item
className="avatar-wrap"
arrow="horizontal"
multipleLine
thumb={Avatar}
onClick={() => { }}>
<Brief>点击登录</Brief>
</Item>
</List>
<List renderHeader={() => 'Customized Right Side（Empty Content / Text / Image）'} className="my-list">
<Item>Title</Item>
<Item arrow="horizontal" onClick={() => { }}>Title</Item>
<Item extra="extra content" arrow="horizontal" onClick={() => { }}>Title</Item>
<Item extra="10:30" align="top" thumb="https://zos.alipayobjects.com/rmsportal/dNuvNrtqUztHCwM.png" multipleLine>
Title <Brief>subtitle</Brief>
</Item>
</List>
</Flex.Item>
</Flex>
<WhiteSpace size="lg" />
</div>
)
}
}
export default My;
\ No newline at end of file
.history/src/components/my/index_20190419121307.js 0 → 100644
import React, { Component } from 'react';
import { Flex, WhiteSpace, NavBar, List } from 'antd-mobile';
import './index.scss';
import Avatar from './image/avatar.png';
const Item = List.Item;
const Brief = Item.Brief;
class My extends Component {
render() {
return (
<div className="flex-container">
<Flex>
<Flex.Item>
<NavBar
className="my-tab"
mode="light"
>
我的
</NavBar>
<List className="my-list">
<Item
className="avatar-wrap"
arrow="horizontal"
multipleLine
thumb={Avatar}
onClick={() => { }}>
<Brief>点击登录</Brief>
</Item>
</List>
<List renderHeader={() => 'Customized Right Side（Empty Content / Text / Image）'} className="my-list">
<Item>Title</Item>
<Item arrow="horizontal" onClick={() => { }}>Title</Item>
<Item extra="extra content" arrow="horizontal" onClick={() => { }}>Title</Item>
</List>
</Flex.Item>
</Flex>
<WhiteSpace size="lg" />
</div>
)
}
}
export default My;
\ No newline at end of file
.history/src/components/my/index_20190419121425.js 0 → 100644
import React, { Component } from 'react';
import { Flex, WhiteSpace, NavBar, List } from 'antd-mobile';
import './index.scss';
import Avatar from './image/avatar.png';
const Item = List.Item;
const Brief = Item.Brief;
class My extends Component {
render() {
return (
<div className="flex-container">
<Flex>
<Flex.Item>
<NavBar
className="my-tab"
mode="light"
>
我的
</NavBar>
<List className="my-list">
<Item
className="avatar-wrap"
arrow="horizontal"
multipleLine
thumb={Avatar}
onClick={() => { }}>
<Brief>点击登录</Brief>
</Item>
</List>
<List renderHeader={() => ''} className="my-list">
<Item>Title</Item>
<Item arrow="horizontal" onClick={() => { }}>Title</Item>
<Item extra="extra content" arrow="horizontal" onClick={() => { }}>Title</Item>
</List>
</Flex.Item>
</Flex>
<WhiteSpace size="lg" />
</div>
)
}
}
export default My;
\ No newline at end of file
.history/src/components/my/index_20190419121537.scss 0 → 100644
.my-tab{
width: 100%;
height: 44px;
font-size: $font_16;
background: $bg_f7f9fc;
}
.my-list{
.avatar-wrap{
padding: 15px 20px;
}
}
// 修改List组件默认样式
.am-list-item .am-list-line-multiple{
padding: 0 !important;
}
.am-list-thumb{
img{
width: 64px;
height: 64px;
}
}
.am-list-brief{
color: $color_333 !important;
}
.am-list-header{
padding: 2.5px 0;
}
\ No newline at end of file
.history/src/components/my/index_20190419121616.js 0 → 100644
import React, { Component } from 'react';
import { Flex, WhiteSpace, NavBar, List } from 'antd-mobile';
import './index.scss';
import Avatar from './image/avatar.png';
const Item = List.Item;
const Brief = Item.Brief;
class My extends Component {
render() {
return (
<div className="flex-container">
<Flex>
<Flex.Item>
<NavBar
className="my-tab"
mode="light"
>
我的
</NavBar>
<List className="my-list">
<Item
className="avatar-wrap"
arrow="horizontal"
multipleLine
thumb={Avatar}
onClick={() => { }}>
<Brief>点击登录</Brief>
</Item>
</List>
<List renderHeader={() => ''} className="my-list">
<Item arrow="horizontal" onClick={() => { }}>Title</Item>
<Item arrow="horizontal" onClick={() => { }}>Title</Item>
<Item arrow="horizontal" onClick={() => { }}>Title</Item>
<Item arrow="horizontal" onClick={() => { }}>Title</Item>
<Item arrow="horizontal" onClick={() => { }}>Title</Item>
{/* <Item extra="extra content" arrow="horizontal" onClick={() => { }}>Title</Item> */}
</List>
</Flex.Item>
</Flex>
<WhiteSpace size="lg" />
</div>
)
}
}
export default My;
\ No newline at end of file
.history/src/components/my/index_20190419121804.js 0 → 100644
import React, { Component } from 'react';
import { Flex, WhiteSpace, NavBar, List } from 'antd-mobile';
import './index.scss';
import Avatar from './image/avatar.png';
const Item = List.Item;
const Brief = Item.Brief;
class My extends Component {
render() {
return (
<div className="flex-container">
<Flex>
<Flex.Item>
<NavBar
className="my-tab"
mode="light"
>
我的
</NavBar>
<List className="my-list">
<Item
className="avatar-wrap"
arrow="horizontal"
multipleLine
thumb={Avatar}
onClick={() => { }}>
<Brief>点击登录</Brief>
</Item>
</List>
<List renderHeader={() => ''} className="my-list">
<Item arrow="horizontal" onClick={() => { }}>已购课程</Item>
<Item arrow="horizontal" onClick={() => { }}>购物车</Item>
<Item arrow="horizontal" onClick={() => { }}>课程订单</Item>
<Item arrow="horizontal" onClick={() => { }}>优惠券</Item>
<Item arrow="horizontal" onClick={() => { }}>赚奖学金</Item>
{/* <Item extra="extra content" arrow="horizontal" onClick={() => { }}>Title</Item> */}
</List>
</Flex.Item>
</Flex>
<WhiteSpace size="lg" />
</div>
)
}
}
export default My;
\ No newline at end of file
.history/src/components/my/index_20190419121932.js 0 → 100644
import React, { Component } from 'react';
import { Flex, WhiteSpace, NavBar, List } from 'antd-mobile';
import './index.scss';
import Avatar from './image/avatar.png';
const Item = List.Item;
const Brief = Item.Brief;
class My extends Component {
render() {
return (
<div className="flex-container">
<Flex>
<Flex.Item>
<NavBar
className="my-tab"
mode="light"
>
我的
</NavBar>
<List className="my-list">
<Item
className="avatar-wrap"
arrow="horizontal"
multipleLine
thumb={Avatar}
onClick={() => { }}>
<Brief>点击登录</Brief>
</Item>
</List>
<List renderHeader={() => ''} className="my-list">
<Item
arrow="horizontal"
onClick={() => { }}
>
已购课程
</Item>
<Item
arrow="horizontal"
onClick={() => { }}
>购物车
</Item>
<Item arrow="horizontal" onClick={() => { }}>课程订单</Item>
<Item arrow="horizontal" onClick={() => { }}>优惠券</Item>
<Item arrow="horizontal" onClick={() => { }}>赚奖学金</Item>
{/* <Item extra="extra content" arrow="horizontal" onClick={() => { }}>Title</Item> */}
</List>
</Flex.Item>
</Flex>
<WhiteSpace size="lg" />
</div>
)
}
}
export default My;
\ No newline at end of file
.history/src/components/my/index_20190419122008.js 0 → 100644
import React, { Component } from 'react';
import { Flex, WhiteSpace, NavBar, List } from 'antd-mobile';
import './index.scss';
import Avatar from './image/avatar.png';
const Item = List.Item;
const Brief = Item.Brief;
class My extends Component {
render() {
return (
<div className="flex-container">
<Flex>
<Flex.Item>
<NavBar
className="my-tab"
mode="light"
>
我的
</NavBar>
<List className="my-list">
<Item
className="avatar-wrap"
arrow="horizontal"
multipleLine
thumb={Avatar}
onClick={() => { }}>
<Brief>点击登录</Brief>
</Item>
</List>
<List renderHeader={() => ''} className="my-list">
<Item
arrow="horizontal"
onClick={() => { }}
>
已购课程
</Item>
<Item
arrow="horizontal"
onClick={() => { }}
>
购物车
</Item>
<Item
arrow="horizontal"
onClick={() => { }}
>
课程订单
</Item>
<Item
arrow="horizontal"
onClick={() => { }}
>
优惠券
</Item>
<Item arrow="horizontal" onClick={() => { }}>赚奖学金</Item>
{/* <Item extra="extra content" arrow="horizontal" onClick={() => { }}>Title</Item> */}
</List>
</Flex.Item>
</Flex>
<WhiteSpace size="lg" />
</div>
)
}
}
export default My;
\ No newline at end of file
.history/src/components/my/index_20190419122028.js 0 → 100644
import React, { Component } from 'react';
import { Flex, WhiteSpace, NavBar, List } from 'antd-mobile';
import './index.scss';
import Avatar from './image/avatar.png';
const Item = List.Item;
const Brief = Item.Brief;
class My extends Component {
render() {
return (
<div className="flex-container">
<Flex>
<Flex.Item>
<NavBar
className="my-tab"
mode="light"
>
我的
</NavBar>
<List className="my-list">
<Item
className="avatar-wrap"
arrow="horizontal"
multipleLine
thumb={Avatar}
onClick={() => { }}>
<Brief>点击登录</Brief>
</Item>
</List>
<List renderHeader={() => ''} className="my-list">
<Item
arrow="horizontal"
onClick={() => { }}
>
已购课程
</Item>
<Item
arrow="horizontal"
onClick={() => { }}
>
购物车
</Item>
<Item
arrow="horizontal"
onClick={() => { }}
>
课程订单
</Item>
<Item
arrow="horizontal"
onClick={() => { }}
>
优惠券
</Item>
<Item
arrow="horizontal"
onClick={() => { }}
>
赚奖学金
</Item>
{/* <Item extra="extra content" arrow="horizontal" onClick={() => { }}>Title</Item> */}
</List>
</Flex.Item>
</Flex>
<WhiteSpace size="lg" />
</div>
)
}
}
export default My;
\ No newline at end of file
.history/src/components/my/index_20190419122032.js 0 → 100644
import React, { Component } from 'react';
import { Flex, WhiteSpace, NavBar, List } from 'antd-mobile';
import './index.scss';
import Avatar from './image/avatar.png';
const Item = List.Item;
const Brief = Item.Brief;
class My extends Component {
render() {
return (
<div className="flex-container">
<Flex>
<Flex.Item>
<NavBar
className="my-tab"
mode="light"
>
我的
</NavBar>
<List className="my-list">
<Item
className="avatar-wrap"
arrow="horizontal"
multipleLine
thumb={Avatar}
onClick={() => { }}>
<Brief>点击登录</Brief>
</Item>
</List>
<List renderHeader={() => ''} className="my-list">
<Item
arrow="horizontal"
onClick={() => { }}
>
已购课程
</Item>
<Item
arrow="horizontal"
onClick={() => { }}
>
购物车
</Item>
<Item
arrow="horizontal"
onClick={() => { }}
>
课程订单
</Item>
<Item
arrow="horizontal"
onClick={() => { }}
>
优惠券
</Item>
<Item
arrow="horizontal"
onClick={() => { }}
>
赚奖学金
</Item>
</List>
</Flex.Item>
</Flex>
<WhiteSpace size="lg" />
</div>
)
}
}
export default My;
\ No newline at end of file
.history/src/components/my/index_20190419122235.js 0 → 100644
import React, { Component } from 'react';
import { Flex, WhiteSpace, NavBar, List } from 'antd-mobile';
import './index.scss';
import Avatar from './image/avatar.png';
const Item = List.Item;
const Brief = Item.Brief;
class My extends Component {
render() {
return (
<div className="flex-container">
<Flex>
<Flex.Item>
<NavBar
className="my-tab"
mode="light"
>
我的
</NavBar>
<List className="my-list">
<Item
className="avatar-wrap"
arrow="horizontal"
multipleLine
thumb={Avatar}
onClick={() => { }}>
<Brief>点击登录</Brief>
</Item>
</List>
<List renderHeader={() => ''} className="my-list">
<Item
thumb="iconfont iconiconfront-27"
arrow="horizontal"
onClick={() => { }}
>
已购课程
</Item>
<Item
arrow="horizontal"
onClick={() => { }}
>
购物车
</Item>
<Item
arrow="horizontal"
onClick={() => { }}
>
课程订单
</Item>
<Item
arrow="horizontal"
onClick={() => { }}
>
优惠券
</Item>
<Item
arrow="horizontal"
onClick={() => { }}
>
赚奖学金
</Item>
</List>
</Flex.Item>
</Flex>
<WhiteSpace size="lg" />
</div>
)
}
}
export default My;
\ No newline at end of file
.history/src/components/my/index_20190419122336.js 0 → 100644
import React, { Component } from 'react';
import { Flex, WhiteSpace, NavBar, List } from 'antd-mobile';
import './index.scss';
import Avatar from './image/avatar.png';
const Item = List.Item;
const Brief = Item.Brief;
class My extends Component {
render() {
return (
<div className="flex-container">
<Flex>
<Flex.Item>
<NavBar
className="my-tab"
mode="light"
>
我的
</NavBar>
<List className="my-list">
<Item
className="avatar-wrap"
arrow="horizontal"
multipleLine
thumb={Avatar}
onClick={() => { }}>
<Brief>点击登录</Brief>
</Item>
</List>
<List renderHeader={() => ''} className="my-list">
<Item
arrow="horizontal"
onClick={() => { }}
>
<i className="iconfont iconiconfront-27"></i>
已购课程
</Item>
<Item
arrow="horizontal"
onClick={() => { }}
>
购物车
</Item>
<Item
arrow="horizontal"
onClick={() => { }}
>
课程订单
</Item>
<Item
arrow="horizontal"
onClick={() => { }}
>
优惠券
</Item>
<Item
arrow="horizontal"
onClick={() => { }}
>
赚奖学金
</Item>
</List>
</Flex.Item>
</Flex>
<WhiteSpace size="lg" />
</div>
)
}
}
export default My;
\ No newline at end of file
.history/src/components/my/index_20190419122543.js 0 → 100644
import React, { Component } from 'react';
import { Flex, WhiteSpace, NavBar, List } from 'antd-mobile';
import './index.scss';
import Avatar from './image/avatar.png';
const Item = List.Item;
const Brief = Item.Brief;
class My extends Component {
render() {
return (
<div className="flex-container">
<Flex>
<Flex.Item>
<NavBar
className="my-tab"
mode="light"
>
我的
</NavBar>
<List className="my-list">
<Item
className="avatar-wrap"
arrow="horizontal"
multipleLine
thumb={Avatar}
onClick={() => { }}>
<Brief>点击登录</Brief>
</Item>
</List>
<List renderHeader={() => ''} className="my-list">
<Item
arrow="horizontal"
onClick={() => { }}
>
<i className="iconfont iconiconfront-27"></i>
已购课程
</Item>
<Item
arrow="horizontal"
onClick={() => { }}
>
<i className="iconfont icongouwuche"></i>
购物车
</Item>
<Item
arrow="horizontal"
onClick={() => { }}
>
<i className="iconfont iconiconfront-24"></i>
课程订单
</Item>
<Item
arrow="horizontal"
onClick={() => { }}
>
<i className="iconfont iconiconfront-52"></i>
优惠券
</Item>
<Item
arrow="horizontal"
onClick={() => { }}
>
<i className="iconfont iconiconfront-51"></i>
赚奖学金
</Item>
</List>
</Flex.Item>
</Flex>
<WhiteSpace size="lg" />
</div>
)
}
}
export default My;
\ No newline at end of file
.history/src/components/my/index_20190419122811.scss 0 → 100644
.my-tab{
width: 100%;
height: 44px;
font-size: $font_16;
background: $bg_f7f9fc;
}
.my-list{
.avatar-wrap{
padding: 15px 20px;
}
}
// 修改List组件默认样式
.am-list-item .am-list-line-multiple{
padding: 0 !important;
}
.am-list-thumb{
img{
width: 64px;
height: 64px;
}
}
.am-list-brief{
color: $color_333 !important;
}
.am-list-header{
padding: 2.5px 0;
}
.am-list-content{
i{
vertical-align: middle;
margin-top: -1px;
display: inline-block;
}
}
\ No newline at end of file
.history/src/components/my/index_20190419140601.js 0 → 100644
import React, { Component } from 'react';
import { Flex, WhiteSpace, NavBar, List } from 'antd-mobile';
import './index.scss';
import Avatar from './image/avatar.png';
const Item = List.Item;
const Brief = Item.Brief;
class My extends Component {
render() {
return (
<div className="flex-container">
<Flex>
<Flex.Item>
<NavBar
className="my-tab"
mode="light"
>
我的
</NavBar>
<List className="my-list">
<Item
className="avatar-wrap"
arrow="horizontal"
multipleLine
thumb={Avatar}
onClick={() => { }}>
<Brief>点击登录</Brief>
</Item>
</List>
<List renderHeader={() => ''} className="my-list">
<Item
arrow="horizontal"
onClick={() => { }}
>
<i className="iconfont iconiconfront-27"></i>
已购课程
</Item>
<Item
arrow="horizontal"
onClick={() => { }}
>
<i className="iconfont icongouwuche"></i>
购物车
</Item>
<Item
arrow="horizontal"
onClick={() => { }}
>
<i className="iconfont iconiconfront-24"></i>
课程订单
</Item>
<Item
arrow="horizontal"
onClick={() => { }}
>
<i className="iconfont iconiconfront-52"></i>
优惠券
</Item>
</List>
<List>
<Item
arrow="horizontal"
onClick={() => { }}
>
<i className="iconfont iconiconfront-51"></i>
赚奖学金
</Item>
</List>
</Flex.Item>
</Flex>
<WhiteSpace size="lg" />
</div>
)
}
}
export default My;
\ No newline at end of file
.history/src/components/my/index_20190419140620.js 0 → 100644
import React, { Component } from 'react';
import { Flex, WhiteSpace, NavBar, List } from 'antd-mobile';
import './index.scss';
import Avatar from './image/avatar.png';
const Item = List.Item;
const Brief = Item.Brief;
class My extends Component {
render() {
return (
<div className="flex-container">
<Flex>
<Flex.Item>
<NavBar
className="my-tab"
mode="light"
>
我的
</NavBar>
<List className="my-list">
<Item
className="avatar-wrap"
arrow="horizontal"
multipleLine
thumb={Avatar}
onClick={() => { }}>
<Brief>点击登录</Brief>
</Item>
</List>
<List renderHeader={() => ''} className="my-list">
<Item
arrow="horizontal"
onClick={() => { }}
>
<i className="iconfont iconiconfront-27"></i>
已购课程
</Item>
<Item
arrow="horizontal"
onClick={() => { }}
>
<i className="iconfont icongouwuche"></i>
购物车
</Item>
<Item
arrow="horizontal"
onClick={() => { }}
>
<i className="iconfont iconiconfront-24"></i>
课程订单
</Item>
<Item
arrow="horizontal"
onClick={() => { }}
>
<i className="iconfont iconiconfront-52"></i>
优惠券
</Item>
</List>
<List renderHeader={() => ''} >
<Item
arrow="horizontal"
onClick={() => { }}
>
<i className="iconfont iconiconfront-51"></i>
赚奖学金
</Item>
</List>
</Flex.Item>
</Flex>
<WhiteSpace size="lg" />
</div>
)
}
}
export default My;
\ No newline at end of file
.history/src/components/my/index_20190419140659.scss 0 → 100644
.my-tab{
width: 100%;
height: 44px;
font-size: $font_16;
background: $bg_f7f9fc;
}
.my-list{
.avatar-wrap{
padding: 15px 20px;
}
}
// 修改List组件默认样式
.am-list-item .am-list-line-multiple{
padding: 0 !important;
}
.am-list-thumb{
img{
width: 64px;
height: 64px;
}
}
.am-list-brief{
color: $color_333 !important;
}
.am-list-header{
padding: 2.5px 0;
}
.am-list-content{
i{
vertical-align: middle;
margin-top: -1px;
display: inline-block;
margin-right: 12px;
}
}
\ No newline at end of file
.history/src/components/my/index_20190419140741.scss 0 → 100644
.my-tab{
width: 100%;
height: 44px;
font-size: $font_16;
background: $bg_f7f9fc;
}
.my-list{
.avatar-wrap{
padding: 15px 20px;
}
}
// 修改List组件默认样式
.am-list-item .am-list-line-multiple{
padding: 0 !important;
}
.am-list-thumb{
img{
width: 64px;
height: 64px;
}
}
.am-list-brief{
color: $color_333 !important;
}
.am-list-header{
padding: 2.5px 0;
}
.am-list-content{
i{
vertical-align: middle;
margin-top: -1px;
display: inline-block;
margin-right: 12px;
margin: 16px 12px 16 0;
}
}
\ No newline at end of file
.history/src/components/my/index_20190419140754.scss 0 → 100644
.my-tab{
width: 100%;
height: 44px;
font-size: $font_16;
background: $bg_f7f9fc;
}
.my-list{
.avatar-wrap{
padding: 15px 20px;
}
}
// 修改List组件默认样式
.am-list-item .am-list-line-multiple{
padding: 0 !important;
}
.am-list-thumb{
img{
width: 64px;
height: 64px;
}
}
.am-list-brief{
color: $color_333 !important;
}
.am-list-header{
padding: 2.5px 0;
}
.am-list-content{
i{
vertical-align: middle;
margin-top: -1px;
display: inline-block;
margin-right: 12px;
margin: 16px 12px 16px 0;
}
}
\ No newline at end of file
.history/src/components/my/index_20190419140839.scss 0 → 100644
.my-tab{
width: 100%;
height: 44px;
font-size: $font_16;
background: $bg_f7f9fc;
}
.my-list{
.avatar-wrap{
padding: 15px 20px;
}
}
// 修改List组件默认样式
.am-list-item .am-list-line-multiple{
padding: 0 !important;
}
.am-list-thumb{
img{
width: 64px;
height: 64px;
}
}
.am-list-brief{
color: $color_333 !important;
}
.am-list-header{
padding: 2.5px 0;
}
.am-list-content{
i{
vertical-align: middle;
margin-top: -1px;
display: inline-block;
margin-right: 12px;
margin: 16px 12px 16px 0;
font-size: 18px !important;
}
}
\ No newline at end of file
.history/src/components/my/index_20190419141110.scss 0 → 100644
.my-tab{
width: 100%;
height: 44px;
font-size: $font_16;
background: $bg_f7f9fc;
}
.my-list{
.avatar-wrap{
padding: 15px 20px;
}
}
// 修改List组件默认样式
.am-list-item .am-list-line-multiple{
padding: 0 !important;
}
.am-list-thumb{
img{
width: 64px;
height: 64px;
}
}
.am-list-brief{
color: $color_333 !important;
}
.am-list-header{
padding: 2.5px 0;
}
.am-list-content{
i{
vertical-align: middle;
margin-top: -1px;
display: inline-block;
margin-right: 12px;
margin: 10px 12px 10px 0;
font-size: 30px !important;
}
}
\ No newline at end of file
.history/src/components/my/index_20190419141251.scss 0 → 100644
.my-tab{
width: 100%;
height: 44px;
font-size: $font_16;
background: $bg_f7f9fc;
}
.my-list{
.avatar-wrap{
padding: 15px 20px;
}
}
// 修改List组件默认样式
.am-list-item{
padding-left: 15px;
padding-right: 15px;
}
.am-list-item .am-list-line-multiple{
padding: 0 !important;
}
.am-list-thumb{
img{
width: 64px;
height: 64px;
}
}
.am-list-brief{
color: $color_333 !important;
}
.am-list-header{
padding: 2.5px 0;
}
.am-list-content{
i{
vertical-align: middle;
margin-top: -1px;
display: inline-block;
margin-right: 12px;
margin: 10px 12px 10px 0;
font-size: 30px !important;
}
}
\ No newline at end of file
.history/src/components/my/index_20190419141508.scss 0 → 100644
.my-tab{
width: 100%;
height: 44px;
font-size: $font_16;
background: $bg_f7f9fc;
}
.my-list{
.avatar-wrap{
padding: 15px 20px;
}
}
// 修改List组件默认样式
.am-list-item{
padding-left: 15px;
padding-right: 15px;
}
.am-list-item .am-list-line-multiple{
padding-right: 8px !important;
}
.am-list-thumb{
img{
width: 64px;
height: 64px;
}
}
.am-list-brief{
color: $color_333 !important;
}
.am-list-header{
padding: 2.5px 0;
}
.am-list-content{
i{
vertical-align: middle;
margin-top: -1px;
display: inline-block;
margin-right: 12px;
margin: 10px 12px 10px 0;
font-size: 30px !important;
}
}
\ No newline at end of file
.history/src/components/my/index_20190419141757.js 0 → 100644
import React, { Component } from 'react';
import { Flex, WhiteSpace, NavBar, List } from 'antd-mobile';
import './index.scss';
import Avatar from './image/avatar.png';
const Item = List.Item;
const Brief = Item.Brief;
class My extends Component {
render() {
return (
<div className="flex-container">
<Flex>
<Flex.Item>
<NavBar
className="my-tab"
mode="light"
>
我的
</NavBar>
{/* <List className="my-list">
<Item
className="avatar-wrap"
arrow="horizontal"
multipleLine
thumb={Avatar}
onClick={() => { }}>
<Brief>点击登录</Brief>
</Item>
</List> */}
<List className="my-list">
<Item
className="avatar-wrap"
arrow="horizontal"
multipleLine
thumb={Avatar}
onClick={() => { }}>
<Brief>点击登录</Brief>
</Item>
</List>
<List renderHeader={() => ''} className="my-list">
<Item
arrow="horizontal"
onClick={() => { }}
>
<i className="iconfont iconiconfront-27"></i>
已购课程
</Item>
<Item
arrow="horizontal"
onClick={() => { }}
>
<i className="iconfont icongouwuche"></i>
购物车
</Item>
<Item
arrow="horizontal"
onClick={() => { }}
>
<i className="iconfont iconiconfront-24"></i>
课程订单
</Item>
<Item
arrow="horizontal"
onClick={() => { }}
>
<i className="iconfont iconiconfront-52"></i>
优惠券
</Item>
</List>
<List renderHeader={() => ''} >
<Item
arrow="horizontal"
onClick={() => { }}
>
<i className="iconfont iconiconfront-51"></i>
赚奖学金
</Item>
</List>
</Flex.Item>
</Flex>
<WhiteSpace size="lg" />
</div>
)
}
}
export default My;
\ No newline at end of file
.history/src/components/my/index_20190419141833.js 0 → 100644
import React, { Component } from 'react';
import { Flex, WhiteSpace, NavBar, List } from 'antd-mobile';
import './index.scss';
import Avatar from './image/avatar.png';
const Item = List.Item;
const Brief = Item.Brief;
class My extends Component {
render() {
return (
<div className="flex-container">
<Flex>
<Flex.Item>
<NavBar
className="my-tab"
mode="light"
>
我的
</NavBar>
{/* <List className="my-list">
<Item
className="avatar-wrap"
arrow="horizontal"
multipleLine
thumb={Avatar}
onClick={() => { }}>
<Brief>点击登录</Brief>
</Item>
</List> */}
<List className="my-list">
<Item
className="avatar-wrap"
arrow="horizontal"
multipleLine
thumb={Avatar}
onClick={() => { }}>
<Brief>xuan先生</Brief>
<Brief>学号: 410026</Brief>
</Item>
</List>
<List renderHeader={() => ''} className="my-list">
<Item
arrow="horizontal"
onClick={() => { }}
>
<i className="iconfont iconiconfront-27"></i>
已购课程
</Item>
<Item
arrow="horizontal"
onClick={() => { }}
>
<i className="iconfont icongouwuche"></i>
购物车
</Item>
<Item
arrow="horizontal"
onClick={() => { }}
>
<i className="iconfont iconiconfront-24"></i>
课程订单
</Item>
<Item
arrow="horizontal"
onClick={() => { }}
>
<i className="iconfont iconiconfront-52"></i>
优惠券
</Item>
</List>
<List renderHeader={() => ''} >
<Item
arrow="horizontal"
onClick={() => { }}
>
<i className="iconfont iconiconfront-51"></i>
赚奖学金
</Item>
</List>
</Flex.Item>
</Flex>
<WhiteSpace size="lg" />
</div>
)
}
}
export default My;
\ No newline at end of file
.history/src/components/my/index_20190419141947.js 0 → 100644
import React, { Component } from 'react';
import { Flex, WhiteSpace, NavBar, List } from 'antd-mobile';
import './index.scss';
import Avatar from './image/avatar.png';
const Item = List.Item;
const Brief = Item.Brief;
class My extends Component {
render() {
return (
<div className="flex-container">
<Flex>
<Flex.Item>
<NavBar
className="my-tab"
mode="light"
>
我的
</NavBar>
{/* <List className="my-list">
<Item
className="avatar-wrap"
arrow="horizontal"
multipleLine
thumb={Avatar}
onClick={() => { }}>
<Brief>点击登录</Brief>
</Item>
</List> */}
<List className="my-list">
<Item
className="avatar-wrap"
arrow="horizontal"
multipleLine
thumb={Avatar}
onClick={() => { }}>
<Brief>xuan先生</Brief>
<Brief>学号: 410026</Brief>
</Item>
<div></div>
</List>
<List renderHeader={() => ''} className="my-list">
<Item
arrow="horizontal"
onClick={() => { }}
>
<i className="iconfont iconiconfront-27"></i>
已购课程
</Item>
<Item
arrow="horizontal"
onClick={() => { }}
>
<i className="iconfont icongouwuche"></i>
购物车
</Item>
<Item
arrow="horizontal"
onClick={() => { }}
>
<i className="iconfont iconiconfront-24"></i>
课程订单
</Item>
<Item
arrow="horizontal"
onClick={() => { }}
>
<i className="iconfont iconiconfront-52"></i>
优惠券
</Item>
</List>
<List renderHeader={() => ''} >
<Item
arrow="horizontal"
onClick={() => { }}
>
<i className="iconfont iconiconfront-51"></i>
赚奖学金
</Item>
</List>
</Flex.Item>
</Flex>
<WhiteSpace size="lg" />
</div>
)
}
}
export default My;
\ No newline at end of file
.history/src/components/my/index_20190419142230.js 0 → 100644
import React, { Component } from 'react';
import { Flex, WhiteSpace, NavBar, List } from 'antd-mobile';
import './index.scss';
import Avatar from './image/avatar.png';
const Item = List.Item;
const Brief = Item.Brief;
class My extends Component {
render() {
return (
<div className="flex-container">
<Flex>
<Flex.Item>
<NavBar
className="my-tab"
mode="light"
>
我的
</NavBar>
{/* <List className="my-list">
<Item
className="avatar-wrap"
arrow="horizontal"
multipleLine
thumb={Avatar}
onClick={() => { }}>
<Brief>点击登录</Brief>
</Item>
</List> */}
<List className="my-list">
<Item
className="avatar-wrap"
multipleLine
thumb={Avatar}
onClick={() => { }}>
<Brief>xuan先生</Brief>
<Brief>学号: 410026</Brief>
</Item>
<div></div>
</List>
<List renderHeader={() => ''} className="my-list">
<Item
arrow="horizontal"
onClick={() => { }}
>
<i className="iconfont iconiconfront-27"></i>
已购课程
</Item>
<Item
arrow="horizontal"
onClick={() => { }}
>
<i className="iconfont icongouwuche"></i>
购物车
</Item>
<Item
arrow="horizontal"
onClick={() => { }}
>
<i className="iconfont iconiconfront-24"></i>
课程订单
</Item>
<Item
arrow="horizontal"
onClick={() => { }}
>
<i className="iconfont iconiconfront-52"></i>
优惠券
</Item>
</List>
<List renderHeader={() => ''} >
<Item
arrow="horizontal"
onClick={() => { }}
>
<i className="iconfont iconiconfront-51"></i>
赚奖学金
</Item>
</List>
</Flex.Item>
</Flex>
<WhiteSpace size="lg" />
</div>
)
}
}
export default My;
\ No newline at end of file
.history/src/components/my/index_20190419142234.js 0 → 100644
import React, { Component } from 'react';
import { Flex, WhiteSpace, NavBar, List } from 'antd-mobile';
import './index.scss';
import Avatar from './image/avatar.png';
const Item = List.Item;
const Brief = Item.Brief;
class My extends Component {
render() {
return (
<div className="flex-container">
<Flex>
<Flex.Item>
<NavBar
className="my-tab"
mode="light"
>
我的
</NavBar>
{/* <List className="my-list">
<Item
className="avatar-wrap"
arrow="horizontal"
multipleLine
thumb={Avatar}
onClick={() => { }}>
<Brief>点击登录</Brief>
</Item>
</List> */}
<List className="my-list">
<Item
className="avatar-wrap"
arrow="horizontal"
multipleLine
thumb={Avatar}
onClick={() => { }}>
<Brief>xuan先生</Brief>
<Brief>学号: 410026</Brief>
</Item>
<div></div>
</List>
<List renderHeader={() => ''} className="my-list">
<Item
arrow="horizontal"
onClick={() => { }}
>
<i className="iconfont iconiconfront-27"></i>
已购课程
</Item>
<Item
arrow="horizontal"
onClick={() => { }}
>
<i className="iconfont icongouwuche"></i>
购物车
</Item>
<Item
arrow="horizontal"
onClick={() => { }}
>
<i className="iconfont iconiconfront-24"></i>
课程订单
</Item>
<Item
arrow="horizontal"
onClick={() => { }}
>
<i className="iconfont iconiconfront-52"></i>
优惠券
</Item>
</List>
<List renderHeader={() => ''} >
<Item
arrow="horizontal"
onClick={() => { }}
>
<i className="iconfont iconiconfront-51"></i>
赚奖学金
</Item>
</List>
</Flex.Item>
</Flex>
<WhiteSpace size="lg" />
</div>
)
}
}
export default My;
\ No newline at end of file
.history/src/components/my/index_20190419142236.js 0 → 100644
import React, { Component } from 'react';
import { Flex, WhiteSpace, NavBar, List } from 'antd-mobile';
import './index.scss';
import Avatar from './image/avatar.png';
const Item = List.Item;
const Brief = Item.Brief;
class My extends Component {
render() {
return (
<div className="flex-container">
<Flex>
<Flex.Item>
<NavBar
className="my-tab"
mode="light"
>
我的
</NavBar>
{/* <List className="my-list">
<Item
className="avatar-wrap"
arrow="horizontal"
multipleLine
thumb={Avatar}
onClick={() => { }}>
<Brief>点击登录</Brief>
</Item>
</List> */}
<List className="my-list">
<Item
className="avatar-wrap"
arrow="horizontal"
thumb={Avatar}
onClick={() => { }}>
<Brief>xuan先生</Brief>
<Brief>学号: 410026</Brief>
</Item>
<div></div>
</List>
<List renderHeader={() => ''} className="my-list">
<Item
arrow="horizontal"
onClick={() => { }}
>
<i className="iconfont iconiconfront-27"></i>
已购课程
</Item>
<Item
arrow="horizontal"
onClick={() => { }}
>
<i className="iconfont icongouwuche"></i>
购物车
</Item>
<Item
arrow="horizontal"
onClick={() => { }}
>
<i className="iconfont iconiconfront-24"></i>
课程订单
</Item>
<Item
arrow="horizontal"
onClick={() => { }}
>
<i className="iconfont iconiconfront-52"></i>
优惠券
</Item>
</List>
<List renderHeader={() => ''} >
<Item
arrow="horizontal"
onClick={() => { }}
>
<i className="iconfont iconiconfront-51"></i>
赚奖学金
</Item>
</List>
</Flex.Item>
</Flex>
<WhiteSpace size="lg" />
</div>
)
}
}
export default My;
\ No newline at end of file
.history/src/components/my/index_20190419142240.js 0 → 100644
import React, { Component } from 'react';
import { Flex, WhiteSpace, NavBar, List } from 'antd-mobile';
import './index.scss';
import Avatar from './image/avatar.png';
const Item = List.Item;
const Brief = Item.Brief;
class My extends Component {
render() {
return (
<div className="flex-container">
<Flex>
<Flex.Item>
<NavBar
className="my-tab"
mode="light"
>
我的
</NavBar>
{/* <List className="my-list">
<Item
className="avatar-wrap"
arrow="horizontal"
multipleLine
thumb={Avatar}
onClick={() => { }}>
<Brief>点击登录</Brief>
</Item>
</List> */}
<List className="my-list">
<Item
className="avatar-wrap"
arrow="horizontal"
multipleLine
thumb={Avatar}
onClick={() => { }}>
<Brief>xuan先生</Brief>
<Brief>学号: 410026</Brief>
</Item>
<div></div>
</List>
<List renderHeader={() => ''} className="my-list">
<Item
arrow="horizontal"
onClick={() => { }}
>
<i className="iconfont iconiconfront-27"></i>
已购课程
</Item>
<Item
arrow="horizontal"
onClick={() => { }}
>
<i className="iconfont icongouwuche"></i>
购物车
</Item>
<Item
arrow="horizontal"
onClick={() => { }}
>
<i className="iconfont iconiconfront-24"></i>
课程订单
</Item>
<Item
arrow="horizontal"
onClick={() => { }}
>
<i className="iconfont iconiconfront-52"></i>
优惠券
</Item>
</List>
<List renderHeader={() => ''} >
<Item
arrow="horizontal"
onClick={() => { }}
>
<i className="iconfont iconiconfront-51"></i>
赚奖学金
</Item>
</List>
</Flex.Item>
</Flex>
<WhiteSpace size="lg" />
</div>
)
}
}
export default My;
\ No newline at end of file
.history/src/components/my/index_20190419142419.scss 0 → 100644
.my-tab{
width: 100%;
height: 44px;
font-size: $font_16;
background: $bg_f7f9fc;
}
.my-list{
.avatar-wrap{
padding: 15px 20px;
}
}
// 修改List组件默认样式
.am-list-item{
padding-left: 15px;
padding-right: 15px;
}
.am-list-item .am-list-line-multiple{
padding-right: 8px !important;
}
.am-list-thumb{
img{
width: 64px;
height: 64px;
}
}
.am-list-brief{
color: $color_333 !important;
}
.am-list-header{
padding: 2.5px 0;
}
.am-list-content{
i{
vertical-align: middle;
margin-top: -1px;
display: inline-block;
margin-right: 12px;
margin: 10px 12px 10px 0;
font-size: 30px !important;
}
}
.am-list-line-multiple{
background: none;
}
\ No newline at end of file
.history/src/components/my/index_20190419142545.scss 0 → 100644
.my-tab{
width: 100%;
height: 44px;
font-size: $font_16;
background: $bg_f7f9fc;
}
.my-list{
.avatar-wrap{
padding: 15px 20px;
}
}
// 修改List组件默认样式
.am-list-item{
padding-left: 15px;
padding-right: 15px;
}
.am-list-item .am-list-line-multiple{
padding-right: 8px !important;
}
.am-list-thumb{
img{
width: 64px;
height: 64px;
}
}
.am-list-brief{
color: $color_333 !important;
}
.am-list-header{
padding: 2.5px 0;
}
.am-list-content{
i{
vertical-align: middle;
margin-top: -1px;
display: inline-block;
margin-right: 12px;
margin: 10px 12px 10px 0;
font-size: 30px !important;
}
}
.am-list-line-multiple::after{
background: none;
}
\ No newline at end of file
.history/src/components/my/index_20190419142624.scss 0 → 100644
.my-tab{
width: 100%;
height: 44px;
font-size: $font_16;
background: $bg_f7f9fc;
}
.my-list{
.avatar-wrap{
padding: 15px 20px;
}
}
// 修改List组件默认样式
.am-list-item{
padding-left: 15px;
padding-right: 15px;
}
.am-list-item .am-list-line-multiple{
padding-right: 8px !important;
}
.am-list-thumb{
img{
width: 64px;
height: 64px;
}
}
.am-list-brief{
color: $color_333 !important;
}
.am-list-header{
padding: 2.5px 0;
}
.am-list-content{
i{
vertical-align: middle;
margin-top: -1px;
display: inline-block;
margin-right: 12px;
margin: 10px 12px 10px 0;
font-size: 30px !important;
}
}
.am-list-line-multiple::after{
background-color: none;
}
\ No newline at end of file
.history/src/components/my/index_20190419142630.scss 0 → 100644
.my-tab{
width: 100%;
height: 44px;
font-size: $font_16;
background: $bg_f7f9fc;
}
.my-list{
.avatar-wrap{
padding: 15px 20px;
}
}
// 修改List组件默认样式
.am-list-item{
padding-left: 15px;
padding-right: 15px;
}
.am-list-item .am-list-line-multiple{
padding-right: 8px !important;
}
.am-list-thumb{
img{
width: 64px;
height: 64px;
}
}
.am-list-brief{
color: $color_333 !important;
}
.am-list-header{
padding: 2.5px 0;
}
.am-list-content{
i{
vertical-align: middle;
margin-top: -1px;
display: inline-block;
margin-right: 12px;
margin: 10px 12px 10px 0;
font-size: 30px !important;
}
}
.am-list-line-multiple::after{
background-color: none !important;
}
\ No newline at end of file
.history/src/components/my/index_20190419142812.scss 0 → 100644
.my-tab{
width: 100%;
height: 44px;
font-size: $font_16;
background: $bg_f7f9fc;
}
.my-list{
.avatar-wrap{
padding: 15px 20px;
}
}
// 修改List组件默认样式
.am-list-item{
padding-left: 15px;
padding-right: 15px;
}
.am-list-item .am-list-line-multiple{
padding-right: 8px !important;
}
.am-list-thumb{
img{
width: 64px;
height: 64px;
}
}
.am-list-brief{
color: $color_333 !important;
}
.am-list-header{
padding: 2.5px 0;
}
.am-list-content{
i{
vertical-align: middle;
margin-top: -1px;
display: inline-block;
margin-right: 12px;
margin: 10px 12px 10px 0;
font-size: 30px !important;
}
}
.am-list-line-multiple::after{
background-color: transparent !important;
}
\ No newline at end of file
.history/src/components/my/index_20190419143717.js 0 → 100644
import React, { Component } from 'react';
import { Flex, WhiteSpace, NavBar, List } from 'antd-mobile';
import './index.scss';
import Avatar from './image/avatar.png';
const Item = List.Item;
const Brief = Item.Brief;
class My extends Component {
render() {
return (
<div className="flex-container">
<Flex>
<Flex.Item>
<NavBar
className="my-tab"
mode="light"
>
我的
</NavBar>
{/* <List className="my-list">
<Item
className="avatar-wrap"
arrow="horizontal"
multipleLine
thumb={Avatar}
onClick={() => { }}>
<Brief>点击登录</Brief>
</Item>
</List> */}
<List className="my-list">
<Item
className="avatar-wrap"
arrow="horizontal"
multipleLine
thumb={Avatar}
onClick={() => { }}>
<Brief>xuan先生</Brief>
<Brief>学号: 410026</Brief>
</Item>
<div className="my-isvip"></div>
</List>
<List renderHeader={() => ''} className="my-list">
<Item
arrow="horizontal"
onClick={() => { }}
>
<i className="iconfont iconiconfront-27"></i>
已购课程
</Item>
<Item
arrow="horizontal"
onClick={() => { }}
>
<i className="iconfont icongouwuche"></i>
购物车
</Item>
<Item
arrow="horizontal"
onClick={() => { }}
>
<i className="iconfont iconiconfront-24"></i>
课程订单
</Item>
<Item
arrow="horizontal"
onClick={() => { }}
>
<i className="iconfont iconiconfront-52"></i>
优惠券
</Item>
</List>
<List renderHeader={() => ''} >
<Item
arrow="horizontal"
onClick={() => { }}
>
<i className="iconfont iconiconfront-51"></i>
赚奖学金
</Item>
</List>
</Flex.Item>
</Flex>
<WhiteSpace size="lg" />
</div>
)
}
}
export default My;
\ No newline at end of file
.history/src/components/my/index_20190419143731.scss 0 → 100644
.my-tab{
width: 100%;
height: 44px;
font-size: $font_16;
background: $bg_f7f9fc;
}
.my-list{
.avatar-wrap{
padding: 15px 20px;
}
}
.my-isvip{
width: 100%;
}
// 修改List组件默认样式
.am-list-item{
padding-left: 15px;
padding-right: 15px;
}
.am-list-item .am-list-line-multiple{
padding-right: 8px !important;
}
.am-list-thumb{
img{
width: 64px;
height: 64px;
}
}
.am-list-brief{
color: $color_333 !important;
}
.am-list-header{
padding: 2.5px 0;
}
.am-list-content{
i{
vertical-align: middle;
margin-top: -1px;
display: inline-block;
margin-right: 12px;
margin: 10px 12px 10px 0;
font-size: 30px !important;
}
}
.am-list-line-multiple::after{
background-color: transparent !important;
}
\ No newline at end of file
.history/src/components/my/index_20190419143855.scss 0 → 100644
.my-tab{
width: 100%;
height: 44px;
font-size: $font_16;
background: $bg_f7f9fc;
}
.my-list{
.avatar-wrap{
padding: 15px 20px;
}
}
.my-isvip{
width: 100%;
height: 44px;
background: url("./image/vip_bg.png") no-repeat;
}
// 修改List组件默认样式
.am-list-item{
padding-left: 15px;
padding-right: 15px;
}
.am-list-item .am-list-line-multiple{
padding-right: 8px !important;
}
.am-list-thumb{
img{
width: 64px;
height: 64px;
}
}
.am-list-brief{
color: $color_333 !important;
}
.am-list-header{
padding: 2.5px 0;
}
.am-list-content{
i{
vertical-align: middle;
margin-top: -1px;
display: inline-block;
margin-right: 12px;
margin: 10px 12px 10px 0;
font-size: 30px !important;
}
}
.am-list-line-multiple::after{
background-color: transparent !important;
}
\ No newline at end of file
.history/src/components/my/index_20190419144010.scss 0 → 100644
.my-tab{
width: 100%;
height: 44px;
font-size: $font_16;
background: $bg_f7f9fc;
}
.my-list{
.avatar-wrap{
padding: 15px 20px;
}
}
.my-isvip{
width: 100%;
padding: 0 20px;
height: 44px;
margin: 0 auto;
height: 44px;
background: url("./image/vip_bg.png") no-repeat;
}
// 修改List组件默认样式
.am-list-item{
padding-left: 15px;
padding-right: 15px;
}
.am-list-item .am-list-line-multiple{
padding-right: 8px !important;
}
.am-list-thumb{
img{
width: 64px;
height: 64px;
}
}
.am-list-brief{
color: $color_333 !important;
}
.am-list-header{
padding: 2.5px 0;
}
.am-list-content{
i{
vertical-align: middle;
margin-top: -1px;
display: inline-block;
margin-right: 12px;
margin: 10px 12px 10px 0;
font-size: 30px !important;
}
}
.am-list-line-multiple::after{
background-color: transparent !important;
}
\ No newline at end of file
.history/src/components/my/index_20190419144016.scss 0 → 100644
.my-tab{
width: 100%;
height: 44px;
font-size: $font_16;
background: $bg_f7f9fc;
}
.my-list{
.avatar-wrap{
padding: 15px 20px;
}
}
.my-isvip{
width: 100%;
padding: 0 20px;
height: 44px;
margin: 0 auto;
height: 44px;
background: url("./image/vip_bg.png") no-repeat 100% 100%;
}
// 修改List组件默认样式
.am-list-item{
padding-left: 15px;
padding-right: 15px;
}
.am-list-item .am-list-line-multiple{
padding-right: 8px !important;
}
.am-list-thumb{
img{
width: 64px;
height: 64px;
}
}
.am-list-brief{
color: $color_333 !important;
}
.am-list-header{
padding: 2.5px 0;
}
.am-list-content{
i{
vertical-align: middle;
margin-top: -1px;
display: inline-block;
margin-right: 12px;
margin: 10px 12px 10px 0;
font-size: 30px !important;
}
}
.am-list-line-multiple::after{
background-color: transparent !important;
}
\ No newline at end of file
.history/src/components/my/index_20190419144130.scss 0 → 100644
.my-tab{
width: 100%;
height: 44px;
font-size: $font_16;
background: $bg_f7f9fc;
}
.my-list{
.avatar-wrap{
padding: 15px 20px;
}
}
.my-isvip{
width: 100%;
padding: 0 20px;
height: 44px;
margin: 0 auto;
height: 44px;
background: url("./image/vip_bg.png") no-repeat;
}
// 修改List组件默认样式
.am-list-item{
padding-left: 15px;
padding-right: 15px;
}
.am-list-item .am-list-line-multiple{
padding-right: 8px !important;
}
.am-list-thumb{
img{
width: 64px;
height: 64px;
}
}
.am-list-brief{
color: $color_333 !important;
}
.am-list-header{
padding: 2.5px 0;
}
.am-list-content{
i{
vertical-align: middle;
margin-top: -1px;
display: inline-block;
margin-right: 12px;
margin: 10px 12px 10px 0;
font-size: 30px !important;
}
}
.am-list-line-multiple::after{
background-color: transparent !important;
}
\ No newline at end of file
.history/src/components/my/index_20190419144512.scss 0 → 100644
.my-tab{
width: 100%;
height: 44px;
font-size: $font_16;
background: $bg_f7f9fc;
}
.my-list{
.avatar-wrap{
padding: 15px 20px;
}
}
.my-isvip{
width: 100%;
padding: 0 20px;
height: 44px;
margin: 0 auto;
height: 44px;
height:44px;
background:linear-gradient(135deg,rgba(249,207,141,1) 0%,rgba(254,226,181,1) 100%);
border-radius:3px;
}
// 修改List组件默认样式
.am-list-item{
padding-left: 15px;
padding-right: 15px;
}
.am-list-item .am-list-line-multiple{
padding-right: 8px !important;
}
.am-list-thumb{
img{
width: 64px;
height: 64px;
}
}
.am-list-brief{
color: $color_333 !important;
}
.am-list-header{
padding: 2.5px 0;
}
.am-list-content{
i{
vertical-align: middle;
margin-top: -1px;
display: inline-block;
margin-right: 12px;
margin: 10px 12px 10px 0;
font-size: 30px !important;
}
}
.am-list-line-multiple::after{
background-color: transparent !important;
}
\ No newline at end of file
.history/src/components/my/index_20190419144544.scss 0 → 100644
.my-tab{
width: 100%;
height: 44px;
font-size: $font_16;
background: $bg_f7f9fc;
}
.my-list{
.avatar-wrap{
padding: 15px 20px;
}
}
.my-isvip{
width: 100%;
padding: 0 20px;
height: 44px;
margin: 0 auto;
height: 44px;
background: url("./image/vip_bg.png") no-repeat;
}
// 修改List组件默认样式
.am-list-item{
padding-left: 15px;
padding-right: 15px;
}
.am-list-item .am-list-line-multiple{
padding-right: 8px !important;
}
.am-list-thumb{
img{
width: 64px;
height: 64px;
}
}
.am-list-brief{
color: $color_333 !important;
}
.am-list-header{
padding: 2.5px 0;
}
.am-list-content{
i{
vertical-align: middle;
margin-top: -1px;
display: inline-block;
margin-right: 12px;
margin: 10px 12px 10px 0;
font-size: 30px !important;
}
}
.am-list-line-multiple::after{
background-color: transparent !important;
}
\ No newline at end of file
.history/src/components/my/index_20190419144714.scss 0 → 100644
.my-tab{
width: 100%;
height: 44px;
font-size: $font_16;
background: $bg_f7f9fc;
}
.my-list{
.avatar-wrap{
padding: 15px 20px;
}
}
.my-isvip{
width: 100%;
padding: 0 20px;
height: 44px;
margin: 0 auto;
height: 44px;
background: url("./image/vip_bg.png") no-repeat center center;
}
// 修改List组件默认样式
.am-list-item{
padding-left: 15px;
padding-right: 15px;
}
.am-list-item .am-list-line-multiple{
padding-right: 8px !important;
}
.am-list-thumb{
img{
width: 64px;
height: 64px;
}
}
.am-list-brief{
color: $color_333 !important;
}
.am-list-header{
padding: 2.5px 0;
}
.am-list-content{
i{
vertical-align: middle;
margin-top: -1px;
display: inline-block;
margin-right: 12px;
margin: 10px 12px 10px 0;
font-size: 30px !important;
}
}
.am-list-line-multiple::after{
background-color: transparent !important;
}
\ No newline at end of file
.history/src/components/my/index_20190419144854.scss 0 → 100644
.my-tab{
width: 100%;
height: 44px;
font-size: $font_16;
background: $bg_f7f9fc;
}
.my-list{
.avatar-wrap{
padding: 15px 20px;
}
}
.my-isvip{
width: 100%;
padding: 0 20px;
height: 44px;
margin: 0 auto;
height: 44px;
background-image: url("./image/vip_bg.png");
background-position: center center; // 居中
background-size: cover; // 填满div
background-repeat: no-repeat;
}
// 修改List组件默认样式
.am-list-item{
padding-left: 15px;
padding-right: 15px;
}
.am-list-item .am-list-line-multiple{
padding-right: 8px !important;
}
.am-list-thumb{
img{
width: 64px;
height: 64px;
}
}
.am-list-brief{
color: $color_333 !important;
}
.am-list-header{
padding: 2.5px 0;
}
.am-list-content{
i{
vertical-align: middle;
margin-top: -1px;
display: inline-block;
margin-right: 12px;
margin: 10px 12px 10px 0;
font-size: 30px !important;
}
}
.am-list-line-multiple::after{
background-color: transparent !important;
}
\ No newline at end of file
.history/src/components/my/index_20190419144920.scss 0 → 100644
.my-tab{
width: 100%;
height: 44px;
font-size: $font_16;
background: $bg_f7f9fc;
}
.my-list{
.avatar-wrap{
padding: 15px 20px;
}
}
.my-isvip{
width: 100%;
padding: 0 20px;
height: 44px;
margin: 0 auto;
background-image: url("./image/vip_bg.png");
background-position: center center; // 居中
background-size: cover; // 填满div
background-repeat: no-repeat;
}
// 修改List组件默认样式
.am-list-item{
padding-left: 15px;
padding-right: 15px;
}
.am-list-item .am-list-line-multiple{
padding-right: 8px !important;
}
.am-list-thumb{
img{
width: 64px;
height: 64px;
}
}
.am-list-brief{
color: $color_333 !important;
}
.am-list-header{
padding: 2.5px 0;
}
.am-list-content{
i{
vertical-align: middle;
margin-top: -1px;
display: inline-block;
margin-right: 12px;
margin: 10px 12px 10px 0;
font-size: 30px !important;
}
}
.am-list-line-multiple::after{
background-color: transparent !important;
}
\ No newline at end of file
.history/src/components/my/index_20190419144930.scss 0 → 100644
.my-tab{
width: 100%;
height: 44px;
font-size: $font_16;
background: $bg_f7f9fc;
}
.my-list{
.avatar-wrap{
padding: 15px 20px;
}
}
.my-isvip{
width: 100%;
padding: 0 20px;
height: 44px;
margin: 0 auto;
background-image: url("./image/vip_bg.png");
background-position: center center;
background-size: cover;
background-repeat: no-repeat;
}
// 修改List组件默认样式
.am-list-item{
padding-left: 15px;
padding-right: 15px;
}
.am-list-item .am-list-line-multiple{
padding-right: 8px !important;
}
.am-list-thumb{
img{
width: 64px;
height: 64px;
}
}
.am-list-brief{
color: $color_333 !important;
}
.am-list-header{
padding: 2.5px 0;
}
.am-list-content{
i{
vertical-align: middle;
margin-top: -1px;
display: inline-block;
margin-right: 12px;
margin: 10px 12px 10px 0;
font-size: 30px !important;
}
}
.am-list-line-multiple::after{
background-color: transparent !important;
}
\ No newline at end of file
.history/src/components/my/index_20190419144941.scss 0 → 100644
.my-tab{
width: 100%;
height: 44px;
font-size: $font_16;
background: $bg_f7f9fc;
}
.my-list{
.avatar-wrap{
padding: 15px 20px;
}
}
.my-isvip{
width: 100%;
padding: 0 20px;
height: 44px;
margin: 0 auto;
background-image: url("./image/vip_bg.png");
background-position: center center;
background-size: cover;
background-repeat: no-repeat;
border-radius: 3px;
}
// 修改List组件默认样式
.am-list-item{
padding-left: 15px;
padding-right: 15px;
}
.am-list-item .am-list-line-multiple{
padding-right: 8px !important;
}
.am-list-thumb{
img{
width: 64px;
height: 64px;
}
}
.am-list-brief{
color: $color_333 !important;
}
.am-list-header{
padding: 2.5px 0;
}
.am-list-content{
i{
vertical-align: middle;
margin-top: -1px;
display: inline-block;
margin-right: 12px;
margin: 10px 12px 10px 0;
font-size: 30px !important;
}
}
.am-list-line-multiple::after{
background-color: transparent !important;
}
\ No newline at end of file
.history/src/components/my/index_20190419145004.scss 0 → 100644
.my-tab{
width: 100%;
height: 44px;
font-size: $font_16;
background: $bg_f7f9fc;
}
.my-list{
.avatar-wrap{
padding: 15px 20px;
}
}
.my-isvip{
width: 100%;
margin: 0 20px;
height: 44px;
background-image: url("./image/vip_bg.png");
background-position: center center;
background-size: cover;
background-repeat: no-repeat;
border-radius: 3px;
}
// 修改List组件默认样式
.am-list-item{
padding-left: 15px;
padding-right: 15px;
}
.am-list-item .am-list-line-multiple{
padding-right: 8px !important;
}
.am-list-thumb{
img{
width: 64px;
height: 64px;
}
}
.am-list-brief{
color: $color_333 !important;
}
.am-list-header{
padding: 2.5px 0;
}
.am-list-content{
i{
vertical-align: middle;
margin-top: -1px;
display: inline-block;
margin-right: 12px;
margin: 10px 12px 10px 0;
font-size: 30px !important;
}
}
.am-list-line-multiple::after{
background-color: transparent !important;
}
\ No newline at end of file
.history/src/components/my/index_20190419145021.scss 0 → 100644
.my-tab{
width: 100%;
height: 44px;
font-size: $font_16;
background: $bg_f7f9fc;
}
.my-list{
.avatar-wrap{
padding: 15px 20px;
}
}
.my-isvip{
width: 100%;
height: 44px;
background-image: url("./image/vip_bg.png");
background-position: center center;
background-size: cover;
background-repeat: no-repeat;
border-radius: 3px;
}
// 修改List组件默认样式
.am-list-item{
padding-left: 15px;
padding-right: 15px;
}
.am-list-item .am-list-line-multiple{
padding-right: 8px !important;
}
.am-list-thumb{
img{
width: 64px;
height: 64px;
}
}
.am-list-brief{
color: $color_333 !important;
}
.am-list-header{
padding: 2.5px 0;
}
.am-list-content{
i{
vertical-align: middle;
margin-top: -1px;
display: inline-block;
margin-right: 12px;
margin: 10px 12px 10px 0;
font-size: 30px !important;
}
}
.am-list-line-multiple::after{
background-color: transparent !important;
}
\ No newline at end of file
.history/src/components/my/index_20190419145447.scss 0 → 100644
.my-tab{
width: 100%;
height: 44px;
font-size: $font_16;
background: $bg_f7f9fc;
}
.my-list{
.avatar-wrap{
padding: 15px 20px;
}
}
.my-isvip{
width: 100%;
height: 44px;
background-image: url("./image/vip_bg.png");
background-size: cover;
background-repeat: no-repeat;
border-radius: 3px;
}
// 修改List组件默认样式
.am-list-item{
padding-left: 15px;
padding-right: 15px;
}
.am-list-item .am-list-line-multiple{
padding-right: 8px !important;
}
.am-list-thumb{
img{
width: 64px;
height: 64px;
}
}
.am-list-brief{
color: $color_333 !important;
}
.am-list-header{
padding: 2.5px 0;
}
.am-list-content{
i{
vertical-align: middle;
margin-top: -1px;
display: inline-block;
margin-right: 12px;
margin: 10px 12px 10px 0;
font-size: 30px !important;
}
}
.am-list-line-multiple::after{
background-color: transparent !important;
}
\ No newline at end of file
.history/src/components/my/index_20190419150038.js 0 → 100644
import React, { Component } from 'react';
import { Flex, WhiteSpace, NavBar, List } from 'antd-mobile';
import './index.scss';
import Avatar from './image/avatar.png';
const Item = List.Item;
const Brief = Item.Brief;
class My extends Component {
render() {
return (
<div className="flex-container">
<Flex>
<Flex.Item>
<NavBar
className="my-tab"
mode="light"
>
我的
</NavBar>
{/* <List className="my-list">
<Item
className="avatar-wrap"
arrow="horizontal"
multipleLine
thumb={Avatar}
onClick={() => { }}>
<Brief>点击登录</Brief>
</Item>
</List> */}
<List className="my-list">
<Item
className="avatar-wrap"
arrow="horizontal"
thumb={Avatar}
onClick={() => { }}>
<Brief>xuan先生</Brief>
<Brief>学号: 410026</Brief>
</Item>
<div className="my-isvip"></div>
</List>
<List renderHeader={() => ''} className="my-list">
<Item
arrow="horizontal"
onClick={() => { }}
>
<i className="iconfont iconiconfront-27"></i>
已购课程
</Item>
<Item
arrow="horizontal"
onClick={() => { }}
>
<i className="iconfont icongouwuche"></i>
购物车
</Item>
<Item
arrow="horizontal"
onClick={() => { }}
>
<i className="iconfont iconiconfront-24"></i>
课程订单
</Item>
<Item
arrow="horizontal"
onClick={() => { }}
>
<i className="iconfont iconiconfront-52"></i>
优惠券
</Item>
</List>
<List renderHeader={() => ''} >
<Item
arrow="horizontal"
onClick={() => { }}
>
<i className="iconfont iconiconfront-51"></i>
赚奖学金
</Item>
</List>
</Flex.Item>
</Flex>
<WhiteSpace size="lg" />
</div>
)
}
}
export default My;
\ No newline at end of file
.history/src/components/my/index_20190419150044.js 0 → 100644
import React, { Component } from 'react';
import { Flex, WhiteSpace, NavBar, List } from 'antd-mobile';
import './index.scss';
import Avatar from './image/avatar.png';
const Item = List.Item;
const Brief = Item.Brief;
class My extends Component {
render() {
return (
<div className="flex-container">
<Flex>
<Flex.Item>
<NavBar
className="my-tab"
mode="light"
>
我的
</NavBar>
{/* <List className="my-list">
<Item
className="avatar-wrap"
arrow="horizontal"
multipleLine
thumb={Avatar}
onClick={() => { }}>
<Brief>点击登录</Brief>
</Item>
</List> */}
<List className="my-list">
<Item
className="avatar-wrap"
arrow="horizontal"
multipleLine
thumb={Avatar}
onClick={() => { }}>
<Brief>xuan先生</Brief>
<Brief>学号: 410026</Brief>
</Item>
<div className="my-isvip"></div>
</List>
<List renderHeader={() => ''} className="my-list">
<Item
arrow="horizontal"
onClick={() => { }}
>
<i className="iconfont iconiconfront-27"></i>
已购课程
</Item>
<Item
arrow="horizontal"
onClick={() => { }}
>
<i className="iconfont icongouwuche"></i>
购物车
</Item>
<Item
arrow="horizontal"
onClick={() => { }}
>
<i className="iconfont iconiconfront-24"></i>
课程订单
</Item>
<Item
arrow="horizontal"
onClick={() => { }}
>
<i className="iconfont iconiconfront-52"></i>
优惠券
</Item>
</List>
<List renderHeader={() => ''} >
<Item
arrow="horizontal"
onClick={() => { }}
>
<i className="iconfont iconiconfront-51"></i>
赚奖学金
</Item>
</List>
</Flex.Item>
</Flex>
<WhiteSpace size="lg" />
</div>
)
}
}
export default My;
\ No newline at end of file
.history/src/components/my/index_20190419150250.js 0 → 100644
import React, { Component } from 'react';
import { Flex, WhiteSpace, NavBar, List } from 'antd-mobile';
import './index.scss';
import Avatar from './image/avatar.png';
const Item = List.Item;
const Brief = Item.Brief;
class My extends Component {
render() {
return (
<div className="flex-container">
<Flex>
<Flex.Item>
<NavBar
className="my-tab"
mode="light"
>
我的
</NavBar>
{/* <List className="my-list">
<Item
className="avatar-wrap"
arrow="horizontal"
multipleLine
thumb={Avatar}
onClick={() => { }}>
<Brief>点击登录</Brief>
</Item>
</List> */}
<List className="my-list">
<Item
className="avatar-wrap"
arrow="horizontal"
multipleLine
thumb={Avatar}
onClick={() => { }}>
<Brief>xuan先生</Brief>
<Brief>学号: 410026</Brief>
</Item>
<div className="my-isvip"></div>
</List>
<List className="my-list">
<Item
arrow="horizontal"
onClick={() => { }}
>
<i className="iconfont iconiconfront-27"></i>
已购课程
</Item>
<Item
arrow="horizontal"
onClick={() => { }}
>
<i className="iconfont icongouwuche"></i>
购物车
</Item>
<Item
arrow="horizontal"
onClick={() => { }}
>
<i className="iconfont iconiconfront-24"></i>
课程订单
</Item>
<Item
arrow="horizontal"
onClick={() => { }}
>
<i className="iconfont iconiconfront-52"></i>
优惠券
</Item>
</List>
<List renderHeader={() => ''} >
<Item
arrow="horizontal"
onClick={() => { }}
>
<i className="iconfont iconiconfront-51"></i>
赚奖学金
</Item>
</List>
</Flex.Item>
</Flex>
<WhiteSpace size="lg" />
</div>
)
}
}
export default My;
\ No newline at end of file
.history/src/components/my/index_20190419150314.js 0 → 100644
import React, { Component } from 'react';
import { Flex, WhiteSpace, NavBar, List } from 'antd-mobile';
import './index.scss';
import Avatar from './image/avatar.png';
const Item = List.Item;
const Brief = Item.Brief;
class My extends Component {
render() {
return (
<div className="flex-container">
<Flex>
<Flex.Item>
<NavBar
className="my-tab"
mode="light"
>
我的
</NavBar>
{/* <List className="my-list">
<Item
className="avatar-wrap"
arrow="horizontal"
multipleLine
thumb={Avatar}
onClick={() => { }}>
<Brief>点击登录</Brief>
</Item>
</List> */}
<List className="my-list">
<Item
className="avatar-wrap"
arrow="horizontal"
multipleLine
thumb={Avatar}
onClick={() => { }}>
<Brief>xuan先生</Brief>
<Brief>学号: 410026</Brief>
</Item>
<div className="my-isvip"></div>
</List>
<List className="my-list">
<Item
arrow="horizontal"
onClick={() => { }}
>
<i className="iconfont iconiconfront-27"></i>
已购课程
</Item>
<Item
arrow="horizontal"
onClick={() => { }}
>
<i className="iconfont icongouwuche"></i>
购物车
</Item>
<Item
arrow="horizontal"
onClick={() => { }}
>
<i className="iconfont iconiconfront-24"></i>
课程订单
</Item>
<Item
arrow="horizontal"
onClick={() => { }}
>
<i className="iconfont iconiconfront-52"></i>
优惠券
</Item>
</List>
<List renderHeader={() => ''} >
<Item
arrow="horizontal"
onClick={() => { }}
>
<i className="iconfont iconiconfront-51"></i>
赚奖学金
</Item>
</List>
</Flex.Item>
</Flex>
<WhiteSpace size="lg" />
</div>
)
}
}
export default My;
\ No newline at end of file
.history/src/components/my/index_20190419150603.js 0 → 100644
import React, { Component } from 'react';
import { Flex, WhiteSpace, NavBar, List } from 'antd-mobile';
import './index.scss';
import Avatar from './image/avatar.png';
const Item = List.Item;
const Brief = Item.Brief;
class My extends Component {
render() {
return (
<div className="flex-container">
<Flex>
<Flex.Item>
<NavBar
className="my-tab"
mode="light"
>
我的
</NavBar>
{/* <List className="my-list">
<Item
className="avatar-wrap"
arrow="horizontal"
multipleLine
thumb={Avatar}
onClick={() => { }}>
<Brief>点击登录</Brief>
</Item>
</List> */}
<List className="my-list">
<Item
className="avatar-wrap"
arrow="horizontal"
multipleLine
thumb={Avatar}
onClick={() => { }}>
<Brief>xuan先生</Brief>
<Brief>学号: 410026</Brief>
</Item>
<div className="my-isvip"></div>
</List>
<List renderHeader={() => ''} className="my-list">
<Item
arrow="horizontal"
onClick={() => { }}
>
<i className="iconfont iconiconfront-27"></i>
已购课程
</Item>
<Item
arrow="horizontal"
onClick={() => { }}
>
<i className="iconfont icongouwuche"></i>
购物车
</Item>
<Item
arrow="horizontal"
onClick={() => { }}
>
<i className="iconfont iconiconfront-24"></i>
课程订单
</Item>
<Item
arrow="horizontal"
onClick={() => { }}
>
<i className="iconfont iconiconfront-52"></i>
优惠券
</Item>
</List>
<List renderHeader={() => ''} >
<Item
arrow="horizontal"
onClick={() => { }}
>
<i className="iconfont iconiconfront-51"></i>
赚奖学金
</Item>
</List>
</Flex.Item>
</Flex>
<WhiteSpace size="lg" />
</div>
)
}
}
export default My;
\ No newline at end of file
.history/src/components/my/index_20190419150829.scss 0 → 100644
.my-tab{
width: 100%;
height: 44px;
font-size: $font_16;
background: $bg_f7f9fc;
}
.my-list{
.avatar-wrap{
padding: 15px 20px;
}
}
.my-isvip{
width: 100%;
height: 44px;
background-image: url("./image/vip_bg.png");
background-size: cover;
background-repeat: no-repeat;
border-radius: 3px;
}
// 修改List组件默认样式
.am-list-item{
padding-left: 22px;
padding-right: 8px;
}
.am-list-item .am-list-line-multiple{
padding-right: 8px !important;
}
.am-list-thumb{
img{
width: 64px;
height: 64px;
}
}
.am-list-brief{
color: $color_333 !important;
}
.am-list-header{
padding: 2.5px 0;
}
.am-list-content{
i{
vertical-align: middle;
margin-top: -1px;
display: inline-block;
margin-right: 12px;
margin: 10px 12px 10px 0;
font-size: 30px !important;
}
}
.am-list-line-multiple::after{
background-color: transparent !important;
}
\ No newline at end of file
.history/src/components/my/index_20190419150934.scss 0 → 100644
.my-tab{
width: 100%;
height: 44px;
font-size: $font_16;
background: $bg_f7f9fc;
}
.my-list{
.avatar-wrap{
padding: 15px 20px;
}
}
.my-isvip{
width: 100%;
height: 44px;
background-image: url("./image/vip_bg.png");
background-size: cover;
background-repeat: no-repeat;
border-radius: 3px;
}
// 修改List组件默认样式
.am-list-item{
padding-left: 22px;
padding-right: 8px;
}
.am-list-item .am-list-line-multiple{
padding-right: 0px !important;
}
.am-list-thumb{
img{
width: 64px;
height: 64px;
}
}
.am-list-brief{
color: $color_333 !important;
}
.am-list-header{
padding: 2.5px 0;
}
.am-list-content{
i{
vertical-align: middle;
margin-top: -1px;
display: inline-block;
margin-right: 12px;
margin: 10px 12px 10px 0;
font-size: 30px !important;
}
}
.am-list-line-multiple::after{
background-color: transparent !important;
}
\ No newline at end of file
.history/src/components/my/index_20190419151032.js 0 → 100644
import React, { Component } from 'react';
import { Flex, WhiteSpace, NavBar, List } from 'antd-mobile';
import './index.scss';
import Avatar from './image/avatar.png';
const Item = List.Item;
const Brief = Item.Brief;
class My extends Component {
render() {
return (
<div className="flex-container">
<Flex>
<Flex.Item>
<NavBar
className="my-tab"
mode="light"
>
我的
</NavBar>
{/* <List className="my-list">
<Item
className="avatar-wrap"
arrow="horizontal"
multipleLine
thumb={Avatar}
onClick={() => { }}>
<Brief>点击登录</Brief>
</Item>
</List> */}
<List className="my-list">
<Item
className="avatar-wrap"
arrow="horizontal"
multipleLine
thumb={Avatar}
onClick={() => { }}>
<Brief>xuan先生</Brief>
<Brief>学号: 410026</Brief>
</Item>
<div className="my-isvip"></div>
</List>
<List className="my-list">
<Item
arrow="horizontal"
onClick={() => { }}
>
<i className="iconfont iconiconfront-27"></i>
已购课程
</Item>
<Item
arrow="horizontal"
onClick={() => { }}
>
<i className="iconfont icongouwuche"></i>
购物车
</Item>
<Item
arrow="horizontal"
onClick={() => { }}
>
<i className="iconfont iconiconfront-24"></i>
课程订单
</Item>
<Item
arrow="horizontal"
onClick={() => { }}
>
<i className="iconfont iconiconfront-52"></i>
优惠券
</Item>
</List>
<List renderHeader={() => ''} >
<Item
arrow="horizontal"
onClick={() => { }}
>
<i className="iconfont iconiconfront-51"></i>
赚奖学金
</Item>
</List>
</Flex.Item>
</Flex>
<WhiteSpace size="lg" />
</div>
)
}
}
export default My;
\ No newline at end of file
.history/src/components/my/index_20190419151634.js 0 → 100644
import React, { Component } from 'react';
import { Flex, WhiteSpace, NavBar, List } from 'antd-mobile';
import './index.scss';
import Avatar from './image/avatar.png';
const Item = List.Item;
const Brief = Item.Brief;
class My extends Component {
render() {
return (
<div className="flex-container">
<Flex>
<Flex.Item>
<NavBar
className="my-tab"
mode="light"
>
我的
</NavBar>
{/* <List className="my-list">
<Item
className="avatar-wrap"
arrow="horizontal"
multipleLine
thumb={Avatar}
onClick={() => { }}>
<Brief>点击登录</Brief>
</Item>
</List> */}
<List className="my-list">
<Item
className="avatar-wrap"
arrow="horizontal"
multipleLine
thumb={Avatar}
onClick={() => { }}>
<Brief>xuan先生</Brief>
<Brief>学号: 410026</Brief>
</Item>
<div className="my-isvip"></div>
</List>
<List renderHeader={() => ''} className="my-list">
<Item
arrow="horizontal"
onClick={() => { }}
>
<i className="iconfont iconiconfront-27"></i>
已购课程
</Item>
<Item
arrow="horizontal"
onClick={() => { }}
>
<i className="iconfont icongouwuche"></i>
购物车
</Item>
<Item
arrow="horizontal"
onClick={() => { }}
>
<i className="iconfont iconiconfront-24"></i>
课程订单
</Item>
<Item
arrow="horizontal"
onClick={() => { }}
>
<i className="iconfont iconiconfront-52"></i>
优惠券
</Item>
</List>
<List renderHeader={() => ''} >
<Item
arrow="horizontal"
onClick={() => { }}
>
<i className="iconfont iconiconfront-51"></i>
赚奖学金
</Item>
</List>
</Flex.Item>
</Flex>
<WhiteSpace size="lg" />
</div>
)
}
}
export default My;
\ No newline at end of file
.history/src/components/my/index_20190419152313.js 0 → 100644
import React, { Component } from 'react';
import { Flex, WhiteSpace, NavBar, List } from 'antd-mobile';
import './index.scss';
import Avatar from './image/avatar.png';
const Item = List.Item;
const Brief = Item.Brief;
class My extends Component {
render() {
return (
<div className="flex-container">
<Flex>
<Flex.Item>
<NavBar
className="my-tab"
mode="light"
>
我的
</NavBar>
{/* <List className="my-list">
<Item
className="avatar-wrap"
arrow="horizontal"
multipleLine
thumb={Avatar}
onClick={() => { }}>
<Brief>点击登录</Brief>
</Item>
</List> */}
<List className="my-list">
<Item
className="avatar-wrap"
arrow="horizontal"
multipleLine
thumb={Avatar}
onClick={() => { }}>
<Brief>
xuan先生
<i></i>
</Brief>
<Brief>学号: 410026</Brief>
</Item>
<div className="my-isvip"></div>
</List>
<List renderHeader={() => ''} className="my-list">
<Item
arrow="horizontal"
onClick={() => { }}
>
<i className="iconfont iconiconfront-27"></i>
已购课程
</Item>
<Item
arrow="horizontal"
onClick={() => { }}
>
<i className="iconfont icongouwuche"></i>
购物车
</Item>
<Item
arrow="horizontal"
onClick={() => { }}
>
<i className="iconfont iconiconfront-24"></i>
课程订单
</Item>
<Item
arrow="horizontal"
onClick={() => { }}
>
<i className="iconfont iconiconfront-52"></i>
优惠券
</Item>
</List>
<List renderHeader={() => ''} >
<Item
arrow="horizontal"
onClick={() => { }}
>
<i className="iconfont iconiconfront-51"></i>
赚奖学金
</Item>
</List>
</Flex.Item>
</Flex>
<WhiteSpace size="lg" />
</div>
)
}
}
export default My;
\ No newline at end of file
.history/src/components/my/index_20190419152510.js 0 → 100644
import React, { Component } from 'react';
import { Flex, WhiteSpace, NavBar, List } from 'antd-mobile';
import './index.scss';
import Avatar from './image/avatar.png';
const Item = List.Item;
const Brief = Item.Brief;
class My extends Component {
render() {
return (
<div className="flex-container">
<Flex>
<Flex.Item>
<NavBar
className="my-tab"
mode="light"
>
我的
</NavBar>
{/* <List className="my-list">
<Item
className="avatar-wrap"
arrow="horizontal"
multipleLine
thumb={Avatar}
onClick={() => { }}>
<Brief>点击登录</Brief>
</Item>
</List> */}
<List className="my-list">
<Item
className="avatar-wrap"
arrow="horizontal"
multipleLine
thumb={Avatar}
onClick={() => { }}>
<Brief>
xuan先生
<i></i>
</Brief>
<Brief>学号: 410026</Brief>
</Item>
<div className="my-isvip"></div>
</List>
<List className="my-list">
<Item
arrow="horizontal"
onClick={() => { }}
>
<i className="iconfont iconiconfront-27"></i>
已购课程
</Item>
<Item
arrow="horizontal"
onClick={() => { }}
>
<i className="iconfont icongouwuche"></i>
购物车
</Item>
<Item
arrow="horizontal"
onClick={() => { }}
>
<i className="iconfont iconiconfront-24"></i>
课程订单
</Item>
<Item
arrow="horizontal"
onClick={() => { }}
>
<i className="iconfont iconiconfront-52"></i>
优惠券
</Item>
</List>
<List renderHeader={() => ''} >
<Item
arrow="horizontal"
onClick={() => { }}
>
<i className="iconfont iconiconfront-51"></i>
赚奖学金
</Item>
</List>
</Flex.Item>
</Flex>
<WhiteSpace size="lg" />
</div>
)
}
}
export default My;
\ No newline at end of file
.history/src/components/my/index_20190419152729.scss 0 → 100644
.my-tab{
width: 100%;
height: 44px;
font-size: $font_16;
background: $bg_f7f9fc;
}
.my-list{
.avatar-wrap{
padding: 15px 20px;
}
}
.my-isvip{
width: 100%;
height: 44px;
background-image: url("./image/vip_bg.png");
background-size: cover;
background-repeat: no-repeat;
border-radius: 3px;
}
// 修改List组件默认样式
.am-list-item{
padding-left: 22px;
padding-right: 8px;
}
.am-list-item .am-list-line-multiple{
padding-right: 0px !important;
}
.am-list-thumb{
img{
width: 64px;
height: 64px;
}
}
.am-list-brief{
color: $color_333 !important;
}
.am-list-header{
padding: 2.5px 0;
}
.am-list-content{
i{
vertical-align: middle;
margin-top: -1px;
display: inline-block;
margin-right: 12px;
margin: 10px 12px 10px 0;
font-size: 30px !important;
}
}
.am-list-line-multiple::after{
background-color: transparent !important;
}
.my-list{
.am-list-body:after{
background-color: none !important;
}
}
\ No newline at end of file
.history/src/components/my/index_20190419152748.scss 0 → 100644
.my-tab{
width: 100%;
height: 44px;
font-size: $font_16;
background: $bg_f7f9fc;
}
.my-list{
.avatar-wrap{
padding: 15px 20px;
}
}
.my-isvip{
width: 100%;
height: 44px;
background-image: url("./image/vip_bg.png");
background-size: cover;
background-repeat: no-repeat;
border-radius: 3px;
}
// 修改List组件默认样式
.am-list-item{
padding-left: 22px;
padding-right: 8px;
}
.am-list-item .am-list-line-multiple{
padding-right: 0px !important;
}
.am-list-thumb{
img{
width: 64px;
height: 64px;
}
}
.am-list-brief{
color: $color_333 !important;
}
.am-list-header{
padding: 2.5px 0;
}
.am-list-content{
i{
vertical-align: middle;
margin-top: -1px;
display: inline-block;
margin-right: 12px;
margin: 10px 12px 10px 0;
font-size: 30px !important;
}
}
.am-list-line-multiple::after{
background-color: transparent !important;
}
.my-list{
.am-list-body:after{
background-color: transparent !important;
}
}
\ No newline at end of file
.history/src/components/my/index_20190419153144.js 0 → 100644
import React, { Component } from 'react';
import { Flex, WhiteSpace, NavBar, List } from 'antd-mobile';
import './index.scss';
import Avatar from './image/avatar.png';
const Item = List.Item;
const Brief = Item.Brief;
class My extends Component {
render() {
return (
<div className="flex-container">
<Flex>
<Flex.Item>
<NavBar
className="my-tab"
mode="light"
>
我的
</NavBar>
{/* <List className="my-list">
<Item
className="avatar-wrap"
arrow="horizontal"
multipleLine
thumb={Avatar}
onClick={() => { }}>
<Brief>点击登录</Brief>
</Item>
</List> */}
<List className="my-list">
<Item
className="avatar-wrap"
arrow="horizontal"
multipleLine
thumb={Avatar}
onClick={() => { }}>
<Brief>
xuan先生
<i></i>
</Brief>
<Brief>学号: 410026</Brief>
</Item>
<div className="my-isvip"></div>
<div className="my-shadow"></div>
</List>
<List className="my-list">
<Item
arrow="horizontal"
onClick={() => { }}
>
<i className="iconfont iconiconfront-27"></i>
已购课程
</Item>
<Item
arrow="horizontal"
onClick={() => { }}
>
<i className="iconfont icongouwuche"></i>
购物车
</Item>
<Item
arrow="horizontal"
onClick={() => { }}
>
<i className="iconfont iconiconfront-24"></i>
课程订单
</Item>
<Item
arrow="horizontal"
onClick={() => { }}
>
<i className="iconfont iconiconfront-52"></i>
优惠券
</Item>
</List>
<List renderHeader={() => ''} >
<Item
arrow="horizontal"
onClick={() => { }}
>
<i className="iconfont iconiconfront-51"></i>
赚奖学金
</Item>
</List>
</Flex.Item>
</Flex>
<WhiteSpace size="lg" />
</div>
)
}
}
export default My;
\ No newline at end of file
.history/src/components/my/index_20190419153226.scss 0 → 100644
.my-tab{
width: 100%;
height: 44px;
font-size: $font_16;
background: $bg_f7f9fc;
}
.my-list{
.avatar-wrap{
padding: 15px 20px;
}
}
.my-isvip{
width: 100%;
height: 44px;
background-image: url("./image/vip_bg.png");
background-size: cover;
background-repeat: no-repeat;
border-radius: 3px;
}
.my-shadow{
height:5px;
background:transparent;
box-shadow:0px -2px 2px 0px rgba(0, 0, 0, 0.08);
}
// 修改List组件默认样式
.am-list-item{
padding-left: 22px;
padding-right: 8px;
}
.am-list-item .am-list-line-multiple{
padding-right: 0px !important;
}
.am-list-thumb{
img{
width: 64px;
height: 64px;
}
}
.am-list-brief{
color: $color_333 !important;
}
.am-list-header{
padding: 2.5px 0;
}
.am-list-content{
i{
vertical-align: middle;
margin-top: -1px;
display: inline-block;
margin-right: 12px;
margin: 10px 12px 10px 0;
font-size: 30px !important;
}
}
.am-list-line-multiple::after{
background-color: transparent !important;
}
.my-list{
.am-list-body:after{
background-color: transparent !important;
}
}
\ No newline at end of file
.history/src/components/my/index_20190419154039.js 0 → 100644
import React, { Component } from 'react';
import { Flex, WhiteSpace, NavBar, List } from 'antd-mobile';
import './index.scss';
import Avatar from './image/avatar.png';
const Item = List.Item;
const Brief = Item.Brief;
class My extends Component {
render() {
return (
<div className="flex-container">
<Flex>
<Flex.Item>
<NavBar
className="my-tab"
mode="light"
>
我的
</NavBar>
{/* <List className="my-list">
<Item
className="avatar-wrap"
arrow="horizontal"
multipleLine
thumb={Avatar}
onClick={() => { }}>
<Brief>点击登录</Brief>
</Item>
</List> */}
<List className="my-list">
<Item
className="avatar-wrap"
arrow="horizontal"
multipleLine
thumb={Avatar}
onClick={() => { }}>
<Brief>
xuan先生
<i></i>
</Brief>
<Brief>学号: 410026</Brief>
</Item>
<div className="my-isvip"></div>
{/* <div className="my-shadow"></div> */}
</List>
<List className="my-list">
<Item
arrow="horizontal"
onClick={() => { }}
>
<i className="iconfont iconiconfront-27"></i>
已购课程
</Item>
<Item
arrow="horizontal"
onClick={() => { }}
>
<i className="iconfont icongouwuche"></i>
购物车
</Item>
<Item
arrow="horizontal"
onClick={() => { }}
>
<i className="iconfont iconiconfront-24"></i>
课程订单
</Item>
<Item
arrow="horizontal"
onClick={() => { }}
>
<i className="iconfont iconiconfront-52"></i>
优惠券
</Item>
</List>
<List renderHeader={() => ''} >
<Item
arrow="horizontal"
onClick={() => { }}
>
<i className="iconfont iconiconfront-51"></i>
赚奖学金
</Item>
</List>
</Flex.Item>
</Flex>
<WhiteSpace size="lg" />
</div>
)
}
}
export default My;
\ No newline at end of file
.history/src/components/my/index_20190419154126.js 0 → 100644
import React, { Component } from 'react';
import { Flex, WhiteSpace, NavBar, List } from 'antd-mobile';
import './index.scss';
import Avatar from './image/avatar.png';
const Item = List.Item;
const Brief = Item.Brief;
class My extends Component {
render() {
return (
<div className="flex-container">
<Flex>
<Flex.Item>
<NavBar
className="my-tab"
mode="light"
>
我的
</NavBar>
{/* <List className="my-list">
<Item
className="avatar-wrap"
arrow="horizontal"
multipleLine
thumb={Avatar}
onClick={() => { }}>
<Brief>点击登录</Brief>
</Item>
</List> */}
<List className="my-list">
<Item
className="avatar-wrap"
arrow="horizontal"
multipleLine
thumb={Avatar}
onClick={() => { }}>
<Brief>
xuan先生
<i></i>
</Brief>
<Brief>学号: 410026</Brief>
</Item>
<div className="my-isvip"></div>
{/* <div className="my-shadow"></div> */}
</List>
<List>
<Item
arrow="horizontal"
onClick={() => { }}
>
<i className="iconfont iconiconfront-27"></i>
已购课程
</Item>
<Item
arrow="horizontal"
onClick={() => { }}
>
<i className="iconfont icongouwuche"></i>
购物车
</Item>
<Item
arrow="horizontal"
onClick={() => { }}
>
<i className="iconfont iconiconfront-24"></i>
课程订单
</Item>
<Item
arrow="horizontal"
onClick={() => { }}
>
<i className="iconfont iconiconfront-52"></i>
优惠券
</Item>
</List>
<List renderHeader={() => ''} >
<Item
arrow="horizontal"
onClick={() => { }}
>
<i className="iconfont iconiconfront-51"></i>
赚奖学金
</Item>
</List>
</Flex.Item>
</Flex>
<WhiteSpace size="lg" />
</div>
)
}
}
export default My;
\ No newline at end of file
.history/src/components/my/index_20190419154443.scss 0 → 100644
.my-tab{
width: 100%;
height: 44px;
font-size: $font_16;
background: $bg_f7f9fc;
}
.my-list{
.avatar-wrap{
padding: 15px 20px;
}
}
.my-isvip{
width: 100%;
height: 48px;
background-image: url("./image/vip_bg.png");
background-size: cover;
background-repeat: no-repeat;
border-radius: 3px;
}
.my-shadow{
height:5px;
background:transparent;
box-shadow:0px -2px 2px 0px rgba(0, 0, 0, 0.08);
}
// 修改List组件默认样式
.am-list-item{
padding-left: 22px;
padding-right: 8px;
}
.am-list-item .am-list-line-multiple{
padding-right: 0px !important;
}
.am-list-thumb{
img{
width: 64px;
height: 64px;
}
}
.am-list-brief{
color: $color_333 !important;
}
.am-list-header{
padding: 2.5px 0;
}
.am-list-content{
i{
vertical-align: middle;
margin-top: -1px;
display: inline-block;
margin-right: 12px;
margin: 10px 12px 10px 0;
font-size: 30px !important;
}
}
.am-list-line-multiple::after{
background-color: transparent !important;
}
.my-list{
.am-list-body:after{
background-color: transparent !important;
}
}
\ No newline at end of file
.history/src/components/my/index_20190419173906.scss 0 → 100644
.my-tab{
width: 100%;
height: 44px;
font-size: $font_16;
background: $bg_f7f9fc;
}
.my-list{
.avatar-wrap{
padding: 15px 20px;
}
}
.my-isvip{
width: 100%;
height: 48px;
background-image: url("./image/vip_bg.png");
background-size: cover;
background-repeat: no-repeat;
border-radius: 3px;
}
.my-shadow{
height:5px;
background:transparent;
box-shadow:0px -2px 2px 0px rgba(0, 0, 0, 0.08);
}
// 修改List组件默认样式
.am-list-item{
padding-left: 22px;
padding-right: 8px;
}
.am-list-item .am-list-line-multiple{
padding-right: 0px !important;
}
.am-list-thumb{
img{
width: 64px;
height: 64px;
}
}
.am-list-brief{
color: $color_333 !important;
}
.am-list-header{
padding: 2.5px 0;
}
.am-list-content{
i{
vertical-align: middle;
margin-top: -1px;
display: inline-block;
margin-right: 12px;
margin: 10px 12px 10px 0;
font-size: 30px !important;
}
}
.am-list-line-multiple::after{
background-color: transparent !important;
}
.my-list{
.am-list-body::after{
background-color: transparent !important;
}
}
\ No newline at end of file
.history/src/components/my/index_20190419174124.scss 0 → 100644
.my-tab{
width: 100%;
height: 44px;
font-size: $font_16;
background: $bg_f7f9fc;
}
.my-list{
.avatar-wrap{
padding: 15px 20px;
}
}
.my-isvip{
width: 100%;
height: 48px;
background-image: url("./image/vip_bg.png");
background-size: cover;
background-repeat: no-repeat;
border-radius: 3px;
}
.my-shadow{
height:5px;
background:transparent;
box-shadow:0px -2px 2px 0px rgba(0, 0, 0, 0.08);
}
// 修改List组件默认样式
.am-list-item{
padding-left: 22px;
padding-right: 8px;
}
.am-list-item .am-list-line-multiple{
padding-right: 0px !important;
}
.am-list-thumb{
img{
width: 64px;
height: 64px;
}
}
.am-list-brief{
color: $color_333 !important;
}
.am-list-header{
padding: 2.5px 0;
}
.am-list-content{
i{
vertical-align: middle;
margin-top: -1px;
display: inline-block;
margin-right: 12px;
margin: 10px 12px 10px 0;
font-size: 30px !important;
}
}
.am-list-line-multiple::after{
background-color: transparent !important;
}
.my-list{
.am-list-body::after{
background-color: transparent !important;
}
.am-list-body::before{
background-color: transparent !important;
}
}
\ No newline at end of file
.history/src/components/my/index_20190419174159.scss 0 → 100644
.my-tab{
width: 100%;
height: 44px;
font-size: $font_16;
background: $bg_f7f9fc;
}
.my-list{
.avatar-wrap{
padding: 15px 20px;
}
}
.my-isvip{
width: 100%;
height: 48px;
background-image: url("./image/vip_bg.png");
background-size: cover;
background-repeat: no-repeat;
border-radius: 3px;
}
.my-shadow{
height:5px;
background:transparent;
box-shadow:0px -2px 2px 0px rgba(0, 0, 0, 0.08);
}
// 修改List组件默认样式
.am-list-item{
padding-left: 22px;
padding-right: 8px;
}
.am-list-item .am-list-line-multiple{
padding-right: 0px !important;
}
.am-list-thumb{
img{
width: 64px;
height: 64px;
}
}
.am-list-brief{
color: $color_333 !important;
}
.am-list-header{
padding: 2.5px 0;
}
.am-list-content{
i{
vertical-align: middle;
margin-top: -1px;
display: inline-block;
margin-right: 12px;
margin: 10px 12px 10px 0;
font-size: 30px !important;
}
}
.am-list-line-multiple::after{
background-color: transparent !important;
}
.my-list{
.am-list-body::after{
background-color: transparent !important;
}
.am-list-body::before{
background-color: transparent !important;
}
}
\ No newline at end of file
.history/src/components/my/index_20190419174353.scss 0 → 100644
.my-tab{
width: 100%;
height: 44px;
font-size: $font_16;
background: $bg_f7f9fc;
}
.my-list{
.avatar-wrap{
padding: 15px 20px;
}
}
.my-isvip{
width: 100%;
height: 48px;
background-image: url("./image/vip_bg.png");
background-size: cover;
background-repeat: no-repeat;
border-radius: 3px;
}
.my-shadow{
height:5px;
background:transparent;
box-shadow:0px -2px 2px 0px rgba(0, 0, 0, 0.08);
}
// 修改List组件默认样式
.am-list-item{
padding-left: 22px;
padding-right: 8px;
}
.am-list-item .am-list-line-multiple{
padding-right: 0px !important;
}
.am-list-thumb{
img{
width: 64px;
height: 64px;
}
}
.am-list-brief{
color: $color_333 !important;
}
.am-list-header{
padding: 2.5px 0;
}
.am-list-content{
i{
vertical-align: middle;
margin-top: -1px;
display: inline-block;
margin-right: 12px;
margin: 10px 12px 10px 0;
font-size: 30px !important;
}
}
.am-list-line-multiple::after{
background-color: transparent !important;
}
.my-list{
.am-list-body::after{
background-color: transparent !important;
}
}
.am-list-body::before{
background-color: transparent !important;
}
\ No newline at end of file
.history/src/components/my/index_20190419174449.scss 0 → 100644
.my-tab{
width: 100%;
height: 44px;
font-size: $font_16;
background: $bg_f7f9fc;
}
.my-list{
.avatar-wrap{
padding: 15px 20px;
}
}
.my-isvip{
width: 100%;
height: 50px;
background-image: url("./image/vip_bg.png");
background-size: cover;
background-repeat: no-repeat;
border-radius: 3px;
}
.my-shadow{
height:5px;
background:transparent;
box-shadow:0px -2px 2px 0px rgba(0, 0, 0, 0.08);
}
// 修改List组件默认样式
.am-list-item{
padding-left: 22px;
padding-right: 8px;
}
.am-list-item .am-list-line-multiple{
padding-right: 0px !important;
}
.am-list-thumb{
img{
width: 64px;
height: 64px;
}
}
.am-list-brief{
color: $color_333 !important;
}
.am-list-header{
padding: 2.5px 0;
}
.am-list-content{
i{
vertical-align: middle;
margin-top: -1px;
display: inline-block;
margin-right: 12px;
margin: 10px 12px 10px 0;
font-size: 30px !important;
}
}
.am-list-line-multiple::after{
background-color: transparent !important;
}
.my-list{
.am-list-body::after{
background-color: transparent !important;
}
}
.am-list-body::before{
background-color: transparent !important;
}
\ No newline at end of file
.history/src/components/my/index_20190419175929.scss 0 → 100644
.my-tab{
width: 100%;
height: 44px;
font-size: $font_16;
background: $bg_f7f9fc;
}
.my-list{
.avatar-wrap{
padding: 15px 20px;
}
}
.my-isvip{
width: 100%;
height: 50px;
background-image: url("./image/vip_bg.png");
background-size: cover;
background-repeat: no-repeat;
border-radius: 3px;
}
.my-stu{
font-size: 12px;
}
// 修改List组件默认样式
.am-list-item{
padding-left: 22px;
padding-right: 8px;
}
.am-list-item .am-list-line-multiple{
padding-right: 0px !important;
}
.am-list-thumb{
img{
width: 64px;
height: 64px;
}
}
.am-list-brief{
color: $color_333 !important;
}
.am-list-header{
padding: 2.5px 0;
}
.am-list-content{
i{
vertical-align: middle;
margin-top: -1px;
display: inline-block;
margin-right: 12px;
margin: 10px 12px 10px 0;
font-size: 30px !important;
}
}
.am-list-line-multiple::after{
background-color: transparent !important;
}
.my-list{
.am-list-body::after{
background-color: transparent !important;
}
}
.am-list-body::before{
background-color: transparent !important;
}
\ No newline at end of file
.history/src/components/my/index_20190419175946.js 0 → 100644
import React, { Component } from 'react';
import { Flex, WhiteSpace, NavBar, List } from 'antd-mobile';
import './index.scss';
import Avatar from './image/avatar.png';
const Item = List.Item;
const Brief = Item.Brief;
class My extends Component {
render() {
return (
<div className="flex-container">
<Flex>
<Flex.Item>
<NavBar
className="my-tab"
mode="light"
>
我的
</NavBar>
{/* <List className="my-list">
<Item
className="avatar-wrap"
arrow="horizontal"
multipleLine
thumb={Avatar}
onClick={() => { }}>
<Brief>点击登录</Brief>
</Item>
</List> */}
<List className="my-list">
<Item
className="avatar-wrap"
arrow="horizontal"
multipleLine
thumb={Avatar}
onClick={() => { }}>
<Brief>
xuan先生
<i></i>
</Brief>
<Brief className="my-stu">学号: 410026</Brief>
</Item>
<div className="my-isvip"></div>
{/* <div className="my-shadow"></div> */}
</List>
<List>
<Item
arrow="horizontal"
onClick={() => { }}
>
<i className="iconfont iconiconfront-27"></i>
已购课程
</Item>
<Item
arrow="horizontal"
onClick={() => { }}
>
<i className="iconfont icongouwuche"></i>
购物车
</Item>
<Item
arrow="horizontal"
onClick={() => { }}
>
<i className="iconfont iconiconfront-24"></i>
课程订单
</Item>
<Item
arrow="horizontal"
onClick={() => { }}
>
<i className="iconfont iconiconfront-52"></i>
优惠券
</Item>
</List>
<List renderHeader={() => ''} >
<Item
arrow="horizontal"
onClick={() => { }}
>
<i className="iconfont iconiconfront-51"></i>
赚奖学金
</Item>
</List>
</Flex.Item>
</Flex>
<WhiteSpace size="lg" />
</div>
)
}
}
export default My;
\ No newline at end of file
.history/src/components/my/index_20190419180143.js 0 → 100644
import React, { Component } from 'react';
import { Flex, WhiteSpace, NavBar, List } from 'antd-mobile';
import './index.scss';
import Avatar from './image/avatar.png';
const Item = List.Item;
const Brief = Item.Brief;
class My extends Component {
render() {
return (
<div className="flex-container">
<Flex>
<Flex.Item>
<NavBar
className="my-tab"
mode="light"
>
我的
</NavBar>
{/* <List className="my-list">
<Item
className="avatar-wrap"
arrow="horizontal"
multipleLine
thumb={Avatar}
onClick={() => { }}>
<Brief>点击登录</Brief>
</Item>
</List> */}
<List className="my-list">
<Item
className="avatar-wrap"
arrow="horizontal"
multipleLine
thumb={Avatar}
onClick={() => { }}>
<Brief>
xuan先生
<i></i>
</Brief>
<Brief style={{fontSize: "12px"}}>学号: 410026</Brief>
</Item>
<div className="my-isvip"></div>
{/* <div className="my-shadow"></div> */}
</List>
<List>
<Item
arrow="horizontal"
onClick={() => { }}
>
<i className="iconfont iconiconfront-27"></i>
已购课程
</Item>
<Item
arrow="horizontal"
onClick={() => { }}
>
<i className="iconfont icongouwuche"></i>
购物车
</Item>
<Item
arrow="horizontal"
onClick={() => { }}
>
<i className="iconfont iconiconfront-24"></i>
课程订单
</Item>
<Item
arrow="horizontal"
onClick={() => { }}
>
<i className="iconfont iconiconfront-52"></i>
优惠券
</Item>
</List>
<List renderHeader={() => ''} >
<Item
arrow="horizontal"
onClick={() => { }}
>
<i className="iconfont iconiconfront-51"></i>
赚奖学金
</Item>
</List>
</Flex.Item>
</Flex>
<WhiteSpace size="lg" />
</div>
)
}
}
export default My;
\ No newline at end of file
.history/src/components/my/index_20190419180244.js 0 → 100644
import React, { Component } from 'react';
import { Flex, WhiteSpace, NavBar, List } from 'antd-mobile';
import './index.scss';
import Avatar from './image/avatar.png';
const Item = List.Item;
const Brief = Item.Brief;
class My extends Component {
render() {
return (
<div className="flex-container">
<Flex>
<Flex.Item>
<NavBar
className="my-tab"
mode="light"
>
我的
</NavBar>
{/* <List className="my-list">
<Item
className="avatar-wrap"
arrow="horizontal"
multipleLine
thumb={Avatar}
onClick={() => { }}>
<Brief>点击登录</Brief>
</Item>
</List> */}
<List className="my-list">
<Item
className="avatar-wrap"
arrow="horizontal"
multipleLine
thumb={Avatar}
onClick={() => { }}>
<Brief style={{ fontSize: "18px" }}>
xuan先生
<i></i>
</Brief>
<Brief style={{fontSize: "12px"}}>学号: 410026</Brief>
</Item>
<div className="my-isvip"></div>
{/* <div className="my-shadow"></div> */}
</List>
<List>
<Item
arrow="horizontal"
onClick={() => { }}
>
<i className="iconfont iconiconfront-27"></i>
已购课程
</Item>
<Item
arrow="horizontal"
onClick={() => { }}
>
<i className="iconfont icongouwuche"></i>
购物车
</Item>
<Item
arrow="horizontal"
onClick={() => { }}
>
<i className="iconfont iconiconfront-24"></i>
课程订单
</Item>
<Item
arrow="horizontal"
onClick={() => { }}
>
<i className="iconfont iconiconfront-52"></i>
优惠券
</Item>
</List>
<List renderHeader={() => ''} >
<Item
arrow="horizontal"
onClick={() => { }}
>
<i className="iconfont iconiconfront-51"></i>
赚奖学金
</Item>
</List>
</Flex.Item>
</Flex>
<WhiteSpace size="lg" />
</div>
)
}
}
export default My;
\ No newline at end of file
.history/src/components/my/index_20190419181650.scss 0 → 100644
.my-tab{
width: 100%;
height: 44px;
font-size: $font_16;
background: $bg_f7f9fc;
}
.my-list{
.avatar-wrap{
padding: 15px 20px;
}
}
.my-isvip{
width: 100%;
height: 50px;
background-image: url("./image/vip_bg.png");
background-size: cover;
background-repeat: no-repeat;
border-radius: 3px;
}
.my-stu{
font-size: 12px;
}
.am-list-body::before{
height: 0px;
}
// 修改List组件默认样式
.am-list-item{
padding-left: 22px;
padding-right: 8px;
}
.am-list-item .am-list-line-multiple{
padding-right: 0px !important;
}
.am-list-thumb{
img{
width: 64px;
height: 64px;
}
}
.am-list-brief{
color: $color_333 !important;
}
.am-list-header{
padding: 2.5px 0;
}
.am-list-content{
i{
vertical-align: middle;
margin-top: -1px;
display: inline-block;
margin-right: 12px;
margin: 10px 12px 10px 0;
font-size: 30px !important;
}
}
.am-list-line-multiple::after{
background-color: transparent !important;
}
.my-list{
.am-list-body::after{
background-color: transparent !important;
}
}
.am-list-body::before{
background-color: transparent !important;
}
\ No newline at end of file
.history/src/components/my/index_20190419181743.scss 0 → 100644
.my-tab{
width: 100%;
height: 44px;
font-size: $font_16;
background: $bg_f7f9fc;
}
.my-list{
.avatar-wrap{
padding: 15px 20px;
}
}
.my-isvip{
width: 100%;
height: 50px;
background-image: url("./image/vip_bg.png");
background-size: cover;
background-repeat: no-repeat;
border-radius: 3px;
}
.my-stu{
font-size: 12px;
}
// 修改List组件默认样式
.am-list-item{
padding-left: 22px;
padding-right: 8px;
}
.am-list-item .am-list-line-multiple{
padding-right: 0px !important;
}
.am-list-thumb{
img{
width: 64px;
height: 64px;
}
}
.am-list-brief{
color: $color_333 !important;
}
.am-list-header{
padding: 2.5px 0;
}
.am-list-content{
i{
vertical-align: middle;
margin-top: -1px;
display: inline-block;
margin-right: 12px;
margin: 10px 12px 10px 0;
font-size: 30px !important;
}
}
.am-list-line-multiple::after{
background-color: transparent !important;
}
.my-list{
.am-list-body::after{
background-color: transparent !important;
}
}
.am-list-body::before{
background-color: transparent !important;
height: 0 !important;
}
\ No newline at end of file
.history/src/components/my/index_20190419181852.scss 0 → 100644
.my-tab{
width: 100%;
height: 44px;
font-size: $font_16;
background: $bg_f7f9fc;
}
.my-list{
.avatar-wrap{
padding: 15px 20px;
}
}
.my-isvip{
width: 100%;
height: 48px;
background-image: url("./image/vip_bg.png");
background-size: cover;
background-repeat: no-repeat;
border-radius: 3px;
}
.my-stu{
font-size: 12px;
}
// 修改List组件默认样式
.am-list-item{
padding-left: 22px;
padding-right: 8px;
}
.am-list-item .am-list-line-multiple{
padding-right: 0px !important;
}
.am-list-thumb{
img{
width: 64px;
height: 64px;
}
}
.am-list-brief{
color: $color_333 !important;
}
.am-list-header{
padding: 2.5px 0;
}
.am-list-content{
i{
vertical-align: middle;
margin-top: -1px;
display: inline-block;
margin-right: 12px;
margin: 10px 12px 10px 0;
font-size: 30px !important;
}
}
.am-list-line-multiple::after{
background-color: transparent !important;
}
.my-list{
.am-list-body::after{
background-color: transparent !important;
}
}
.am-list-body::before{
background-color: transparent !important;
height: 0 !important;
}
\ No newline at end of file
.history/src/components/my/index_20190419182408.js 0 → 100644
import React, { Component } from 'react';
import { Flex, WhiteSpace, NavBar, List } from 'antd-mobile';
import './index.scss';
import Avatar from './image/avatar.png';
import Vip from './image/vip.png';
import UnVip from './image/unvip.png';
const Item = List.Item;
const Brief = Item.Brief;
class My extends Component {
render() {
return (
<div className="flex-container">
<Flex>
<Flex.Item>
<NavBar
className="my-tab"
mode="light"
>
我的
</NavBar>
{/* <List className="my-list">
<Item
className="avatar-wrap"
arrow="horizontal"
multipleLine
thumb={Avatar}
onClick={() => { }}>
<Brief>点击登录</Brief>
</Item>
</List> */}
<List className="my-list">
<Item
className="avatar-wrap"
arrow="horizontal"
multipleLine
thumb={Avatar}
onClick={() => { }}>
<Brief style={{ fontSize: "18px" }}>
xuan先生
<i></i>
</Brief>
<Brief style={{fontSize: "12px"}}>学号: 410026</Brief>
</Item>
<div className="my-isvip"></div>
{/* <div className="my-shadow"></div> */}
</List>
<List>
<Item
arrow="horizontal"
onClick={() => { }}
>
<i className="iconfont iconiconfront-27"></i>
已购课程
</Item>
<Item
arrow="horizontal"
onClick={() => { }}
>
<i className="iconfont icongouwuche"></i>
购物车
</Item>
<Item
arrow="horizontal"
onClick={() => { }}
>
<i className="iconfont iconiconfront-24"></i>
课程订单
</Item>
<Item
arrow="horizontal"
onClick={() => { }}
>
<i className="iconfont iconiconfront-52"></i>
优惠券
</Item>
</List>
<List renderHeader={() => ''} >
<Item
arrow="horizontal"
onClick={() => { }}
>
<i className="iconfont iconiconfront-51"></i>
赚奖学金
</Item>
</List>
</Flex.Item>
</Flex>
<WhiteSpace size="lg" />
</div>
)
}
}
export default My;
\ No newline at end of file
.history/src/components/my/index_20190419182419.js 0 → 100644
import React, { Component } from 'react';
import { Flex, WhiteSpace, NavBar, List } from 'antd-mobile';
import './index.scss';
import Avatar from './image/avatar.png';
import Vip from './image/vip.png';
import UnVip from './image/unVIP.png';
const Item = List.Item;
const Brief = Item.Brief;
class My extends Component {
render() {
return (
<div className="flex-container">
<Flex>
<Flex.Item>
<NavBar
className="my-tab"
mode="light"
>
我的
</NavBar>
{/* <List className="my-list">
<Item
className="avatar-wrap"
arrow="horizontal"
multipleLine
thumb={Avatar}
onClick={() => { }}>
<Brief>点击登录</Brief>
</Item>
</List> */}
<List className="my-list">
<Item
className="avatar-wrap"
arrow="horizontal"
multipleLine
thumb={Avatar}
onClick={() => { }}>
<Brief style={{ fontSize: "18px" }}>
xuan先生
<i></i>
</Brief>
<Brief style={{fontSize: "12px"}}>学号: 410026</Brief>
</Item>
<div className="my-isvip"></div>
{/* <div className="my-shadow"></div> */}
</List>
<List>
<Item
arrow="horizontal"
onClick={() => { }}
>
<i className="iconfont iconiconfront-27"></i>
已购课程
</Item>
<Item
arrow="horizontal"
onClick={() => { }}
>
<i className="iconfont icongouwuche"></i>
购物车
</Item>
<Item
arrow="horizontal"
onClick={() => { }}
>
<i className="iconfont iconiconfront-24"></i>
课程订单
</Item>
<Item
arrow="horizontal"
onClick={() => { }}
>
<i className="iconfont iconiconfront-52"></i>
优惠券
</Item>
</List>
<List renderHeader={() => ''} >
<Item
arrow="horizontal"
onClick={() => { }}
>
<i className="iconfont iconiconfront-51"></i>
赚奖学金
</Item>
</List>
</Flex.Item>
</Flex>
<WhiteSpace size="lg" />
</div>
)
}
}
export default My;
\ No newline at end of file
.history/src/components/my/index_20190419182509.js 0 → 100644
import React, { Component } from 'react';
import { Flex, WhiteSpace, NavBar, List } from 'antd-mobile';
import './index.scss';
import Avatar from './image/avatar.png';
import Vip from './image/vip.png';
import UnVip from './image/unVIP.png';
const Item = List.Item;
const Brief = Item.Brief;
class My extends Component {
render() {
return (
<div className="flex-container">
<Flex>
<Flex.Item>
<NavBar
className="my-tab"
mode="light"
>
我的
</NavBar>
{/* <List className="my-list">
<Item
className="avatar-wrap"
arrow="horizontal"
multipleLine
thumb={Avatar}
onClick={() => { }}>
<Brief>点击登录</Brief>
</Item>
</List> */}
<List className="my-list">
<Item
className="avatar-wrap"
arrow="horizontal"
multipleLine
thumb={Avatar}
onClick={() => { }}>
<Brief style={{ fontSize: "18px" }}>
xuan先生
<img src="Vip" alt=""/>
</Brief>
<Brief style={{fontSize: "12px"}}>学号: 410026</Brief>
</Item>
<div className="my-isvip"></div>
{/* <div className="my-shadow"></div> */}
</List>
<List>
<Item
arrow="horizontal"
onClick={() => { }}
>
<i className="iconfont iconiconfront-27"></i>
已购课程
</Item>
<Item
arrow="horizontal"
onClick={() => { }}
>
<i className="iconfont icongouwuche"></i>
购物车
</Item>
<Item
arrow="horizontal"
onClick={() => { }}
>
<i className="iconfont iconiconfront-24"></i>
课程订单
</Item>
<Item
arrow="horizontal"
onClick={() => { }}
>
<i className="iconfont iconiconfront-52"></i>
优惠券
</Item>
</List>
<List renderHeader={() => ''} >
<Item
arrow="horizontal"
onClick={() => { }}
>
<i className="iconfont iconiconfront-51"></i>
赚奖学金
</Item>
</List>
</Flex.Item>
</Flex>
<WhiteSpace size="lg" />
</div>
)
}
}
export default My;
\ No newline at end of file
.history/src/components/my/index_20190419182523.js 0 → 100644
import React, { Component } from 'react';
import { Flex, WhiteSpace, NavBar, List } from 'antd-mobile';
import './index.scss';
import Avatar from './image/avatar.png';
import Vip from './image/vip.png';
import UnVip from './image/unVIP.png';
const Item = List.Item;
const Brief = Item.Brief;
class My extends Component {
render() {
return (
<div className="flex-container">
<Flex>
<Flex.Item>
<NavBar
className="my-tab"
mode="light"
>
我的
</NavBar>
{/* <List className="my-list">
<Item
className="avatar-wrap"
arrow="horizontal"
multipleLine
thumb={Avatar}
onClick={() => { }}>
<Brief>点击登录</Brief>
</Item>
</List> */}
<List className="my-list">
<Item
className="avatar-wrap"
arrow="horizontal"
multipleLine
thumb={Avatar}
onClick={() => { }}>
<Brief style={{ fontSize: "18px" }}>
xuan先生
<img src={Vip} alt=""/>
</Brief>
<Brief style={{fontSize: "12px"}}>学号: 410026</Brief>
</Item>
<div className="my-isvip"></div>
{/* <div className="my-shadow"></div> */}
</List>
<List>
<Item
arrow="horizontal"
onClick={() => { }}
>
<i className="iconfont iconiconfront-27"></i>
已购课程
</Item>
<Item
arrow="horizontal"
onClick={() => { }}
>
<i className="iconfont icongouwuche"></i>
购物车
</Item>
<Item
arrow="horizontal"
onClick={() => { }}
>
<i className="iconfont iconiconfront-24"></i>
课程订单
</Item>
<Item
arrow="horizontal"
onClick={() => { }}
>
<i className="iconfont iconiconfront-52"></i>
优惠券
</Item>
</List>
<List renderHeader={() => ''} >
<Item
arrow="horizontal"
onClick={() => { }}
>
<i className="iconfont iconiconfront-51"></i>
赚奖学金
</Item>
</List>
</Flex.Item>
</Flex>
<WhiteSpace size="lg" />
</div>
)
}
}
export default My;
\ No newline at end of file
.history/src/styles/variable_20190419121040.scss 0 → 100644
/*
* @ 文字颜色
*/
$active: #09f;
$white: #fff;
$black: #000;
$color_333: #333;
$color_555: #555;
$color_666: #666;
$color_999: #999;
/*
* @ 文字大小
*/
$font_30: 30px;
$font_28: 28px;
$font_26: 26px;
$font_24: 24px;
$font_22: 22px;
$font_20: 20px;
$font_18: 18px;
$font_16: 16px;
$font_14: 14px;
$font_12: 12px;
/*
* @ 背景颜色
*/
$bg_active: #09f;
$bg_fff: #fff;
$bg_000: #000;
$bg_f4f4f4: #f4f4f4;
$bg_f5f5f5: #f5f5f5;
$bg_f7f9fc: #f7f9fc;
/*
* @ 分割线颜色
*/
$sp_ddd: #ddd;
$sp_e7eaf1: #e7eaf1;
/*
* @ 边框颜色
*/
config/webpack.config.js
...@@ -462,6 +462,7 @@ module.exports = function(webpackEnv) { ...@@ -462,6 +462,7 @@ module.exports = function(webpackEnv) {
'style-loader', 'style-loader',
'css-loader', 'css-loader',
{ loader: 'less-loader', options: { modifyVars: theme } }, { loader: 'less-loader', options: { modifyVars: theme } },
], ],
include: /node_modules/, include: /node_modules/,
}, },
......
package.json
...@@ -6,6 +6,7 @@ ...@@ -6,6 +6,7 @@
"@babel/core": "7.2.2", "@babel/core": "7.2.2",
"@svgr/webpack": "4.1.0", "@svgr/webpack": "4.1.0",
"antd-mobile": "^2.2.11", "antd-mobile": "^2.2.11",
"autoprefixer": "^9.5.1",
"babel-core": "7.0.0-bridge.0", "babel-core": "7.0.0-bridge.0",
"babel-eslint": "9.0.0", "babel-eslint": "9.0.0",
"babel-jest": "23.6.0", "babel-jest": "23.6.0",
......
src/assets/theme/config.js
module.exports = function() { module.exports = function() {
return { return {
"@brand-primary": 'green' "brand-primary": 'green'
} }
} }
\ No newline at end of file
src/components/my/index.js
import React, { Component } from 'react'; import React, { Component } from 'react';
import { Flex, WhiteSpace, NavBar } from 'antd-mobile'; import { Flex, WhiteSpace, NavBar, List } from 'antd-mobile';
import './index.scss'; import './index.scss';
import Avatar from './image/avatar.png';
import Vip from './image/vip.png';
import UnVip from './image/unVIP.png';
const Item = List.Item;
const Brief = Item.Brief;
class My extends Component { class My extends Component {
...@@ -9,17 +15,79 @@ class My extends Component { ...@@ -9,17 +15,79 @@ class My extends Component {
<div className="flex-container"> <div className="flex-container">
<Flex> <Flex>
<Flex.Item> <Flex.Item>
<div >
<NavBar <NavBar
className="my-tab" className="my-tab"
mode="light" mode="light"
onLeftClick={() => console.log('onLeftClick')}
rightContent={[
]}
> >
我的 我的
</NavBar> </NavBar>
</div> {/* <List className="my-list">
<Item
className="avatar-wrap"
arrow="horizontal"
multipleLine
thumb={Avatar}
onClick={() => { }}>
<Brief>点击登录</Brief>
</Item>
</List> */}
<List className="my-list">
<Item
className="avatar-wrap"
arrow="horizontal"
multipleLine
thumb={Avatar}
onClick={() => { }}>
<Brief style={{ fontSize: "18px" }}>
xuan先生
<img src={Vip} alt=""/>
</Brief>
<Brief style={{fontSize: "12px"}}>学号: 410026</Brief>
</Item>
<div className="my-isvip"></div>
{/* <div className="my-shadow"></div> */}
</List>
<List>
<Item
arrow="horizontal"
onClick={() => { }}
>
<i className="iconfont iconiconfront-27"></i>
已购课程
</Item>
<Item
arrow="horizontal"
onClick={() => { }}
>
<i className="iconfont icongouwuche"></i>
购物车
</Item>
<Item
arrow="horizontal"
onClick={() => { }}
>
<i className="iconfont iconiconfront-24"></i>
课程订单
</Item>
<Item
arrow="horizontal"
onClick={() => { }}
>
<i className="iconfont iconiconfront-52"></i>
优惠券
</Item>
</List>
<List renderHeader={() => ''} >
<Item
arrow="horizontal"
onClick={() => { }}
>
<i className="iconfont iconiconfront-51"></i>
赚奖学金
</Item>
</List>
</Flex.Item> </Flex.Item>
</Flex> </Flex>
<WhiteSpace size="lg" /> <WhiteSpace size="lg" />
......
src/components/my/index.scss
...@@ -2,5 +2,66 @@ ...@@ -2,5 +2,66 @@
width: 100%; width: 100%;
height: 44px; height: 44px;
font-size: $font_16; font-size: $font_16;
background: #f7f9fc; background: $bg_f7f9fc;
}
.my-list{
.avatar-wrap{
padding: 15px 20px;
}
}
.my-isvip{
width: 100%;
height: 48px;
background-image: url("./image/vip_bg.png");
background-size: cover;
background-repeat: no-repeat;
border-radius: 3px;
}
.my-stu{
font-size: 12px;
}
// 修改List组件默认样式
.am-list-item{
padding-left: 22px;
padding-right: 8px;
}
.am-list-item .am-list-line-multiple{
padding-right: 0px !important;
}
.am-list-thumb{
img{
width: 64px;
height: 64px;
}
}
.am-list-brief{
color: $color_333 !important;
}
.am-list-header{
padding: 2.5px 0;
}
.am-list-content{
i{
vertical-align: middle;
margin-top: -1px;
display: inline-block;
margin-right: 12px;
margin: 10px 12px 10px 0;
font-size: 30px !important;
}
}
.am-list-line-multiple::after{
background-color: transparent !important;
}
.my-list{
.am-list-body::after{
background-color: transparent !important;
}
}
.am-list-body::before{
background-color: transparent !important;
height: 0 !important;
} }
\ No newline at end of file
src/styles/variable.scss
...@@ -34,7 +34,7 @@ $bg_fff: #fff; ...@@ -34,7 +34,7 @@ $bg_fff: #fff;
$bg_000: #000; $bg_000: #000;
$bg_f4f4f4: #f4f4f4; $bg_f4f4f4: #f4f4f4;
$bg_f5f5f5: #f5f5f5; $bg_f5f5f5: #f5f5f5;
$body-bg: #fff; $bg_f7f9fc: #f7f9fc;
/* /*
......
yarn.lock
...@@ -1591,7 +1591,7 @@ atob@^2.1.1: ...@@ -1591,7 +1591,7 @@ atob@^2.1.1:
resolved "https://registry.yarnpkg.com/atob/-/atob-2.1.2.tgz#6d9517eb9e030d2436666651e86bd9f6f13533c9" resolved "https://registry.yarnpkg.com/atob/-/atob-2.1.2.tgz#6d9517eb9e030d2436666651e86bd9f6f13533c9"
integrity sha512-Wm6ukoaOGJi/73p/cl2GvLjTI5JM1k/O14isD73YML8StrH/7/lRFgmg8nICZgD3bZZvjwCGxtMOD3wWNAu8cg== integrity sha512-Wm6ukoaOGJi/73p/cl2GvLjTI5JM1k/O14isD73YML8StrH/7/lRFgmg8nICZgD3bZZvjwCGxtMOD3wWNAu8cg==
autoprefixer@^9.4.2: autoprefixer@^9.4.2, autoprefixer@^9.5.1:
version "9.5.1" version "9.5.1"
resolved "https://registry.yarnpkg.com/autoprefixer/-/autoprefixer-9.5.1.tgz#243b1267b67e7e947f28919d786b50d3bb0fb357" resolved "https://registry.yarnpkg.com/autoprefixer/-/autoprefixer-9.5.1.tgz#243b1267b67e7e947f28919d786b50d3bb0fb357"
integrity sha512-KJSzkStUl3wP0D5sdMlP82Q52JLy5+atf2MHAre48+ckWkXgixmfHyWmA77wFDy6jTHU6mIgXv6hAQ2mf1PjJQ== integrity sha512-KJSzkStUl3wP0D5sdMlP82Q52JLy5+atf2MHAre48+ckWkXgixmfHyWmA77wFDy6jTHU6mIgXv6hAQ2mf1PjJQ==
......
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