阻止 WebPack 5 导入和捆绑第三方库？答案

【问题标题】：Prevent WebPack 5 to import and bundle third party libraries?阻止 WebPack 5 导入和捆绑第三方库？
【发布时间】：2021-07-27 01:51:34
【问题描述】：

我正在使用引导程序 5 的 Popover 编写示例代码
这是我的ts 文件：

import { Popover } from "bootstrap";

export class MdsPersianDateTimePicker {
  constructor(element: Element) {
   

    this.bsPopover = new Popover(element, {
      container: 'body',
      content: '',
      html: true,
      placement: 'bottom',
      title: ' ',
      trigger: 'manual',
      template: `....`,
      sanitize: false,
    });
  }
}

我正在使用 webpack 5 来打包我的代码。

webpack.config.js:

const path = require('path');
const webpack = require('webpack');
const TerserPlugin = require('terser-webpack-plugin');
const CssMinimizerPlugin = require('css-minimizer-webpack-plugin');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const RemoveEmptyScriptsPlugin = require('webpack-remove-empty-scripts');

module.exports = {
  entry: {
    'mds.bs.datetimepicker': './src/mds.bs.datetimepicker.ts',
    'mds.bs.datetimepicker.style': './src/mds.bs.datetimepicker.style.css',
  },
  devtool: 'source-map',
  mode: 'production',
  module: {
    rules: [{
      test: /\.tsx?$/,
      use: 'ts-loader',
      exclude: /node_modules/,
    }, {
      test: /.s?css$/,
      use: [{
          loader: MiniCssExtractPlugin.loader,
          options: {}
        },
        'css-loader'
      ],
    }],
  },
  resolve: {
    extensions: ['.tsx', '.ts', '.js'],
  },
  output: {
    filename: '[name].js',
    path: path.resolve(__dirname, 'dist'),
    clean: true
  },
  watch: false,
  devServer: {
    lazy: false,
    watchContentBase: true
  },
  optimization: {
    minimizer: [
      new TerserPlugin({
        extractComments: false,
      }),
      new CssMinimizerPlugin(),
    ],
  },
  plugins: [
    new RemoveEmptyScriptsPlugin(),
    new MiniCssExtractPlugin({
      filename: "[name].css",
      chunkFilename: "[id].css"
    }),
    new webpack.BannerPlugin({
      banner: `
Bootstrap 5+ Persian Date Time Picker Plugin
.....
      `
    })
  ]
};

tsconfig.json

{
  "compilerOptions": {
    "outDir": "./dist/",
    "noImplicitAny": true,
    "forceConsistentCasingInFileNames": true,
    "sourceMap": true,
    "module": "es6",
    "target": "es5",
    "jsx": "react",
    "allowJs": true,
    "moduleResolution": "node"
  }
}

一切正常，但是当我使用 npm run webpack 时，bootstrap 5 包含在捆绑文件中！
我不想要它，我只想捆绑我的 ts 文件。

【问题讨论】：

webpack.js.org/configuration/externals?
你做应用程序吗（然后externals 是要走的路，但你需要从window 提供引导程序）或库（那么你可能根本不需要 webpack 来发布你的代码）？
我正在开发图书馆。 @skyboyer
所以也许您不需要捆绑器？如果你想在 ES5 中发布你的库，你可以只用 Babel 处理你的 JS 文件，但仍然将它们彼此分开。这样也不会捆绑任何依赖项。当然，如果您愿意，您可以使用捆绑，但是您需要您的库的使用者将引导程序公开给全局变量，以便通过externals 使用它。图书馆用户付出的努力越多，事情就越难。

标签： webpack bootstrap-5

【解决方案1】：

我将以下内容添加到我的webpack.config.js，我的问题解决了：

  externals: {
    bootstrap: 'bootstrap',
  },

完全是我的webpack.config.js：

const path = require('path');
const webpack = require('webpack');
const TerserPlugin = require('terser-webpack-plugin');
const CssMinimizerPlugin = require('css-minimizer-webpack-plugin');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const RemoveEmptyScriptsPlugin = require('webpack-remove-empty-scripts');

module.exports = {
  entry: {
    'mds.bs.datetimepicker': './src/mds.bs.datetimepicker.ts',
    'mds.bs.datetimepicker.style': './src/mds.bs.datetimepicker.style.css',
  },
  devtool: 'source-map',
  mode: 'production',
  module: {
    rules: [{
      test: /\.tsx?$/,
      use: 'ts-loader',
      exclude: /node_modules/,
    }, {
      test: /.s?css$/,
      use: [{
          loader: MiniCssExtractPlugin.loader,
          options: {}
        },
        'css-loader'
      ],
    }],
  },
  resolve: {
    extensions: ['.tsx', '.ts', '.js'],
  },
  externals: {
    bootstrap: 'bootstrap',
  },
  output: {
    filename: '[name].js',
    path: path.resolve(__dirname, 'dist'),
    clean: true
  },
  watch: false,
  devServer: {
    lazy: false,
    watchContentBase: true
  },
  optimization: {
    minimizer: [
      new TerserPlugin({
        extractComments: false,
      }),
      new CssMinimizerPlugin(),
    ],
  },
  plugins: [
    new RemoveEmptyScriptsPlugin(),
    new MiniCssExtractPlugin({
      filename: "[name].css",
      chunkFilename: "[id].css"
    }),
    new webpack.BannerPlugin({
      banner: `
.
.
.
version : 4.0.0
      `
    })
  ]
};

【讨论】：