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