webpack.mix.js

const path = require('path');
const webpack = require('webpack');
const {mix} = require('laravel-mix');
const ExtractTextPlugin = require("extract-text-webpack-plugin");
const UglifyJSPlugin = require('uglifyjs-webpack-plugin');

mix.config.postCss = require('./postcss.config').plugins;

mix.webpackConfig({
    output: {
        publicPath: '/public/',
        chunkFilename: 'js/[name]-[chunkhash].js',
    },
    module: {
        rules: [
            {
                test: /\.css$/,
                use: ExtractTextPlugin.extract({
                    fallback: 'style-loader',
                    use: [
                        {
                            loader: 'css-loader',
                            options: {
                                modules: true,
                                importLoaders: 1,
                            },
                        },
                        {
                            loader: 'postcss-loader',
                            options: {
                                sourceMap: mix.inProduction() ? false : true,
                                ident: 'postcss',
                                syntax: 'postcss-scss',
                                plugins: () => [...plugins],
                            },
                        },
                        {
                            loader: 'sass-loader',
                        },
                    ]
                })
            },
            {
                test: /\.scss$/,
                exclude: /node_modules/,
                use: ExtractTextPlugin.extract({
                    use: ['css-loader', 'sass-loader']
                })
            },
        ]
    },
    plugins: [
        new ExtractTextPlugin({
            filename: '/assets/css/app.css',
            allChunks: true,
        }),
        new UglifyJSPlugin({
            sourceMap: mix.inProduction() ? false : true,
            compress: {
                warnings: false,
                screw_ie8: true,
                conditionals: true,
                unused: true,
                booleans: true,
                comparisons: true,
                sequences: true,
                dead_code: true,
                evaluate: true,
                if_return: true,
                join_vars: true,
                drop_console: true
            },
            minimize: true,
            output: {
                comments: false
            },
        }),
        new webpack.optimize.CommonsChunkPlugin({
            name: 'assets/js/vendor',
            minChunks: function (module) {
                // any required modules inside node_modules are extracted to vendor
                return (
                    module.resource &&
                    /\.js$/.test(module.resource) &&
                    module.resource.indexOf(
                        path.join(__dirname, '../node_modules')
                    ) === 0
                )
            }
        }),
        // extract webpack runtime and module manifest to its own file in order to
        // prevent vendor hash from being updated whenever app bundle is updated
        new webpack.optimize.CommonsChunkPlugin({
            name: 'assets/js/manifest',
            minChunks: Infinity
        }),
    ],
    resolve: {
        alias: {
            '~': path.join(__dirname, './resources/assets/js')
        }
    },
    devtool: 'source-map',
});

// Start processes
mix.js('./resources/assets/js/app.js', '/assets/js')
    .autoload({
    _babelPolyfill: ['babel-polyfill'],
    lodash: ['_', 'window._'],
    jquery: ['$', 'jQuery', 'jquery', 'window.jQuery'],
    vue: ['Vue', 'window.Vue'],
    axios: ['axios', 'window.axios'],
    tether: ['tether', 'Tether'],
    'popper.js/dist/umd/popper.js': ['Popper', 'window.Popper', 'default'],
    'exports-loader?Alert!bootstrap/js/dist/alert': ['Alert', 'window.Alert'],
    'exports-loader?Button!bootstrap/js/dist/button': ['Button', 'window.Button'],
    'exports-loader?Carousel!bootstrap/js/dist/carousel': ['Carousel', 'window.Carousel'],
    'exports-loader?Collapse!bootstrap/js/dist/collapse': ['Collapse', 'window.Collapse'],
    'exports-loader?Dropdown!bootstrap/js/dist/dropdown': ['Dropdown', 'window.Dropdown'],
    'exports-loader?Modal!bootstrap/js/dist/modal': ['Modal', 'window.Modal'],
    'exports-loader?Popover!bootstrap/js/dist/popover': ['Popover', 'window.Popover'],
    'exports-loader?Scrollspy!bootstrap/js/dist/scrollspy': ['Scrollspy', 'window.Scrollspy'],
    'exports-loader?Tab!bootstrap/js/dist/tab': ['Tab', 'window.Tab'],
    'exports-loader?Tooltip!bootstrap/js/dist/tooltip': ['Tooltip', 'window.Tooltip'],
    'exports-loader?Util!bootstrap/js/dist/util': ['Util', 'window.Util']
}).extract([
    'babel-polyfill',
    'lodash',
    'jquery',
    'tether',
    'popper.js',
    'vue',
    'bootstrap',
    'bootstrap-vue',
    'perfect-scrollbar'
]).options({
    processCssUrls: false,
});
if (mix.inProduction()) {
    mix.version();
}