使用 Webpack 仅生成供应商捆绑包
Posted
技术标签:
【中文标题】使用 Webpack 仅生成供应商捆绑包【英文标题】:Using Webpack to only generate a vendor bundle 【发布时间】:2020-01-26 12:30:45 【问题描述】:目前,我们使用 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.j
s 文件来导入所有依赖项.
我的 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 似乎也无法识别。 【参考方案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 不再是未定义的,所以谢谢你的建议!以上是关于使用 Webpack 仅生成供应商捆绑包的主要内容,如果未能解决你的问题,请参考以下文章
如何使用 Webpack 将供应商 CSS 文件捆绑到 React 应用程序中?
如何选择 node_modules dist 风格与 webpack 捆绑