arsenetoumani/webpack.config.js Secret

## webpack.config.js
'use strict';
const webpack = require('webpack');
const path = require('path');
const LodashModuleReplacementPlugin = require('lodash-webpack-plugin');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const CopyWebpackPlugin = require('copy-webpack-plugin');
/**
 * Env
 * Get npm lifecycle event to identify the environment
 */
var ENV = process.env.npm_lifecycle_event;
var isTest = ENV === 'test' || ENV === 'test-watch';
var isProd = ENV === 'build';
var isDev = ENV === 'server';

module.exports = function makeWebpackConfig() {

  var config = {
    mode: isDev ? "development" : "production",
    entry: {
      app: ['./webpack/vendors-styles.js', './webpack/vendors.js', './webpack/app.js']
    },
    output: {
      path: path.resolve(__dirname, 'dist'),
      publicPath: isDev ? '/' : './',
      filename: isProd ? '[name].[contenthash].js' : '[name].bundle.js',
      chunkFilename: isProd ? '[name].[contenthash].js' : '[name].bundle.js'
    },
    module: {
      rules: [
        {
          test: /\.(js|jsx)$/,
          use: 'babel-loader',
          exclude: /node_modules/
        },
        {
          // HTML LOADER
          // Reference: https://github.com/webpack/raw-loader
          // Allow loading html through js
          test: /\.html$/,
          loader: 'raw-loader'
        },
        {
          test: /\.css$/,
          use: [
            isProd ? MiniCssExtractPlugin.loader : 'style-loader',
            'css-loader'
          ]
        },
        {
          test: /\.less$/,
          use: [
            isProd ? MiniCssExtractPlugin.loader : 'style-loader',
            'css-loader',
            'less-loader'
          ]
        },
        {
          // ASSET LOADER
          // Reference: https://github.com/webpack/file-loader
          // Copy png, jpg, jpeg, gif, svg, woff, woff2, ttf, eot files to output
          // Rename the file using the asset hash
          // Pass along the updated reference to your code
          // You can add here any file extension you want to get copied to your output
          test: /\.(png|jpg|jpeg|gif|svg|woff|woff2|ttf|eot)$/,
          loader: 'file-loader'
        }
      ]
    },
    resolve: {
      modules: ['node_modules'],
      descriptionFiles: ['package.json'],
      extensions: [
        '.js'
      ]
    },

    plugins: [
      new webpack.ContextReplacementPlugin(/moment[\/\\]locale$/, /en/),
      new LodashModuleReplacementPlugin({
          //this setting solves the 'iteratee is not a function' errors. Refer to the issue https://github.com/lodash/lodash/issues/3101 for more info.
          'shorthands': true
      }),,
      new HtmlWebpackPlugin({
          template: './src/index.html',
          // inject generated js bundles in the head if on localhost; otherwise inject them to the body. when not on localhost, files will be split into css and js using the MiniCssExtractPlugin.
          inject: isDev ? 'head' : 'body'
      }),
      //copy the assets and i18n folder to the app's root so their resources can be resolved when referenced in code
      new CopyWebpackPlugin([
        { from: path.resolve(__dirname, './src/assets'), to: 'assets' },
        { from: path.resolve(__dirname, './src/app/i18n'), to: 'i18n' }
      ])
    ],

    optimization: {
      runtimeChunk: 'single',
      splitChunks: {
          cacheGroups: {
              commons: {
                  test: /[\\\/]node_modules[\\\/]/,
                  name: 'vendor',
                  chunks: 'all'
              }
          }
      }
    },
    //setings for webpack's local dev server
    devServer: {
      port: 3000,
      contentBase: '/',
      stats: 'minimal',
      host: 'localhost'
    }
  }

  if (isTest) {
    config.devtool = 'inline-source-map';
  }
  else if (isProd) {
    config.devtool = 'source-map';
    config.plugins.push(new MiniCssExtractPlugin()); // this splits css and js into different files and injects css to <head>, and js to end of <body>
  }
  else {
    config.devtool = 'eval-source-map';
    if(isDev) {
        //copy the config file to the right path. we don't need to do this on the server (dev, staging, prod) because the file is already there.
        config.plugins.push(new CopyWebpackPlugin([{ from: path.resolve(__dirname, './src/config.json'), to: './' }]));
    }
  }

  return config;
}();
	'use strict';
	const webpack = require('webpack');
	const path = require('path');
	const LodashModuleReplacementPlugin = require('lodash-webpack-plugin');
	const HtmlWebpackPlugin = require('html-webpack-plugin');
	const MiniCssExtractPlugin = require('mini-css-extract-plugin');
	const CopyWebpackPlugin = require('copy-webpack-plugin');
	/**
	* Env
	* Get npm lifecycle event to identify the environment
	*/
	var ENV = process.env.npm_lifecycle_event;
	var isTest = ENV === 'test' \|\| ENV === 'test-watch';
	var isProd = ENV === 'build';
	var isDev = ENV === 'server';

	module.exports = function makeWebpackConfig() {

	var config = {
	mode: isDev ? "development" : "production",
	entry: {
	app: ['./webpack/vendors-styles.js', './webpack/vendors.js', './webpack/app.js']
	},
	output: {
	path: path.resolve(__dirname, 'dist'),
	publicPath: isDev ? '/' : './',
	filename: isProd ? '[name].[contenthash].js' : '[name].bundle.js',
	chunkFilename: isProd ? '[name].[contenthash].js' : '[name].bundle.js'
	},
	module: {
	rules: [
	{
	test: /\.(js\|jsx)$/,
	use: 'babel-loader',
	exclude: /node_modules/
	},
	{
	// HTML LOADER
	// Reference: https://github.com/webpack/raw-loader
	// Allow loading html through js
	test: /\.html$/,
	loader: 'raw-loader'
	},
	{
	test: /\.css$/,
	use: [
	isProd ? MiniCssExtractPlugin.loader : 'style-loader',
	'css-loader'
	]
	},
	{
	test: /\.less$/,
	use: [
	isProd ? MiniCssExtractPlugin.loader : 'style-loader',
	'css-loader',
	'less-loader'
	]
	},
	{
	// ASSET LOADER
	// Reference: https://github.com/webpack/file-loader
	// Copy png, jpg, jpeg, gif, svg, woff, woff2, ttf, eot files to output
	// Rename the file using the asset hash
	// Pass along the updated reference to your code
	// You can add here any file extension you want to get copied to your output
	test: /\.(png\|jpg\|jpeg\|gif\|svg\|woff\|woff2\|ttf\|eot)$/,
	loader: 'file-loader'
	}
	]
	},
	resolve: {
	modules: ['node_modules'],
	descriptionFiles: ['package.json'],
	extensions: [
	'.js'
	]
	},

	plugins: [
	new webpack.ContextReplacementPlugin(/moment[\/\\]locale$/, /en/),
	new LodashModuleReplacementPlugin({
	//this setting solves the 'iteratee is not a function' errors. Refer to the issue https://github.com/lodash/lodash/issues/3101 for more info.
	'shorthands': true
	}),,
	new HtmlWebpackPlugin({
	template: './src/index.html',
	// inject generated js bundles in the head if on localhost; otherwise inject them to the body. when not on localhost, files will be split into css and js using the MiniCssExtractPlugin.
	inject: isDev ? 'head' : 'body'
	}),
	//copy the assets and i18n folder to the app's root so their resources can be resolved when referenced in code
	new CopyWebpackPlugin([
	{ from: path.resolve(__dirname, './src/assets'), to: 'assets' },
	{ from: path.resolve(__dirname, './src/app/i18n'), to: 'i18n' }
	])
	],

	optimization: {
	runtimeChunk: 'single',
	splitChunks: {
	cacheGroups: {
	commons: {
	test: /[\\\/]node_modules[\\\/]/,
	name: 'vendor',
	chunks: 'all'
	}
	}
	}
	},
	//setings for webpack's local dev server
	devServer: {
	port: 3000,
	contentBase: '/',
	stats: 'minimal',
	host: 'localhost'
	}
	}

	if (isTest) {
	config.devtool = 'inline-source-map';
	}
	else if (isProd) {
	config.devtool = 'source-map';
	config.plugins.push(new MiniCssExtractPlugin()); // this splits css and js into different files and injects css to <head>, and js to end of <body>
	}
	else {
	config.devtool = 'eval-source-map';
	if(isDev) {
	//copy the config file to the right path. we don't need to do this on the server (dev, staging, prod) because the file is already there.
	config.plugins.push(new CopyWebpackPlugin([{ from: path.resolve(__dirname, './src/config.json'), to: './' }]));
	}
	}

	return config;
	}();