时间戳

首页 > 解决方案 > 如何“编译”一个模块？

webpack - 如何“编译”一个模块？

问题描述

我不知道如何准确地表达这个问题，所以我会用一个例子来做。（随时将问题标题编辑为更合适的名称）

考虑以下示例：

    import foo from 'foo'
    import bar from 'bar'

    import DATA from './data.json'

    const MY_DATA = foo.process(DATA).filter(bar.isBar)

    export default class {
        get data() {
            return MY_DATA
        }

        propA = true

        methodB() {
            // ...
        }
    }

是否可以导入只有这个类（和内容MY_DATA）由 Webpack 捆绑的这个模块？也就是说，我不想在这个块中包含“foo”、“bar”或“./data.json”。

过去我会使用忽略插件来做，但我不确定这是否仍然是 Webpack 4 的唯一选择，因为在整个构建过程中忽略一个模块并不总是理想的效果。

感谢您的任何提示！

标签： webpack

解决方案

我想externals这就是你正在寻找的东西。从文档：

防止捆绑某些导入的包，而是在运行时检索这些外部依赖项。

module.exports = {
  //...
  externals: {
    foo: 'foo',
    bar: 'bar',

    DATA: './data.json'
  }
};

这需要您手动将外部化脚本添加到 HTML 文档中。

推荐阅读