Can't load angular-clipboard using Webpack

Question

I am using Webpack in my AngularJS project and when I try to load angular-clipboard I get the following error:

ERROR in ./assets/libs/angular-clipboard/angular-clipboard.js
Module not found: Error: Cannot resolve module 'angular' in C:\...\assets\libs\angular-clipboard
 @ ./assets/libs/angular-clipboard/angular-clipboard.js 4:8-36

Previously I was loading it like this:

require('./assets/libs/angular/angular.js');

My webpack.config.js looks like this:

module.exports = {
    entry: './entry.js',
    output: {
        path: __dirname,
        filename: 'bundle.js'
    },
    module: {
        loaders: [
            { test: /\.css$/, loader: 'style-loader!css-loader' },
            { test: /\.(png|woff|woff2|eot|ttf|svg)$/, loader: 'url-loader?limit=100000' },
            { test: /\.less$/, loader: 'style-loader!css-loader!less-loader' }
        ]
    }
};

WebPack certainly seems to be the darling of the JavaScript community right now so I think you're on the rigth track this q/a may throw some light on the subject though http://stackoverflow.com/a/35064297/1370442 — Luke Baughan, Dec 21 '16 at 16:30
[SystemJS](https://github.com/systemjs/systemjs) is another alternative. — CozyAzure, Dec 21 '16 at 17:10

dotcs · Accepted Answer · 2016-12-21T17:38:39.610

First and foremost webpack is a module bundler. This means that starting from one or multiple so called entry points webpack follows the imports accross the project and resolves all dependencies using so called loaders. These loaders serve the purpose to load content but also to transform it somehow while loading it. This allows for example to transfrom typescript code to javascript with the ts-loader.

Loaders are at the heart of webpack and allows for transpiling code, importing and manipulating images, translating SASS or stylus to CSS and so on. Sky is the limit at this point and webpack comes with a bunch of loaders which makes it very mighty.

In the end webpack creates so called bundles, which are javascript files that contain all loaded content. These javascript files can also include CSS, JSON blobs, etc. Webpack can then also minify the code in order to save bandwidth, it can hash the bundles in order to prevent caching issues, and much more.

So yes, webpack can do nearly everything and most of the times it is the right tool for the job.

Other tools that you might be interested in:

Module bundler:

Task runner:

Webpack in combination with its loaders is a mix between a pure module bundler and a task runner. You might see it as a module bundler - that also allows to load CSS, JSON, etc. - that comes with a pipeline for each module - such as a SASS to CSS pipeline. The configuration then tells webpack how these pipelines look like, where it should start to bundle, where it should slice bundles, and so on.

Can't load angular-clipboard using Webpack

1 Answers1

Other tools that you might be interested in: