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