Is it possible to include external file with webpack (outside the context) and make the file included in built output bundle.js?
consider this setup where "sub-app" is context for webpack:
And webpack config with broccoli:
var webpackify = require('broccoli-webpack');
var path = require('path');
var webpack = require("webpack");
var bundler = webpackify(path.resolve('sub-app'), {
entry: './entry',
output: {filename: './bundle.js'},
devtool: 'eval',
module: {
loaders: [
{test: /\.js$/, loader: 'babel-loader'},
{test: /\.hbs$/, loader: "handlebars-loader"}
]
},
plugins: [
new webpack.optimize.DedupePlugin(),
new webpack.optimize.UglifyJsPlugin()
]
});
I would like to include zepto.js in output bundle.js. But I need to preserve bower_components outside the sub-app.
You can use webpack-inject-plugin to inject any JS code as string into the resulting . js bundle created by webpack. This way you can read the File you want to inject as a string (e.g. fs. readFile in nodejs) and inject it with the plugin.
You can bundle your JavaScript using the CLI command by providing an entry file and output path. Webpack will automatically resolve all dependencies from import and require and bundle them into a single output together with your app's script.
May 4, 2020. Webpack externals tell Webpack to exclude a certain import from the bundle. Often externals are used to exclude imports that will be loaded via CDN. For example, suppose you are implementing server-side rendering with Vue and Express, but your client-side code imports Vue via a CDN.
You could solve this in two ways: Run all your code under the "dist" folder. Add publicPath property to your output config, that points to your output directory (in your case ./dist).
Ok found answer myself. No special adjustments are necessary. Only include external file in code with relative path:
In my case:
import zepto from './../bower_components/zepto/zepto.js';
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With