I'm pretty new to Webpack, but can't figure out why my ProvidePlugin call is not working as expected.
I have the following file:
var App = function() {
getSomething: function(size) {}
}();
module.exports = App;
I want this 'App' variable to be globally accessible because other files use it like this:
var Layout = function () {
App.getSomething('md');
}();
In webpack.config.js I have the following line:
new webpack.ProvidePlugin({ App: 'app' })
This is my entry:
entry: {
'app': './angularApp/metronicapp.ts',
}
import './metronic/global/scripts/app';
Where app
is my app.js
which is displayed above.
I get the following error in the browser: Cannot find module "app"
And when I compile webpack in the console: Module not found: Error: Can't resolve 'app'
I can't figure what I'm missing. Is my app.js not in the correct format? Why is App
still not available globally?
ProvidePlugin
needs the path to your global module App.js
.
const path = require('path');
...
plugins: [
new webpack.ProvidePlugin({
App: path.resolve(__dirname, './path_to_App.js')
})
]
For Typescript not to complain about undefined constructs create global.d.ts
declare var App: any;
No need to import ./metronic/global/scripts/app
inside metronicapp.ts
, webpack will resolve App
on build.
App.getSomething('foo');
var Layout = function() {
App.getSomething('md');
}();
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.