My current configuration involves the following code:
'use strict';
const path = require('path');
const webpack = require("webpack");
const ExtractTextPlugin = require("extract-text-webpack-plugin");
const autoprefixer = require('autoprefixer');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const AssetsPlugin = require('assets-webpack-plugin');
const assetsPluginInstance = new AssetsPlugin();
const CleanWebpackPlugin = require('clean-webpack-plugin');
// More code here...
Everything is working perfectly. I have vendors.js with all libraries and main.js with just the app code and logic. I would like to maintain this setup.
Let's take a look at vendors.ts:
// Polyfills
import 'angular2/bundles/angular2-polyfills.js';
// Other imports...
In this file, we are using the lodash library which functions correctly when tested in the Chrome console.
If we try to use lodash in my app.component.ts file:
export class AppComponent implements OnInit {
constructor() {
console.log(_.last([1, 2, 3]));
}
ngOnInit() {
}
}
We encounter the error:
ERROR in [default] /home/g-montag/WebstormProjects/Chat/src/app/app.component.ts:17:16
Cannot find name '_'.To resolve this issue, we need to import the library again, but doing so will result in lodash being imported into our main.js file as well, leading to duplicate code.
So, the ultimate question arises: How can we import lodash or another library in vendors.ts and utilize it in the app without repetitive imports?