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

binds all API routes to api prefix route, refactors to support

Browse Source
This commit is contained in:
James
2020-04-01 15:21:31 -04:00
parent 0da9b02e94
commit 49ebdaa1ec
45 changed files with 244 additions and 238 deletions
Download Patch File Download Diff File Expand all files Collapse all files

33
src/webpack/getStyleLoaders.js Normal file
View File

@@ -0,0 +1,33 @@
module.exports = (cssOptions, preProcessor) => {
const loaders = [
require.resolve('style-loader'),
{
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,
}),
],
},
},
];
if (preProcessor) {
loaders.push(require.resolve(preProcessor));
}
return loaders;
};

134
src/webpack/getWebpackDevConfig.js Normal file
View File

@@ -0,0 +1,134 @@
const HtmlWebpackPlugin = require('html-webpack-plugin');
const path = require('path');
const webpack = require('webpack');
const getStyleLoaders = require('./getStyleLoaders');
module.exports = (config) => {
return {
entry: {
main: [
path.resolve(__dirname, '../../node_modules/webpack-hot-middleware/client?path=/__webpack_hmr&timeout=20000'),
path.resolve(__dirname, '../client/components/index.js'),
],
},
output: {
path: '/',
publicPath: '/static',
filename: '[name].js',
},
devServer: {
historyApiFallback: true,
},
devtool: 'source-map',
mode: 'development',
node: {
__dirname: true,
},
resolveLoader: { modules: [path.join(__dirname, '../../node_modules')] },
module: {
rules: [
{
test: require.resolve('../client/components/customComponents'),
use: [
{
loader: 'val-loader',
options: config,
},
],
},
{
test: require.resolve('../client/securedConfig'),
use: [
{
loader: 'val-loader',
options: config,
},
],
},
{
test: /\.js$/,
exclude: /node_modules/,
use: {
loader: 'babel-loader',
options: {
presets: [
[
require.resolve('@babel/preset-env'),
{
modules: 'commonjs',
},
],
require.resolve('@babel/preset-react'),
],
plugins: [
require.resolve('@babel/plugin-proposal-class-properties'),
require.resolve('@babel/plugin-proposal-optional-chaining'),
require.resolve('babel-plugin-add-module-exports'),
[
require.resolve('@babel/plugin-transform-runtime'),
{
regenerator: 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'),
options: {
limit: 10000,
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'),
},
// "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: {
name: 'static/media/[name].[hash:8].[ext]',
},
},
],
},
],
},
plugins: [
new HtmlWebpackPlugin({
template: path.resolve(__dirname, '../client/index.html'),
filename: './index.html',
}),
new webpack.HotModuleReplacementPlugin(),
],
resolve: {
modules: ['node_modules', path.resolve(__dirname, '../../node_modules')],
alias: {
'payload-scss-overrides': config.paths.scssOverrides,
},
},
};
};

103
src/webpack/getWebpackProdConfig.js Normal file
View File

@@ -0,0 +1,103 @@
const HtmlWebpackPlugin = require('html-webpack-plugin');
const path = require('path');
const getStyleLoaders = require('./getStyleLoaders');
module.exports = (config) => {
return {
entry: {
main: [path.resolve(__dirname, '../components/index.js')],
},
output: {
path: path.resolve(process.cwd(), 'build'),
filename: '[name].[chunkhash].js',
},
mode: 'production',
resolveLoader: { modules: [path.join(__dirname, '../../../node_modules')] },
module: {
rules: [
{
test: /\.js$/,
exclude: /node_modules/,
use: {
loader: 'babel-loader',
options: {
presets: [
[
require.resolve('@babel/preset-env'),
{
modules: 'commonjs',
},
],
require.resolve('@babel/preset-react'),
],
plugins: [
require.resolve('@babel/plugin-proposal-class-properties'),
require.resolve('babel-plugin-add-module-exports'),
[
require.resolve('@babel/plugin-transform-runtime'),
{
regenerator: 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'),
options: {
limit: 10000,
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)$/,
use: getStyleLoaders({ importLoaders: 2 }, '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: {
name: 'static/media/[name].[hash:8].[ext]',
},
},
],
},
],
},
plugins: [
new HtmlWebpackPlugin({
template: path.resolve(__dirname, '../index.html'),
filename: './index.html',
minify: true,
}),
],
resolve: {
modules: ['node_modules', path.resolve(__dirname, '../../../node_modules')],
alias: {
'payload-scss-overrides': config.paths.scssOverrides,
},
},
};
};

31
src/webpack/init.js Normal file
View File

@@ -0,0 +1,31 @@
const webpack = require('webpack');
const express = require('express');
const webpackDevMiddleware = require('webpack-dev-middleware');
const webpackHotMiddleware = require('webpack-hot-middleware');
const getWebpackDevConfig = require('./getWebpackDevConfig');
const router = express.Router();
const initWebpack = (config) => {
const webpackDevConfig = getWebpackDevConfig(config);
const compiler = webpack(webpackDevConfig);
router.use(webpackDevMiddleware(compiler, {
publicPath: webpackDevConfig.output.publicPath,
}));
router.use(webpackHotMiddleware(compiler));
router.get(`${config.routes.admin}*`, (req, res, next) => {
compiler.outputFileSystem.readFile('/index.html', (err, result) => {
if (err) {
return next(err);
}
return res.set('content-type', 'text/html').send(result);
});
});
return router;
};
module.exports = initWebpack;