使用 Webpack 仅生成供应商bundle

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

展望未来，我们希望切换到使用NPM和Webpack。最好是，我们最初希望使用 Webpack 只创建一个供应商捆绑包，然后替换我们的库.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 模板中并启动应用程序会立即导致控制台中的错误：

未

捕获的引用错误：未定义角度

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

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

我做了一个快速测试：

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

输出：

对象 { full： "1.7.8"，主要： 1，次要： 7，点： 8，代号： "热情遗忘" }

逗女发出"你好"。

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

相关内容

最新更新

热门标签：