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

New Issue

fergalmoran · 2025-08-09T17:18:13Z

fergalmoran commented

2025-08-09 17:18:13 +00:00

Originally created by @OasisOfChaos on 3/16/2017

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!

*Originally created by @OasisOfChaos on 3/16/2017* 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!

fergalmoran closed this issue

2025-08-09 17:18:13 +00:00

Sign in to join this conversation.

1 Participants

Notifications

Due Date

No due date set.

Dependencies

No dependencies set.

Reference: github/JavaScriptServices#932