Iron_Felix/awesome-compose
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

add react-express-mysql application sample

Browse source 
Signed-off-by: Anca Iordache <anca.iordache@docker.com>
This commit is contained in:
Anca Iordache 2020-03-05 18:40:44 +01:00
parent 0d06c37791
commit 43f21f2d8d
46 changed files with 4786 additions and 0 deletions
Download patch file Download diff file Expand all files Collapse all files

231
samples/react-express-mysql/frontend/webpack/config-builder.js vendored Executable file
View file

@ -0,0 +1,231 @@
'use strict';
const path = require('path'),
webpack = require('webpack'),
HtmlWebpackPlugin = require('html-webpack-plugin'),
MiniCssExtractPlugin = require("mini-css-extract-plugin");
const PROJECT_ROOT = path.resolve(__dirname, "..");
module.exports = (env) => {
const isDev = env === 'development';
const isTest = env === 'test';
const isProd = !isDev && !isTest;
const getAppEntry = () => {
const appEntry = path.resolve(PROJECT_ROOT, "src/app/entry.jsx");
if(isDev) {
return [
'react-hot-loader/patch',
'webpack-dev-server/client?http://localhost:9000',
'webpack/hot/only-dev-server',
appEntry
]
} else {
return [appEntry]
}
};
const getPlugins = () => {
// common plugins
let plugins = [
// Global variables
new webpack.DefinePlugin({
'process.env.NODE_ENV': JSON.stringify(env),
'__DEV__': isDev,
'__PROD__': isProd,
'__TEST__': isTest,
}),
// ignore moment locale files
new webpack.IgnorePlugin(/^\.\/locale$/, /moment$/),
// extract styles to css file
new MiniCssExtractPlugin({
filename: "[name].[contenthash].css",
chunkFilename: "[id].css",
disable: isDev,
}),
// makes index.html
new HtmlWebpackPlugin({
template: path.resolve(PROJECT_ROOT, 'src/index.ejs'),
})
];
// development plugins
if(isDev) {
plugins.push(
// Hot Reload (HMR)
new webpack.HotModuleReplacementPlugin(),
// Named Modules
new webpack.NamedModulesPlugin()
);
}
// production plugins
if(isProd) {
plugins.push(
new webpack.optimize.ModuleConcatenationPlugin()
);
}
return plugins;
};
return {
target: 'web',
mode: isProd ? "production" : "development",
context: PROJECT_ROOT,
entry: {
app: getAppEntry()
},
output: {
path: path.resolve(PROJECT_ROOT, isProd ? 'dist' : 'build'),
filename: isProd ? '[name].[chunkhash:8].js' : '[name].js',
publicPath: '/',
sourceMapFilename: '[file].map',
chunkFilename: isProd ? '[name].[chunkhash:8].js' : '[name].js',
pathinfo: isDev
},
devtool: isProd ? "hidden-sourcemap" : 'eval',
resolve: {
extensions: ['.js', '.jsx', '.ts', '.tsx'],
modules: ["node_modules", "src"],
alias: {}
},
module: {
rules: [
// JS / JSX files
{
test: /\.(js|jsx)$/,
exclude: /(node_modules)/,
use: [
{
loader: 'babel-loader',
options: {
cacheDirectory: true
}
}
]
},
// SASS files
{
test: /\.scss$/,
exclude: /(node_modules|bower_components)/,
use: [
isDev ? "style-loader" : MiniCssExtractPlugin.loader,
{
loader: "css-loader",
options: {
importLoaders: 2,
url: true,
import: false,
sourceMap: isDev
}
},
{
loader: "postcss-loader",
options: {
sourceMap: isDev,
plugins: isDev ? [] : [
require("autoprefixer"),
require("cssnano")({
safe: true,
zindex: false,
discardComments: {
removeAll: true
}
})
]
}
},
{
loader: "sass-loader",
options: {
sourceMap: isDev,
includePaths: [".", path.join(process.cwd(), "src/app/core/styles")]
}
}
]
},
// Plain CSS files
{
test: /\.css$/,
use: [
isDev ? "style-loader" : MiniCssExtractPlugin.loader,
{
loader: "css-loader",
options: {
importLoaders: 1,
url: true,
import: false,
sourceMap: isDev
}
},
{
loader: "postcss-loader",
options: {
sourceMap: isDev,
plugins: isDev ? [] : [
require("autoprefixer"),
require("cssnano")({
safe: true,
zindex: false,
discardComments: {
removeAll: true
}
})
]
}
}
]
},
// images loader
{
test: /\.(png|jpe?g|gif|svg|ico)(\?.*)?$/,
use: [
{
loader: 'file-loader',
options: {
name: "[name].[ext]",
outputPath: isProd ? "../images/" : "images/"
}
}
]
},
// font loader
{
test: /\.(woff|woff2|ttf|eot)(\?.*)?$/,
use: [
{
loader: 'file-loader',
options: {
name: "[name].[ext]",
publicPath: isProd ? "" : "/webpack/",
useRelativePath: isProd,
outputPath: isProd ? "../fonts/" : "fonts/"
}
}
]
}
]
},
plugins: getPlugins(),
node: {
__filename: true,
__dirname: true,
fs: 'empty',
vm: 'empty',
net: 'empty',
tls: 'empty',
}
};
};