时间戳

首页 > 解决方案 > 使用 Webpack 仅生成供应商捆绑包

javascript - 使用 Webpack 仅生成供应商捆绑包

问题描述

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

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

我试图通过将所有依赖项从bower.jsonto移动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-styleHTML 文件中吗？如果可以，如何？”

标签： javascriptangularjsnpmwebpackbower

解决方案

我做了一个快速测试：

//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，代号：“热情奉献”}

并且comonent产生“你好”。

所以 - 你在做一些不同的事情吗？

推荐阅读