Añadir plantilla

Base para front

4 files changed, 561 insertions, 0 deletions

diff --git a/front/odiparpack/internals/webpack/webpack.base.babel.js b/front/odiparpack/internals/webpack/webpack.base.babel.js
new file mode 100644
index 0000000..ca26c12
--- /dev/null
+++ b/front/odiparpack/internals/webpack/webpack.base.babel.js
@@ -0,0 +1,205 @@
+/**
+ * COMMON WEBPACK CONFIGURATION
+ */
+
+const path = require('path');
+const webpack = require('webpack');
+
+const HappyPack = require('happypack');
+const happyThreadPool = HappyPack.ThreadPool({ size: 5 });
+
+module.exports = options => ({
+  mode: options.mode,
+  entry: options.entry,
+  output: Object.assign(
+    {
+      // Compile into js/build.js
+      path: path.resolve(process.cwd(), 'build'),
+      publicPath: '/',
+    },
+    options.output,
+  ), // Merge with env dependent settings
+  devServer: {
+    inline: false,
+  },
+  optimization: options.optimization,
+  module: {
+    rules: [
+      /*
+        Disabled eslint by default.
+        You can enable it to maintain and keep clean your code.
+        NOTE: By enable eslint running app process at beginning will slower
+      */
+      //      {
+      //        enforce: 'pre',
+      //        test: /\.js?$/,
+      //        exclude: [/node_modules/],
+      //        loader: 'eslint-loader',
+      //        options: {
+      //          quiet: true
+      //        }
+      //      },
+      {
+        test: /\.jsx?$/, // Transform all .js files required somewhere with Babel
+        exclude: /node_modules/,
+        use: {
+          loader: 'happypack/loader?id=js',
+          options: options.babelQuery,
+        },
+      },
+      {
+        // Preprocess our own .css files
+        // This is the place to add your own loaders (e.g. sass/less etc.)
+        // for a list of loaders, see https://webpack.js.org/loaders/#styling
+        test: /\.css$/,
+        exclude: /node_modules/,
+        use: ['style-loader', 'css-loader'],
+      },
+      {
+        // Preprocess 3rd party .css files located in node_modules
+        test: /\.css$/,
+        include: /node_modules/,
+        use: ['style-loader', 'css-loader'],
+      },
+      {
+        test: /\.(eot|otf|ttf|woff|woff2)$/,
+        use: 'file-loader',
+      },
+      {
+        test: /\.(scss)$/,
+        use: [{
+          loader: 'style-loader'
+        },
+        {
+          loader: 'css-loader',
+          options:
+          {
+            sourceMap: false,
+            importLoaders: 2,
+            modules: true,
+            localIdentName: '[local]__[hash:base64:5]'
+          }
+        },
+        {
+          loader: 'postcss-loader',
+          options: {
+            sourceMap: false
+          }
+        },
+        {
+          loader: 'sass-loader',
+          options: {
+            outputStyle: 'expanded',
+            sourceMap: false
+          }
+        }],
+      },
+      {
+        test: /\.md$/,
+        use: 'raw-loader'
+      },
+      {
+        test: /\.(jpg|png|gif|svg)$/,
+        use: [
+          {
+            loader: 'url-loader',
+            options: {
+              // Inline files smaller than 10 kB
+              limit: 10 * 1024,
+            },
+          },
+          /*
+            Disabled image compression by default,
+            due error in windows 10 because libpng not available.
+            The libpng avaible on Linux and Mac system only.
+            NOTE: To enable this, first you need to install image-webpack-loader.
+            npm install -i image-webpack-loader --save
+          */
+          //  {
+          //    loader: 'image-webpack-loader',
+          //    options: {
+          //      mozjpeg: {
+          //        enabled: false,
+          //        // NOTE: mozjpeg is disabled as it causes errors in some Linux environments
+          //        // Try enabling it in your environment by switching the config to:
+          //        // enabled: true,
+          //        // progressive: true,
+          //      },
+          //      gifsicle: {
+          //        interlaced: false,
+          //      },
+          //      optipng: {
+          //        optimizationLevel: 7,
+          //      },
+          //      pngquant: {
+          //        quality: '65-90',
+          //        speed: 4,
+          //      },
+          //    },
+          //  },
+        ],
+      },
+      {
+        test: /\.html$/,
+        use: 'html-loader',
+      },
+      {
+        test: /\.(mp4|webm)$/,
+        use: {
+          loader: 'url-loader',
+          options: {
+            limit: 10000,
+          },
+        },
+      },
+    ],
+  },
+  node: {
+    fs: 'empty'
+  },
+  plugins: options.plugins.concat([
+    // Always expose NODE_ENV to webpack, in order to use `process.env.NODE_ENV`
+    // inside your code for any environment checks; Terser will automatically
+    // drop any unreachable code.
+    new HappyPack({
+      id: 'js',
+      threadPool: happyThreadPool,
+      loaders: ['babel-loader?cacheDirectory=true']
+    }),
+    new webpack.DefinePlugin({
+      'process.env': {
+        NODE_ENV: JSON.stringify(process.env.NODE_ENV),
+      },
+    }),
+    new webpack.ContextReplacementPlugin(/^\.\/locale$/, context => {
+      if (!/\/moment\//.test(context.context)) {
+        return;
+      }
+      // context needs to be modified in place
+      Object.assign(context, {
+      // include only CJK
+        regExp: /^\.\/(ja|ko|zh)/,
+        // point to the locale data folder relative to moment's src/lib/locale
+        request: './locale'
+      });
+    })
+  ]),
+  resolve: {
+    modules: ['node_modules', 'app'],
+    extensions: ['.js', '.jsx', '.react.js'],
+    mainFields: ['browser', 'jsnext:main', 'main'],
+    alias: {
+      'ba-components': path.resolve(__dirname, '../../app/components/'),
+      'ba-containers': path.resolve(__dirname, '../../app/containers/'),
+      'ba-actions': path.resolve(__dirname, '../../app/actions/'),
+      'ba-styles': path.resolve(__dirname, '../../app/styles/components/'),
+      'ba-helpers': path.resolve(__dirname, '../../app/styles/helpers/'),
+      'ba-api': path.resolve(__dirname, '../../app/api/'),
+      'ba-images': path.resolve(__dirname, '../../public/images/'),
+      'ba-vendor': path.resolve(__dirname, '../../node_modules/'),
+    }
+  },
+  devtool: options.devtool,
+  target: 'web', // Make web variables accessible to webpack, e.g. window
+  performance: options.performance || {},
+});
diff --git a/front/odiparpack/internals/webpack/webpack.dev.babel.js b/front/odiparpack/internals/webpack/webpack.dev.babel.js
new file mode 100644
index 0000000..dda13b8
--- /dev/null
+++ b/front/odiparpack/internals/webpack/webpack.dev.babel.js
@@ -0,0 +1,144 @@
+/**
+ * DEVELOPMENT WEBPACK CONFIGURATION
+ */
+
+const path = require('path');
+const fs = require('fs');
+const glob = require('glob');
+const webpack = require('webpack');
+const HtmlWebpackPlugin = require('html-webpack-plugin');
+const AddAssetHtmlPlugin = require('add-asset-html-webpack-plugin');
+const CircularDependencyPlugin = require('circular-dependency-plugin');
+const logger = require('../../server/logger');
+const pkg = require(path.resolve(process.cwd(), 'package.json')); // eslint-disable-line
+const { dllPlugin } = pkg;
+
+const plugins = [
+  new webpack.HotModuleReplacementPlugin(), // Tell webpack we want hot reloading
+  new HtmlWebpackPlugin({
+    inject: true, // Inject all files that are generated by webpack, e.g. bundle.js
+    template: 'app/index.html',
+  }),
+  new CircularDependencyPlugin({
+    exclude: /a\.js|node_modules/, // exclude node_modules
+    failOnError: false, // show a warning when there is a circular dependency
+  }),
+];
+
+if (dllPlugin) {
+  glob.sync(`${dllPlugin.path}/*.dll.js`).forEach(dllPath => {
+    plugins.push(
+      new AddAssetHtmlPlugin({
+        filepath: dllPath,
+        includeSourcemap: false,
+      }),
+    );
+  });
+}
+
+module.exports = require('./webpack.base.babel')({
+  mode: 'development',
+
+  // Add hot reloading in development
+  entry: [
+    'eventsource-polyfill', // Necessary for hot reloading with IE
+    'webpack-hot-middleware/client?reload=true',
+    path.join(process.cwd(), 'app/app.js'), // Start with js/app.js
+  ],
+
+  // Don't use hashes in dev mode for better performance
+  output: {
+    filename: '[name].js',
+    chunkFilename: '[name].chunk.js',
+  },
+
+  optimization: {
+    splitChunks: {
+      chunks: 'all',
+    },
+  },
+
+  // Add development plugins
+  plugins: dependencyHandlers().concat(plugins), // eslint-disable-line no-use-before-define
+
+  // Emit a source map for easier debugging
+  // See https://webpack.js.org/configuration/devtool/#devtool
+  devtool: 'eval-source-map',
+
+  performance: {
+    hints: false,
+  },
+});
+
+/**
+ * Select which plugins to use to optimize the bundle's handling of
+ * third party dependencies.
+ *
+ * If there is a dllPlugin key on the project's package.json, the
+ * Webpack DLL Plugin will be used.
+ *
+ */
+function dependencyHandlers() {
+  // Don't do anything during the DLL Build step
+  if (process.env.BUILDING_DLL) {
+    return [];
+  }
+
+  // Don't do anything if package.json does not have a dllPlugin property
+  // Code splitting now included by default in Webpack 4
+  if (!dllPlugin) {
+    return [];
+  }
+
+  const dllPath = path.resolve(
+    process.cwd(),
+    dllPlugin.path || 'node_modules/react-boilerplate-dlls',
+  );
+
+  /**
+   * If DLLs aren't explicitly defined, we assume all production dependencies listed in package.json
+   * Reminder: You need to exclude any server side dependencies by listing them in dllConfig.exclude
+   */
+  if (!dllPlugin.dlls) {
+    const manifestPath = path.resolve(dllPath, 'reactBoilerplateDeps.json');
+
+    if (!fs.existsSync(manifestPath)) {
+      logger.error(
+        'The DLL manifest is missing. Please run `npm run build:dll`',
+      );
+      process.exit(0);
+    }
+
+    return [
+      new webpack.DllReferencePlugin({
+        context: process.cwd(),
+        manifest: require(manifestPath), // eslint-disable-line
+      }),
+    ];
+  }
+
+  // If DLLs are explicitly defined, we automatically create a DLLReferencePlugin for each of them.
+  const dllManifests = Object.keys(dllPlugin.dlls)
+    .map(name => path.join(dllPath, `/${name}.json`));
+
+  return dllManifests.map(manifestPath => {
+    if (!fs.existsSync(path)) {
+      if (!fs.existsSync(manifestPath)) {
+        logger.error(
+          `The following Webpack DLL manifest is missing: ${path.basename(
+            manifestPath,
+          )}`,
+        );
+        logger.error(`Expected to find it in ${dllPath}`);
+        logger.error('Please run: npm run build:dll');
+
+        process.exit(0);
+      }
+    }
+
+    return new webpack.DllReferencePlugin({
+      context: process.cwd(),
+      manifest: require(manifestPath), // eslint-disable-line
+    });
+  });
+}
diff --git a/front/odiparpack/internals/webpack/webpack.dll.babel.js b/front/odiparpack/internals/webpack/webpack.dll.babel.js
new file mode 100644
index 0000000..d1ee114
--- /dev/null
+++ b/front/odiparpack/internals/webpack/webpack.dll.babel.js
@@ -0,0 +1,58 @@
+/**
+ * WEBPACK DLL GENERATOR
+ *
+ * This profile is used to cache webpack's module
+ * contexts for external library and framework type
+ * dependencies which will usually not change often enough
+ * to warrant building them from scratch every time we use
+ * the webpack process.
+ */
+
+const { join } = require('path');
+const defaults = require('lodash/defaultsDeep');
+const webpack = require('webpack');
+const pkg = require(join(process.cwd(), 'package.json')); // eslint-disable-line
+const { dllPlugin } = require('../config');
+
+if (!pkg.dllPlugin) {
+  process.exit(0);
+}
+
+const dllConfig = defaults(pkg.dllPlugin, dllPlugin.defaults);
+const outputPath = join(process.cwd(), dllConfig.path);
+
+module.exports = require('./webpack.base.babel')({
+  mode: 'development',
+  context: process.cwd(),
+  entry: dllConfig.dlls ? dllConfig.dlls : dllPlugin.entry(pkg),
+  optimization: {
+    minimize: false,
+  },
+  devtool: 'eval',
+  output: {
+    filename: '[name].dll.js',
+    path: outputPath,
+    library: '[name]',
+  },
+  plugins: [
+    new webpack.DllPlugin({
+      name: '[name]',
+      path: join(outputPath, '[name].json'),
+    }),
+    new webpack.ContextReplacementPlugin(/^\.\/locale$/, context => {
+      if (!/\/moment\//.test(context.context)) {
+        return;
+      }
+      // context needs to be modified in place
+      Object.assign(context, {
+      // include only CJK
+        regExp: /^\.\/(ja|ko|zh)/,
+        // point to the locale data folder relative to moment's src/lib/locale
+        request: './locale'
+      });
+    })
+  ],
+  performance: {
+    hints: false,
+  },
+});
diff --git a/front/odiparpack/internals/webpack/webpack.prod.babel.js b/front/odiparpack/internals/webpack/webpack.prod.babel.js
new file mode 100644
index 0000000..94ecac0
--- /dev/null
+++ b/front/odiparpack/internals/webpack/webpack.prod.babel.js
@@ -0,0 +1,154 @@
+// Important modules this config uses
+const path = require('path');
+const HtmlWebpackPlugin = require('html-webpack-plugin');
+const WebpackPwaManifest = require('webpack-pwa-manifest');
+const OfflinePlugin = require('offline-plugin');
+const { HashedModuleIdsPlugin } = require('webpack');
+const TerserPlugin = require('terser-webpack-plugin');
+const CompressionPlugin = require('compression-webpack-plugin');
+
+module.exports = require('./webpack.base.babel')({
+  mode: 'production',
+
+  // In production, we skip all hot-reloading stuff
+  entry: [
+    require.resolve('react-app-polyfill/ie11'),
+    path.join(process.cwd(), 'app/app.js'),
+  ],
+
+  // Utilize long-term caching by adding content hashes (not compilation hashes) to compiled assets
+  output: {
+    filename: '[name].[chunkhash].js',
+    chunkFilename: '[name].[chunkhash].chunk.js',
+  },
+
+  optimization: {
+    minimize: true,
+    minimizer: [
+      new TerserPlugin({
+        terserOptions: {
+          warnings: false,
+          compress: {
+            comparisons: false,
+          },
+          parse: {},
+          mangle: true,
+          output: {
+            comments: false,
+            ascii_only: true,
+          },
+        },
+        parallel: true,
+        cache: true,
+        sourceMap: true,
+      }),
+    ],
+    nodeEnv: 'production',
+    sideEffects: true,
+    concatenateModules: true,
+    splitChunks: {
+      chunks: 'all',
+      minSize: 30000,
+      minChunks: 1,
+      maxAsyncRequests: 5,
+      maxInitialRequests: 3,
+      name: true,
+      cacheGroups: {
+        commons: {
+          test: /[\\/]node_modules[\\/]/,
+          name: 'vendor',
+          chunks: 'all',
+        },
+        main: {
+          chunks: 'all',
+          minChunks: 2,
+          reuseExistingChunk: true,
+          enforce: true,
+        },
+      },
+    },
+    runtimeChunk: true,
+  },
+
+  plugins: [
+    // Minify and optimize the index.html
+    new HtmlWebpackPlugin({
+      template: 'app/index.html',
+      minify: {
+        removeComments: true,
+        collapseWhitespace: true,
+        removeRedundantAttributes: true,
+        useShortDoctype: true,
+        removeEmptyAttributes: true,
+        removeStyleLinkTypeAttributes: true,
+        keepClosingSlash: true,
+        minifyJS: true,
+        minifyCSS: true,
+        minifyURLs: true,
+      },
+      inject: true,
+    }),
+
+    // Put it in the end to capture all the HtmlWebpackPlugin's
+    // assets manipulations and do leak its manipulations to HtmlWebpackPlugin
+    new OfflinePlugin({
+      relativePaths: false,
+      publicPath: '/',
+      appShell: '/',
+
+      // No need to cache .htaccess. See http://mxs.is/googmp,
+      // this is applied before any match in `caches` section
+      excludes: ['.htaccess'],
+
+      caches: {
+        main: [':rest:'],
+
+        // All chunks marked as `additional`, loaded after main section
+        // and do not prevent SW to install. Change to `optional` if
+        // do not want them to be preloaded at all (cached only when first loaded)
+        additional: ['*.chunk.js'],
+      },
+
+      // Removes warning for about `additional` section usage
+      safeToUseOptionalCaches: true,
+    }),
+
+    new CompressionPlugin({
+      algorithm: 'gzip',
+      test: /\.js$|\.css$|\.html$/,
+      threshold: 10240,
+      minRatio: 0.8,
+    }),
+
+    new WebpackPwaManifest({
+      name: 'React Boilerplate',
+      short_name: 'React BP',
+      description: 'My React Boilerplate-based project!',
+      background_color: '#fafafa',
+      theme_color: '#b1624d',
+      inject: true,
+      ios: true,
+      cons: [
+        {
+          src: path.resolve('public/images/logo.png'),
+          sizes: [72, 96, 128, 144, 192, 384, 512],
+        },
+        {
+          src: path.resolve('public/images/logo.png'),
+          sizes: [120, 152, 167, 180],
+          ios: true,
+        },
+      ],
+    }),
+
+    new HashedModuleIdsPlugin({
+      hashFunction: 'sha256',
+      hashDigest: 'hex',
+      hashDigestLength: 20,
+    }),
+  ],
+
+  performance: {
+    assetFilter: assetFilename => !/(\.map$)|(^(main\.|favicon\.))/.test(assetFilename),
+  },
+});