使用 Webpack 仅生成供应商捆绑包答案

【问题标题】：Using Webpack to only generate a vendor bundle使用 Webpack 仅生成供应商捆绑包
【发布时间】：2023-03-23 18:43:01
【问题描述】：

目前，我们使用 Bower 作为 AngularJS 项目的前端依赖项，并使用 bower-concat Grunt 任务将 bower_components 编译成 libraries.js 文件。以类似的方式，我们将库 CSS 文件捆绑到 libraries.css。

展望未来，我们想改用NPM 和Webpack。最好，我们最初希望使用 Webpack 仅创建一个供应商包，然后它将替换我们的 library.js 文件。我们还想使用 Webpack 来捆绑我们的供应商 CSS 文件。目前，我们希望继续使用 Grunt 的常规 concat 任务来处理应用程序逻辑和 CSS。本质上，我们希望在此切换中尽可能少地触及应用程序代码。

我试图通过将我的所有依赖项从 bower.json 移动到 package.json 并在需要的地方修复版本号和包名称，然后创建一个 index.js 文件来导入所有依赖项.

我的 webpack.config.js 目前看起来如下：

const path = require('path');

module.exports = {
    entry: './index.js',
    output: {
        filename: '[name].bundle.js',
        path: path.resolve(__dirname, 'src/main/webapp/app/js')
    },
    module: {
        rules: [
            {
                test: /\/.css$/,
                use: [
                    'style-loader',
                    'css-loader'
                ]
            }
        ]
    },
    optimization: {
        splitChunks: {
            chunks: 'all'
        }
    }
};

这段代码确实创建了一个main.bundle.js 和一个main~vendor.bundle.js 文件，但是在我们的HTML 模板中包含这些文件并启动应用程序会立即导致控制台出错：

未捕获的 ReferenceError：未定义角度

谷歌搜索该问题返回的结果很少，因为有关该主题的所有帖子都假定完全切换到 Webpack。

最终，我的问题归结为“您能否使用 Webpack 仅创建一个供应商捆绑包，然后可以将其包含在 Thymeleaf-style HTML 文件中，如果可以，如何？”

【问题讨论】：

那么当您打开 main-vendor.bundle.js 文件时 - 是否包含 angular？
@madflow 有，是的。我运行未压缩的 webpack 配置进行检查。即使使用expose-loader 或ProvidePlugin 似乎也无法识别。

标签： javascript angularjs npm webpack bower

【解决方案1】：

我做了一个快速测试：

//index.js
import angular from 'angular';
import angularAnimate from 'angular-animate';
import uirouter from '@uirouter/angularjs';

//src/main/webapp/app/js/app.js
angular
  .module('app', ['ui.router', 'ngAnimate'])
  .component('com', { template: 'hello' });

<!-- src/main/webapp/app/index.html -->
<html lang="en" ng-app="app">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>

    <script src="js/main.bundle.js"></script>
    <script src="js/vendors~main.bundle.js"></script>
    <script src="js/app.js"></script>
    <script>
        console.log(angular.version);
    </script>
</head>
<body>
    <com></com>
</body>
</html>

输出：

对象{完整：“1.7.8”，主要：1，次要：7，点：8，代号：“热情奉献”}

而后缀产生“你好”。

那么 - 你在做一些不同的事情吗？

【讨论】：

我在 index.js 中主要有不同的导入方式：``` import 'angular'; //其他导入```这样做似乎会产生一些改进，因为现在问题似乎是Highcharts不起作用。至少它不是说 angular 不再是未定义的，所以谢谢你的建议！