tabshift/payload
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

renames client to admin, sets up component library

Browse Source
This commit is contained in:
James
2020-10-10 18:28:17 -04:00
parent e88be6b251
commit 84191ec8fd
397 changed files with 2042 additions and 579 deletions
Download Patch File Download Diff File Expand all files Collapse all files

88
src/webpack/components.config.js Normal file
View File

@@ -0,0 +1,88 @@
const path = require('path');
const MiniCSSExtractPlugin = require('mini-css-extract-plugin');
const TerserJSPlugin = require('terser-webpack-plugin');
const OptimizeCSSAssetsPlugin = require('optimize-css-assets-webpack-plugin');
const babelConfig = require('../../babel.config');
module.exports = {
entry: {
main: [path.resolve(__dirname, '../admin/components/index.js')],
},
externals: {
react: 'react',
},
output: {
path: path.resolve(__dirname, '../../components'),
publicPath: '/',
filename: 'index.js',
libraryTarget: 'commonjs2',
},
optimization: {
minimizer: [new TerserJSPlugin({
extractComments: false,
}), new OptimizeCSSAssetsPlugin({})],
},
mode: 'production',
stats: 'errors-only',
module: {
rules: [
{
test: /\.js$/,
exclude: /node_modules/,
use: {
loader: 'babel-loader',
options: babelConfig,
},
},
{
oneOf: [
{
test: [/\.bmp$/, /\.gif$/, /\.jpe?g$/, /\.png$/],
loader: require.resolve('url-loader'),
options: {
limit: 10000,
name: 'static/media/[name].[hash:8].[ext]',
},
},
{
test: /\.(sa|sc|c)ss$/,
use: [
MiniCSSExtractPlugin.loader,
'css-loader',
{
loader: 'postcss-loader',
options: {
postcssOptions: {
plugins: [
'postcss-preset-env',
],
},
},
},
'sass-loader',
],
},
{
exclude: [/\.(js|jsx|mjs)$/, /\.html$/, /\.json$/],
loader: require.resolve('file-loader'),
options: {
name: 'static/media/[name].[hash:8].[ext]',
},
},
],
},
],
},
plugins: [
new MiniCSSExtractPlugin({
filename: 'styles.css',
ignoreOrder: true,
}),
],
resolve: {
alias: {
'payload-scss-overrides': path.resolve(__dirname, '../admin/scss/overrides.scss'),
},
modules: ['node_modules', path.resolve(__dirname, '../../node_modules')],
},
};

9
src/webpack/getStyleLoaders.js
View File

