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       pluginsadmin: './assets/default/js/plugins-admin.js',
  24       shaarli: [
  25         './assets/default/js/base.js',
  26         './assets/default/scss/shaarli.scss',
  27       ].concat(glob.sync('./assets/default/img/*')),
  28       markdown: './assets/common/css/markdown.css',
  29     },
  30     output: {
  31       filename: '[name].min.js',
  32       path: path.resolve(__dirname, 'tpl/default/js/')
  33     },
  34     module: {
  35       rules: [
  36         {
  37           test: /\.js$/,
  38           exclude: /node_modules/,
  39           use: {
  40             loader: 'babel-loader',
  41             options: {
  42               presets: [
  43                 '@babel/preset-env',
  44               ]
  45             }
  46           }
  47         },
  48         {
  49           test: /\.s?css/,
  50           use: [
  51             {
  52               loader: MiniCssExtractPlugin.loader,
  53               options: {
  54                 publicPath: 'tpl/default/css/',
  55               },
  56             },
  57             'css-loader',
  58             'sass-loader',
  59           ],
  60         },
  61         {
  62           test: /\.(gif|png|jpe?g|svg|ico)$/i,
  63           use: [
  64             {
  65               loader: 'file-loader',
  66               options: {
  67                 name: '../img/[name].[ext]',
  68                 publicPath: 'tpl/default/img/',
  69               }
  70             }
  71           ],
  72         },
  73         {
  74           test: /\.(eot|ttf|woff|woff2)(\?v=[0-9]\.[0-9]\.[0-9])?$/,
  75           loader: 'file-loader',
  76           options: {
  77             name: '../fonts/[name].[ext]',
  78             // do not add a publicPath here because it's already handled by CSS's publicPath
  79             publicPath: '../default/',
  80           }
  81         },
  82       ],
  83     },
  84     optimization: {
  85       minimize: true,
  86       minimizer: [new TerserPlugin()],
  87     },
  88     plugins: [
  89       extractCss,
  90     ],
  91   },
  92   {
  93     mode: 'production',
  94     entry: {
  95       shaarli: [
  96         './assets/vintage/js/base.js',
  97         './assets/vintage/css/reset.css',
  98         './assets/vintage/css/shaarli.css',
  99       ].concat(glob.sync('./assets/vintage/img/*')),
 100       markdown: './assets/common/css/markdown.css',
 101       thumbnails: './assets/common/js/thumbnails.js',
 102       thumbnails_update: './assets/common/js/thumbnails-update.js',
 103     },
 104     output: {
 105       filename: '[name].min.js',
 106       path: path.resolve(__dirname, 'tpl/vintage/js/')
 107     },
 108     module: {
 109       rules: [
 110         {
 111           test: /\.js$/,
 112           exclude: /node_modules/,
 113           use: {
 114             loader: 'babel-loader',
 115             options: {
 116               presets: [
 117                 '@babel/preset-env',
 118               ]
 119             }
 120           }
 121         },
 122         {
 123           test: /\.css$/,
 124           use: [
 125             {
 126               loader: MiniCssExtractPlugin.loader,
 127               options: {
 128                 publicPath: 'tpl/vintage/css/',
 129               },
 130             },
 131             'css-loader',
 132             'sass-loader',
 133           ],
 134         },
 135         {
 136           test: /\.(gif|png|jpe?g|svg|ico)$/i,
 137           use: [
 138             {
 139               loader: 'file-loader',
 140               options: {
 141                 name: '../img/[name].[ext]',
 142                 publicPath: '',
 143               }
 144             }
 145           ],
 146         },
 147       ],
 148     },
 149     optimization: {
 150       minimize: true,
 151       minimizer: [new TerserPlugin()],
 152     },
 153     plugins: [
 154       extractCss,
 155     ],
 156   },
 157 ];