webpack.config.js

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