strapi/packages/strapi-generate-admin/files/admin/public/internals/webpack/webpack.dev.babel.js

/**
 * DEVELOPMENT WEBPACK CONFIGURATION
 */

const path = require('path');
const fs = require('fs');
const webpack = require('webpack');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const logger = require('../../server/logger');
const cheerio = require('cheerio');
const pkg = require(path.resolve(process.cwd(), 'package.json'));
const dllPlugin = pkg.dllPlugin;
const argv = require('minimist')(process.argv.slice(2));
const _ = require('lodash');

// PostCSS plugins
const cssnext = require('postcss-cssnext');
const postcssFocus = require('postcss-focus');
const postcssReporter = require('postcss-reporter');

const plugins = [
  new webpack.HotModuleReplacementPlugin(), // Tell webpack we want hot reloading
  new webpack.NoErrorsPlugin(),
  new HtmlWebpackPlugin({
    favicon: 'app/favicon.ico',
    inject: true, // Inject all files that are generated by webpack, e.g. bundle.js
    templateContent: templateContent(), // eslint-disable-line no-use-before-define
  }),
];

module.exports = require('./webpack.base.babel')({
  // Add hot reloading in development
  entry: [
    'eventsource-polyfill', // Necessary for hot reloading with IE
    'webpack-hot-middleware/client',
    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',
    publicPath: `http://127.0.0.1:${argv.port || process.env.PORT || 4000}/`,
  },

  // Add development plugins
  plugins: dependencyHandlers().concat(plugins), // eslint-disable-line no-use-before-define

  // Load the SCSS in a style tag in development
  cssLoaders: 'style-loader!css-loader?localIdentName=[local]__[path][name]__[hash:base64:5]&modules&importLoaders=1&sourceMap!postcss-loader!sass-loader',

  // Process the CSS with PostCSS
  postcssPlugins: [
    postcssFocus(), // Add a :focus to every :hover
    cssnext({ // Allow future CSS features to be used, also auto-prefixes the CSS...
      browsers: ['last 2 versions', 'IE > 10'], // ...based on this browser list
    }),
    postcssReporter({ // Posts messages from plugins to the terminal
      clearMessages: true,
    }),
  ],

  // Tell babel that we want to hot-reload
  babelQuery: {
    presets: ['react-hmre'],
  },

  // Emit a source map for easier debugging
  devtool: 'cheap-module-eval-source-map',

  // Generate translations files
  generateTranslationFiles: generateTranslationFiles(),
});

/**
 * 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.  Otherwise the CommonsChunkPlugin
 * will be used.
 *
 */
function dependencyHandlers() {
  // Don't do anything during the DLL Build step
  if (process.env.BUILDING_DLL) { return []; }

  // If the package.json does not have a dllPlugin property, use the CommonsChunkPlugin
  if (!dllPlugin) {
    return [
      new webpack.optimize.CommonsChunkPlugin({
        name: 'vendor',
        children: true,
        minChunks: 2,
        async: true,
      }),
    ];
  }

  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
   *
   * @see https://github.com/mxstbr/react-boilerplate/tree/master/docs/general/webpack.md
   */
  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 global-require
      }),
    ];
  }

  // 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 global-require
    });
  });
}

/**
 * We dynamically generate the HTML content in development so that the different
 * DLL Javascript files are loaded in script tags and available to our application.
 */
function templateContent() {
  const html = fs.readFileSync(
    path.resolve(process.cwd(), 'app/index.html')
  ).toString();

  if (!dllPlugin) { return html; }

  const doc = cheerio(html);
  const body = doc.find('body');
  const dllNames = !dllPlugin.dlls ? ['reactBoilerplateDeps'] : Object.keys(dllPlugin.dlls);

  dllNames.forEach(dllName => body.append(`<script data-dll='true' src='/${dllName}.dll.js'></script>`));

  return doc.toString();
}

/**
 * Generate translation files according
 * to `messages.json` included in the app.
 */
