排除外部庫捆綁在 webpack 中？

Question

我正在嘗試配置 webpack 以便我可以導入庫，但它們不會與我的代碼捆綁在一起，而是從鏈接到 html 文件的 CDN 提供。 我在一篇博客文章中讀到了這個實現，但忘記了如何去做。

這是一個基於matter-js庫的小項目。

webpack.config.js

module.exports = {
  mode: "production",
  entry: "./src/index",
  target: "web",
  output: {
    path: path.resolve(__dirname, "dist"),
    filename: "bundle.js"
  },
  module: {
    rules: [
      {
        test: /\.js$/,
        use: ["babel-loader"]
      },
      {
        test: /\.html$/,
        use: ["html-loader"]
      }
    ]
  },
  plugins: [
    new HtmlWebpackPlugin({
      filename: "index.html",
      template: path.join(__dirname, "./src/index.html"),
      scriptLoading: "defer",
      inject: "body"
    })
  ],
  devServer: {
    contentBase: path.join(__dirname, "dist"),
    compress: false,
    port: 3000,
    hot: true,
    open: true
  }
};

索引.html

<body>
    <!-- Matter JS CDN-->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/matter-js/0.14.2/matter.min.js"></script>

    <!-- The bundle will be injected here-->
  </body>

Answer 1

我找到了解決辦法。

matter-js 屬性是指來自 node-modules 的庫，值是指要從捆綁中排除的全局對象。

module.exports = {
  //...
  externals: {
    "matter-js": "Matter"
  },
  //...
};

排除外部庫捆綁在 webpack 中？

問題描述

1 個解決方案

解決方案1
0 已采納 2020-03-28 21:38:52

排除外部庫捆綁在 webpack 中？

問題描述

1 個解決方案

解決方案1 0 已采納 2020-03-28 21:38:52

解決方案1
0 已采納 2020-03-28 21:38:52