How to upload videos in mp4 format with webpack?

1

My current webpack.config

const webpack           = require( 'webpack' );
const ExtractTextPlugin = require( 'extract-text-webpack-plugin' );
const PurifyCSSPlugin   = require( 'purifycss-webpack' );
const autoprefixer      = require( 'autoprefixer' );
const mqpacker          = require( 'css-mqpacker' );
const combineSelector   = require( 'postcss-combine-duplicated-selectors' );
const cssnano           = require( 'cssnano' );

// import environmental variables from our variables.env file
require( 'dotenv' ).config( { path : 'variables.env' } );

// This is JavaScript rule that specifies what to do with .js files
const javascript = {
    test    : /\.(js)$/,
    exclude : '/node_modules/',
    use     : [ { loader : 'babel-loader', query : { presets : [ 'env' ] } } ],
};

const postcss = {
    loader  : 'postcss-loader',
    options : {
        sourceMap : true,
        plugins () {
            return [
                autoprefixer( { browsers : 'last 3 versions' } ),
                mqpacker( { sort : true } ),
                combineSelector( { removeDuplicatedProperties : true } ),
                cssnano()
            ];
        }
    }
};

// this is our sass/css loader. It handles files that are
const styles = {
    test : /\.(scss)$/,
    use  : ExtractTextPlugin.extract( {
        use : process.env.NODE_ENV === 'production'
          ? [
              { loader : 'css-loader', options : { sourceMap : true } },
              postcss,
              {
                  loader  : 'sass-loader',
                  options : { outputStyle : 'expanded', sourceMap : true }
              }
          ]
          : [
              { loader : 'css-loader', options : { sourceMap : true } },
              {
                  loader  : 'sass-loader',
                  options : { outputStyle : 'expanded', sourceMap : true }
              }
          ]
    } )
};

const fonts = {
    test : /\.(ttf|eot|svg)(\?v=[0-9]\.[0-9]\.[0-9])?$/,
    use  : [ { loader : 'file-loader' } ]
};

const video = {
    test : /\.mp4$/,
    use  : [ { loader : 'file-loader' } ]
};

// this plugins will compress out our JS
const uglify = new webpack.optimize.UglifyJsPlugin( {
    compress : { warnings : false }
} );

const config = {
    entry   : { App : './public/javascripts/app.js' },
    stats   : { children : false },
    output  : {
        path     : '${__dirname}/public/dist',
        filename : '[name].bundle.js'
    },
    module  : {
        rules : [
            javascript,
            styles,
            fonts
        ]
    },
    plugins : [ new ExtractTextPlugin( 'style.css' ) ]
};

if ( process.env.NODE_ENV === 'production' ) {
    config.plugins.push(
      uglify,
      new PurifyCSSPlugin( {
          paths         : glob.sync( [
              '${__dirname}/views/*.pug',
              '${__dirname}/views/includes/*.pug',
              '${__dirname}/dist/javascripts/*.js'
          ] ),
          minimize      : true,
          purifyOptions : {
              info : true,
//                rejected: true
          }
      } )
    );
}

if ( process.env.NODE_ENV === 'development' )
    config.devtool = 'source-map';

process.noDeprecation = true;

module.exports = config;
    
asked by Cristian Camilo Flórez 10.02.2018 в 12:13
source

0 answers