[webpack - configuración] snippets con distintos código que se utilizan en los archivos de configuración #webpack

dev-prod.js

/**
* Utilizado para definir cual es el script que se utilizará para cada
* de las distintas etapas.
*/
const TARGET = process.env.npm_lifecycle_event;
if (TARGET === 'dev') {
   module.exports = require('./path-to/webpack.config.dev.js');
}
if (TARGET === 'build') {
   module.exports = require('./path-to/webpack.config.prod.js');
}

typical-html.js

/**
* Utlizado para un típico proyecto web
*/

const HtmlWebpackPlugin = require('html-webpack-plugin')
const MiniCssExtractPlugin = require('mini-css-extract-plugin')

module.exports = {

  // Javascript bundle
  entry: `${__dirname}/src/main.js`,
  output: {
    path: `${__dirname}/dist`,
    filename: `bundle.js`
  },

  // Dev Server
  devServer: {
    port: 5000
  },

  // Loaders
  module : {
    rules: [
      {
        test: /\.css$/,
        use: [
          {loader: MiniCssExtractPlugin.loader},
          {loader: 'css-loader'},
          {loader: 'sass-loader'}
        ]
      }
    ]
  },

  // Plugins
  plugins: [
    // Plugin - HTML to dist
    new HtmlWebpackPlugin({
      template: `./src/index.html`
    }),
    // Extrae el CSS en producción
    new MiniCssExtractPlugin({
      filename: 'bundle.css'
    })
  ]

}