Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How to include external file with webpack

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:

  • /sub-app/entry.js
  • /bower-components/zepto/zepto.js

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.

like image 402
Jan Míšek Avatar asked Mar 10 '15 13:03

Jan Míšek


People also ask

How do I include a JavaScript file in webpack?

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.

How do I bundle files with webpack?

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.

What is external in webpack?

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.

How do I load an image with a webpack loader?

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).


1 Answers

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'; 
like image 195
Jan Míšek Avatar answered Sep 25 '22 18:09

Jan Míšek