webpack.config.js

   1 const path = require('path');
   2 const glob = require('glob');
   3
   4 // Minify JS
   5 const TerserPlugin = require('terser-webpack-plugin');
   6
   7 // This plugin extracts the CSS into its own file instead of tying it with the JS.
   8 // It prevents:
   9 //   - not having styles due to a JS error
  10 //   - the flash page without styles during JS loading
  11 const MiniCssExtractPlugin = require("mini-css-extract-plugin");
  12
  13 const extractCss = new MiniCssExtractPlugin({
  14   filename: "../css/[name].min.css",
  15 });
  16
  17 module.exports = [
  18   {
  19     mode: 'production',
  20     entry: {
  21       thumbnails: './assets/common/js/thumbnails.js',
  22       thumbnails_update: './assets/common/js/thumbnails-update.js',
  23       metadata: './assets/common/js/metadata.js',
  24       pluginsadmin: './assets/default/js/plugins-admin.js',
  25       shaarli: [
  26         './assets/default/js/base.js',
  27         './assets/default/scss/shaarli.scss',
  28       ].concat(glob.sync('./assets/default/img/*')),
  29       markdown: './assets/common/css/markdown.css',
  30     },
  31     output: {
  32       filename: '[name].min.js',
  33       path: path.resolve(__dirname, 'tpl/default/js/')
  34     },
  35     module: {
  36       rules: [
  37         {
  38           test: /\.js$/,
  39           exclude: /node_modules/,
  40           use: {
  41             loader: 'babel-loader',
  42             options: {
  43               presets: [
  44                 '@babel/preset-env',
  45               ]
  46             }
  47           }
  48         },
  49         {
  50           test: /\.s?css/,
  51           use: [
  52             {
  53               loader: MiniCssExtractPlugin.loader,
  54               options: {
  55                 publicPath: 'tpl/default/css/',
  56               },
  57             },
  58             'css-loader',
  59             'sass-loader',
  60           ],
  61         },
  62         {
  63           test: /\.(gif|png|jpe?g|svg|ico)$/i,
  64           use: [
  65             {
  66               loader: 'file-loader',
  67               options: {
  68                 name: '../img/[name].[ext]',
  69                 publicPath: 'tpl/default/img/',
  70               }
  71             }
  72           ],
  73         },
  74         {
  75           test: /\.(eot|ttf|woff|woff2)(\?v=[0-9]\.[0-9]\.[0-9])?$/,
  76           loader: 'file-loader',
  77           options: {
  78             name: '../fonts/[name].[ext]',
  79             // do not add a publicPath here because it's already handled by CSS's publicPath
  80             publicPath: '../default/',
  81           }
  82         },
  83       ],
  84     },
  85     optimization: {
  86       minimize: true,
  87       minimizer: [new TerserPlugin()],
  88     },
  89     plugins: [
  90       extractCss,
  91     ],
  92   },
  93   {
  94     mode: 'production',
  95     entry: {
  96       shaarli: [
  97         './assets/vintage/js/base.js',
  98         './assets/vintage/css/reset.css',
  99         './assets/vintage/css/shaarli.css',
 100       ].concat(glob.sync('./assets/vintage/img/*')),
 101       markdown: './assets/common/css/markdown.css',
 102       thumbnails: './assets/common/js/thumbnails.js',
 103       metadata: './assets/common/js/metadata.js',
 104       thumbnails_update: './assets/common/js/thumbnails-update.js',
 105     },
 106     output: {
 107       filename: '[name].min.js',
 108       path: path.resolve(__dirname, 'tpl/vintage/js/')
 109     },
 110     module: {
 111       rules: [
 112         {
 113           test: /\.js$/,
 114           exclude: /node_modules/,
 115           use: {
 116             loader: 'babel-loader',
 117             options: {
 118               presets: [
 119                 '@babel/preset-env',
 120               ]
 121             }
 122           }
 123         },
 124         {
 125           test: /\.css$/,
 126           use: [
 127             {
 128               loader: MiniCssExtractPlugin.loader,
 129               options: {
 130                 publicPath: 'tpl/vintage/css/',
 131               },
 132             },
 133             'css-loader',
 134             'sass-loader',
 135           ],
 136         },
 137         {
 138           test: /\.(gif|png|jpe?g|svg|ico)$/i,
 139           use: [
 140             {
 141               loader: 'file-loader',
 142               options: {
 143                 name: '../img/[name].[ext]',
 144                 publicPath: '',
 145               }
 146             }
 147           ],
 148         },
 149       ],
 150     },
 151     optimization: {
 152       minimize: true,
 153       minimizer: [new TerserPlugin()],
 154     },
 155     plugins: [
 156       extractCss,
 157     ],
 158   },
 159 ];