@@ -1,6 +1,6 @@
module.exports = (cssOptions, preProcessor) => {
const loaders = [
require.resolve('style-loader'),
'isomorphic-style-loader',
{
loader: require.resolve('css-loader'),
options: cssOptions,
@@ -16,12 +16,7 @@ module.exports = (cssOptions, preProcessor) => {
ident: 'postcss',
plugins: () => [
require('postcss-flexbugs-fixes'),
require('postcss-preset-env')({
autoprefixer: {
flexbox: 'no-2009',
},
stage: 3,
}),
require('postcss-preset-env'),
],
},
},

56
src/webpack/getWebpackDevConfig.js
View File

@@ -1,7 +1,7 @@
const HtmlWebpackPlugin = require('html-webpack-plugin');
const path = require('path');
const webpack = require('webpack');
const getStyleLoaders = require('./getStyleLoaders');
const MiniCSSExtractPlugin = require('mini-css-extract-plugin');
const babelConfig = require('../../babel.config');
const mockModulePath = path.resolve(__dirname, '../mocks/emptyModule.js');
@@ -11,7 +11,7 @@ module.exports = (config) => {
entry: {
main: [
'webpack-hot-middleware/client',
path.resolve(__dirname, '../client/components/index.js'),
path.resolve(__dirname, '../admin/index.js'),
],
},
output: {
@@ -19,7 +19,7 @@ module.exports = (config) => {
publicPath: config.routes.admin,
filename: '[name].js',
},
devtool: 'source-map',
devtool: 'inline-cheap-source-map',
mode: 'development',
resolveLoader: { modules: ['node_modules', path.join(__dirname, '../../node_modules')] },
module: {
@@ -32,23 +32,10 @@ module.exports = (config) => {
loader: 'babel-loader',
options: babelConfig,
},
// {
// loader: 'eslint-loader',
// options: {
// fix: true,
// emitWarning: true,
// },
// }
],
},
{
// "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'),
@@ -57,23 +44,25 @@ module.exports = (config) => {
name: 'static/media/[name].[hash:8].[ext]',
},
},
// Opt-in support for SASS (using .scss or .sass extensions).
// Chains the sass-loader with the css-loader and the style-loader
// to immediately apply all styles to the DOM.
{
test: /\.(scss|sass|css)$/,
use: getStyleLoaders({ importLoaders: 2 }, 'sass-loader'),
test: /\.(sa|sc|c)ss$/,
use: [
MiniCSSExtractPlugin.loader,
'css-loader',
{
loader: 'postcss-loader',
options: {
postcssOptions: {
plugins: [
'postcss-preset-env',
],
},
},
},
'sass-loader',
],
},
// "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.
{
// Exclude `js` files to keep "css" loader working as it injects
// its runtime that would otherwise processed through "file" loader.
// Also exclude `html` and `json` extensions so they get processed
// by webpacks internal loaders.
exclude: [/\.(js|jsx|mjs)$/, /\.html$/, /\.json$/],
loader: require.resolve('file-loader'),
options: {
@@ -99,10 +88,13 @@ module.exports = (config) => {
new HtmlWebpackPlugin({
template: config.admin && config.admin.indexHTML
? path.join(config.paths.configDir, config.admin.indexHTML)
: path.resolve(__dirname, '../client/index.html'),
: path.resolve(__dirname, '../admin/index.html'),
filename: './index.html',
}),
new webpack.HotModuleReplacementPlugin(),
new MiniCSSExtractPlugin({
ignoreOrder: true,
}),
],
};
@@ -115,7 +107,7 @@ module.exports = (config) => {
if (config.paths.scss) {
webpackConfig.resolve.alias['payload-scss-overrides'] = path.join(config.paths.configDir, config.paths.scss);
} else {
webpackConfig.resolve.alias['payload-scss-overrides'] = path.resolve(__dirname, '../client/scss/overrides.scss');
webpackConfig.resolve.alias['payload-scss-overrides'] = path.resolve(__dirname, '../admin/scss/overrides.scss');
}
if (config.webpack && typeof config.webpack === 'function') {

70
src/webpack/getWebpackProdConfig.js
View File

@@ -1,8 +1,10 @@
const HtmlWebpackPlugin = require('html-webpack-plugin');
const TerserJSPlugin = require('terser-webpack-plugin');
const MiniCSSExtractPlugin = require('mini-css-extract-plugin');
const OptimizeCSSAssetsPlugin = require('optimize-css-assets-webpack-plugin');
const { BundleAnalyzerPlugin } = require('webpack-bundle-analyzer');
const path = require('path');
const webpack = require('webpack');
const getStyleLoaders = require('./getStyleLoaders');
const babelConfig = require('../../babel.config');
const mockModulePath = path.resolve(__dirname, '../mocks/emptyModule.js');
@@ -10,7 +12,7 @@ const mockModulePath = path.resolve(__dirname, '../mocks/emptyModule.js');
module.exports = (config) => {
let webpackConfig = {
entry: {
main: [path.resolve(__dirname, '../client/components/index.js')],
main: [path.resolve(__dirname, '../admin/index.js')],
},
output: {
path: path.resolve(process.cwd(), 'build'),
@@ -19,6 +21,21 @@ module.exports = (config) => {
chunkFilename: '[name].[chunkhash].js',
},
mode: 'production',
devtool: 'source-map',
stats: 'errors-only',
optimization: {
minimizer: [new TerserJSPlugin({}), new OptimizeCSSAssetsPlugin({})],
splitChunks: {
cacheGroups: {
styles: {
name: 'styles',
test: /\.(sa|sc|c)ss$/,
chunks: 'all',
enforce: true,
},
},
},
},
resolveLoader: { modules: ['node_modules', path.join(__dirname, '../../node_modules')] },
module: {
rules: [
@@ -31,13 +48,7 @@ module.exports = (config) => {
},
},
{
// "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'),
@@ -46,23 +57,30 @@ module.exports = (config) => {
name: 'static/media/[name].[hash:8].[ext]',
},
},
// Opt-in support for SASS (using .scss or .sass extensions).
// Chains the sass-loader with the css-loader and the style-loader
// to immediately apply all styles to the DOM.
{
test: /\.(scss|sass|css)$/,
use: getStyleLoaders({ importLoaders: 2 }, 'sass-loader'),
test: /\.(sa|sc|c)ss$/,
use: [
MiniCSSExtractPlugin.loader,
'css-loader',
{
loader: 'postcss-loader',
options: {
postcssOptions: {
plugins: [
[
'postcss-preset-env',
{
// Options
},
],
],
},
},
},
'sass-loader',
],
},
// "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.
{
// Exclude `js` files to keep "css" loader working as it injects
// its runtime that would otherwise processed through "file" loader.
// Also exclude `html` and `json` extensions so they get processed
// by webpacks internal loaders.
exclude: [/\.(js|jsx|mjs)$/, /\.html$/, /\.json$/],
loader: require.resolve('file-loader'),
options: {
@@ -84,7 +102,7 @@ module.exports = (config) => {
new HtmlWebpackPlugin({
template: config.admin && config.admin.indexHTML
? path.join(config.paths.configDir, config.admin.indexHTML)
: path.resolve(__dirname, '../client/index.html'),
: path.resolve(__dirname, '../admin/index.html'),
filename: './index.html',
minify: true,
}),
@@ -92,6 +110,10 @@ module.exports = (config) => {
...values,
[`process.env.${key}`]: `'${val}'`,
}), {})),
new MiniCSSExtractPlugin({
filename: '[name].css',
ignoreOrder: true,
}),
],
};
@@ -108,7 +130,7 @@ module.exports = (config) => {
if (config.paths.scss) {
webpackConfig.resolve.alias['payload-scss-overrides'] = path.join(config.paths.configDir, config.paths.scss);
} else {
webpackConfig.resolve.alias['payload-scss-overrides'] = path.resolve(__dirname, '../client/scss/overrides.scss');
webpackConfig.resolve.alias['payload-scss-overrides'] = path.resolve(__dirname, '../admin/scss/overrides.scss');
}
if (config.webpack && typeof config.webpack === 'function') {

1
src/webpack/init.js
View File

@@ -12,6 +12,7 @@ function initWebpack() {
router.use(webpackDevMiddleware(compiler, {
publicPath: webpackDevConfig.output.publicPath,
stats: 'errors-only',
}));
router.use(webpackHotMiddleware(compiler));