function generateTranslationFiles() {
  // App directory
  const appDirectory = path.resolve(process.cwd(), 'app');

  // Find `message.json` files in the app
  findMessagesFiles(appDirectory, (err, messageFiles) => {
    if (err) {
      return;
    }

    // Format messages found
    const messagesFormatted = formatMessages(messageFiles);

    // Get the list of languages supported by this plugin
    const pluginLanguages = getPluginLanguages();

    // Get current translations values
    const currentTranslationsValues = getCurrentTranslationsValues(pluginLanguages);

    // Update translations values
    const updatedTranslationValues = getUpdatedTranslationValues(currentTranslationsValues, messagesFormatted);

    // Write files according to updated translations values
    writeTranslationFiles(pluginLanguages, updatedTranslationValues);
  });
}

/**
 * Find `message.json` files in the app.
 *
 * @param cb {Function} Callback
 */
function findMessagesFiles(appDir, cb) {
  // Name of the messages files
  const messagesFileName = 'messages.json';

  // App directory
  // const dir = path.resolve(process.cwd(), 'app');

  // Results
  let results = {};

  // Parallel search
  fs.readdir(appDir, (err, list) => {
    if (err) {
      return cb(err);
    }

    let pending = list.length;
    if (!pending) {
      return cb(null, results);
    }
    return list.forEach(fileName => {
      const filePath = path.resolve(appDir, fileName);
      fs.stat(filePath, (errStat, stat) => {
        if (stat && stat.isDirectory()) {
          findMessagesFiles(filePath, (errFind, res) => {
            // Merge with the previous results
            results = _.merge(results, res);
            if (!--pending) {
              cb(null, results);
            }
          });
        } else {
          if (fileName === messagesFileName) {
            results[filePath] = JSON.parse(fs.readFileSync(filePath, 'utf8'));
          }
          if (!--pending) {
            cb(null, results);
          }
        }
      });
    });
  });
}

/**
 * Returns the list of languages supported by the plugin.
 *
 * @returns {Array} List of languages support by the plugin
 */
function getPluginLanguages() {
  return fs.readdirSync(path.resolve(process.cwd(), 'app', 'translations')).map(fileName => (fileName.replace('.json', '')));
}

/**
 * Returns the list of current translations values.
 *
 * @param languages {Array}  List of languages support by the plugin
 * @returns         {Object} Current translation values
 */
function getCurrentTranslationsValues(languages) {
  const currentTranslationsValues = {};

  _.forEach(languages, language => {
    currentTranslationsValues[language] = JSON.parse(fs.readFileSync((path.resolve(process.cwd(), 'app', 'translations', `${language}.json`)), 'utf8'));
  });

  return currentTranslationsValues;
}

/**
 * Format messages.
 *
 * @param messageFiles {Object}
 * @returns            {Object} Messages formatted
 */
function formatMessages(messageFiles) {
  const messagesFormatted = {};

  _.forEach(messageFiles, messageFile => {
    _.forEach(messageFile, message => {
      messagesFormatted[message.id] = message.defaultMessage;
    });
  });

  return messagesFormatted;
}

/**
 * Merge current translations with new ones.
 *
 * @param currentTranslationsValues {Object} Current translations value
 * @param messagesFormatted         {Object} Messages formatted from `messages.json` files
 * @returns                         {Object} Translations values updated
 */
function getUpdatedTranslationValues(currentTranslationsValues, messagesFormatted) {
  const updatedTranslationValues = {};

  _.forEach(currentTranslationsValues, (value, language) => {
    updatedTranslationValues[language] = {};

    // Sort the messages and assigns the values
    Object.keys(messagesFormatted).sort().forEach(id => {
      updatedTranslationValues[language][id] = currentTranslationsValues[language][id] || '';
    });
  });

  return updatedTranslationValues;
}

/**
 * Overwrite translations files according to updated values
 *
 * @param languages                 {Array}  The list of languages supported by the plugin
 * @param updatedTranslationValues  {Object} Translations values updated
 */
function writeTranslationFiles(languages, updatedTranslationValues) {
  _.forEach(languages, (language) => {
    fs.writeFileSync(path.resolve(path.resolve(process.cwd(), 'app', 'translations', `${language}.json`)), JSON.stringify(updatedTranslationValues[language], null, 2));
  });
}