Best way to bundle non-npm libraries in a new directory?

[OasisOfChaos]

Does anyone know the best way to add a new directory (relative to the root) for jquery plugins? I am trying to add some css/js from a plugin that has no npm package and now webpack cannot find the files when I try to add them to the vendor bundle. I've tried to add an alias in the webpack.config.vendor.js file but webpack still cannot find them. My files are in /libs (at the same level as node_modules).

Is there any recommended (better) way to do this? I'm still pretty new to all of this...

my webpack.config.vendor.js:

var isDevBuild = process.argv.indexOf('--env.prod') < 0;
var path = require('path');
var webpack = require('webpack');
var ExtractTextPlugin = require('extract-text-webpack-plugin');
var extractCSS = new ExtractTextPlugin('vendor.css');

module.exports = {
    resolve: {
        modules: ["libs", "node_modules"],
        alias: {
            libs: path.resolve(__dirname, 'libs', 'assets')
        },
        extensions: ['.js']
    },
    module: {
        loaders: [
            { test: /\.(png|woff|woff2|eot|ttf|svg)(\?|$)/, loader: 'url-loader?limit=100000' },
            { test: /\.css(\?|$)/, loader: extractCSS.extract(['css-loader']) }
        ]
    },
    entry: {
        vendor: [
            'aurelia-event-aggregator',
            'aurelia-fetch-client',
            'aurelia-framework',
            'aurelia-history-browser',
            'aurelia-logging-console',
            'aurelia-pal-browser',
            'aurelia-polyfills',
            'aurelia-route-recognizer',
            'aurelia-router',
            'aurelia-templating-binding',
            'aurelia-templating-resources',
            'aurelia-templating-router',
            'bootstrap',
            'bootstrap/dist/css/bootstrap.css',
            'jquery',
            'material-kit', //just for testing I added them both...
            'libs/material-kit' //just for testing I added them both...
        ],
    },
    output: {
        path: path.join(__dirname, 'wwwroot', 'dist'),
        publicPath: '/dist/',
        filename: '[name].js',
        library: '[name]_[hash]',
    },
    plugins: [
        extractCSS,
        new webpack.ProvidePlugin({ $: 'jquery', jQuery: 'jquery' }), // Maps these identifiers to the jQuery package (because Bootstrap expects it to be a global variable)
        new webpack.DllPlugin({
            path: path.join(__dirname, 'wwwroot', 'dist', '[name]-manifest.json'),
            name: '[name]_[hash]'
        })
    ].concat(isDevBuild ? [] : [
        new webpack.optimize.UglifyJsPlugin({ compress: { warnings: false } })
    ])
};

When I run webpack --config webpack.config.vendor.js:

x:\somepath>webpack --config webpack.config.vendor.js
Hash: 99022573b1fcdca2ba39
Version: webpack 2.1.0-beta.25
Time: 2113ms
                               Asset    Size  Chunks             Chunk Names
89889688147bd7575d6327160d64e760.svg  109 kB          [emitted]
                           vendor.js  986 kB       0  [emitted]  vendor
                          vendor.css  315 kB       0  [emitted]  vendor
  [74] dll vendor 12 bytes {0} [built]
    + 80 hidden modules

ERROR in dll vendor
Module not found: Error: Can't resolve 'libs/material-kit' in 'x:\somepath'
 @ dll vendor

ERROR in dll vendor
Module not found: Error: Can't resolve 'material-kit' in 'x:\somepath'
 @ dll vendor
Child extract-text-webpack-plugin:
        + 7 hidden modules

Thanks!

[SteveSandersonMS]

Just referencing a directory won't include its files. You need to import the actual .js files into your application. For example, in boot-client.ts,

import '../../some/directory/file.js';

Make sure that works before trying to put them in your vendor bundle.

[aherrick]

@SteveSandersonMS So just to be clear here. If I have a random TS file (living in wwwrootlet's say) I want to include with the site (code written against a jQuery plugin) I just import the file into my boot-client.ts? I don't need to then do anything with webpackor any other integration?

Thanks!

[SteveSandersonMS]

If I have a random TS file (living in wwwrootlet's say)

Preferably don't put .ts files in wwwroot, because then you'll deploy them to production and make them world-readable.

I just import the file into my boot-client.ts? I don't need to then do anything with webpackor any other integration?

Importing the file will cause it to be included in the bundle, and its code will be evaluated when your page starts up. Whether evaluating the code does what you want depends on what the code is and what you want it to do :)