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

Question

Currently, we use Bower for the front-end dependencies of our AngularJS project and the bower-concat Grunt task to compile our bower_components into a libraries.js file.目前，我们使用 Bower 作为AngularJS项目的前端依赖项，并使用bower-concat Grunt 任务将bower_components libraries.js成 library.js 文件。 In a similar manner, we bundle the library CSS files into a libraries.css .以类似的方式，我们将libraries.css CSS 文件捆绑到 library.css 中。

Looking towards the future, we want to switch to using NPM and Webpack .展望未来，我们想改用NPM和Webpack 。 Preferably, we'd initially like to use Webpack to only create a vendor bundle, which would then replace our libraries.js file.最好，我们最初希望使用 Webpack 仅创建一个供应商包，然后将替换我们的 library.js 文件。 We'd also like to use Webpack to bundle our vendor CSS files.我们还想使用 Webpack 来捆绑我们的供应商 CSS 文件。 For the time being, we'd like to keep on using Grunt's regular concat task for out application logic and CSS.目前，我们想继续使用 Grunt 的常规 concat 任务来处理应用程序逻辑和 CSS。 Essentially, we wish to touch as little application code as possible in this switch.本质上，我们希望在此切换中尽可能少地触及应用程序代码。

I've attempted to do this by moving all my dependencies from bower.json to package.json and fixing the version numbers and package names where needed, and then creating an index.j s file in which I import all the dependencies. I've attempted to do this by moving all my dependencies from bower.json to package.json and fixing the version numbers and package names where needed, and then creating an index.j s file in which I import all the dependencies.

My webpack.config.js currently looks as follows:我的 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'
        }
    }
};

This code does create both a main.bundle.js and a main~vendor.bundle.js file, but including the files in our HTML template and booting up the application immediately leads to an error in the console:这段代码确实创建了main.bundle.js和main~vendor.bundle.js文件，但是在我们的 HTML 模板中包含这些文件并立即启动应用程序会导致控制台出现错误：

Uncaught ReferenceError: angular is not defined未捕获的引用错误：未定义 angular

Googling the issue returns few results, since all posts on the subject assume a complete switch to Webpack.谷歌搜索该问题返回的结果很少，因为有关该主题的所有帖子都假定完全切换到 Webpack。

Ultimately, my question boils down to 'Can you use Webpack to create ONLY a vendor bundle, which can then be included in a Thymeleaf-style HTML file and if so, how?'最终，我的问题归结为“您能否使用 Webpack 仅创建一个供应商捆绑包，然后可以将其包含在Thymeleaf-style HTML 文件中，如果可以，如何？”

Answer 1

I did a quick test:我做了一个快速测试：

//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>

Outputs:输出：

Object { full: "1.7.8", major: 1, minor: 7, dot: 8, codeName: "enthusiastic-oblation" } Object {完整：“1.7.8”，主要：1，次要：7，点：8，代号：“热情奉献”}

And the comonent yields 'hello'.并且comonent产生“你好”。

So - are you doing something different?所以 - 你在做一些不同的事情吗？

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

问题描述

1 个解决方案

解决方案1
0 2019-09-27 15:56:37

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

问题描述

1 个解决方案

解决方案1 0 2019-09-27 15:56:37

解决方案1
0 2019-09-27 15:56:37