Javascript 如何在 webpack 中包含外部文件

声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow 原文地址: http://stackoverflow.com/questions/28964886/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me): StackOverFlow

提示:将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间:2020-08-23 02:39:33  来源:igfitidea点击:

How to include external file with webpack

javascriptwebpack

提问by Jan Mí?ek

Is it possible to include external file with webpack (outside the context) and make the file included in built output bundle.js?

是否可以使用 webpack(在上下文之外)包含外部文件并使该文件包含在构建的输出 bundle.js 中?

consider this setup where "sub-app" is context for webpack:

考虑这个设置,其中“子应用程序”是 webpack 的上下文:

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

And webpack config with broccoli:

以及带有花椰菜的 webpack 配置:

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.

我想在输出 bundle.js 中包含 zepto.js。但是我需要在子应用程序之外保留 bower_components。

回答by Jan Mí?ek

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';