@travlrcom/uikit/webpack/webpack.config.uikit.js

TRAVLR UiKit

const name = 'travlr-uikit';
const path = require('path');
const pathDistribution = 'dist/';
const pathRoot = '../';
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const UglifyJsPlugin = require('uglifyjs-webpack-plugin');
const OptimizeCSSAssetsPlugin = require('optimize-css-assets-webpack-plugin');

module.exports = (args = {}) => {
	const mode = args.mode || 'production'
	const minify = args.minify === 'true' ? true : false

	return {
		mode,
		devtool: 'source-map',
		entry: [
			'./src/nodelist',
			'polyfills',
			path.resolve(__dirname, `${pathRoot}src/app.js`)
		],
		output: {
      libraryTarget: 'umd',
      // This option determines the name of each output bundle.
      filename: minify ? `js/${name}.min.js` : `js/${name}.js`,
      path: path.resolve(__dirname, `${pathRoot}${pathDistribution}`)
		},
		optimization: {
			minimize: minify ? true : false,
			minimizer: minify ? [
				new UglifyJsPlugin({
					cache: true,
					parallel: true,
					sourceMap: true, // set to true if you want JS source maps
					uglifyOptions: {
						mangle: true,
					}
				}),
				new OptimizeCSSAssetsPlugin({})
			] : []
		},
		plugins: [
			minify ? new MiniCssExtractPlugin({
				filename: `css/${name}.min.css`
			}) : new MiniCssExtractPlugin({
				filename: `css/${name}.css`
			})
		],
		module: {
			rules: [
        {
          test: /\.js$/,
          exclude: /node_modules/,
          use: {
            loader: 'babel-loader',
            options: {
							presets: [
								['@babel/preset-env', {
									// - If useBuiltIns: 'usage' is specified in .babelrc then do not include @babel/polyfill in either webpack.config.js entry array
									//   nor source. Note, @babel/polyfill still needs to be installed.
									// - If useBuiltIns: 'entry' is specified in .babelrc then include @babel/polyfill at the top of the entry point to your application
									//   via require or import
									// - If useBuiltIns key is not specified or it is explicitly set with useBuiltIns: false in your .babelrc, add @babel/polyfill
									//   directly to the entry array in your webpack.config.js.
									useBuiltIns: 'entry'
								}]
							],
							plugins: [
								['@babel/plugin-transform-modules-commonjs', {
									strictMode: false
								}]
							]
            }
          }
				},
				{
          test: /\.(scss|sass)$/,
          use: [
            mode === 'production' ? MiniCssExtractPlugin.loader : 'style-loader',
						'css-loader',
            'sass-loader'
          ]
				},
				{
					test: /\.(woff|woff2|eot|ttf|svg|webp)$/,
					use: {
						loader: 'file-loader',
						options: {
              name: 'fonts/[name]/[name].[ext]',
            }
					}
				},
        {
          test: /\.(png|jpg|jpeg)$/,
          use: {
						loader: 'file-loader',
						options: {
							name: 'images/[name].[ext]'
						}
          }
        }
      ]
		}
	}
}