Question

对于我的生活，我不明白webpack是如何工作的。请有人帮帮我。我将解释我的情况，但实际上更多的是如何使用webpack的概念性问题

所以我正在使用webpack启动器进行角度2项目。我有一些来自AWS的js脚本（我的API-Gateway SDK）。它大约10个js文件。目前我在index.html中列出了这10个文件，效果很好。显然这并不是很好，因为这意味着10次往返服务器来收集它们。因此，我试图让webpack将它们包含在一个包中的过程开始了

所以我尝试做的是在我的主打字稿文件中逐个导入文件。我的应用程序被引导的文件。就像这样：

import 'assets/aws-sdk/lib/axios/dist/axios.standalone.js';
import 'assets/aws-sdk/lib/CryptoJS/rollups/hmac-sha256.js';
import 'assets/aws-sdk/lib/CryptoJS/rollups/sha256.js';
...

这是否是正确的做法。这不起作用。它抱怨CryptoJS无法在需要它的文件中使用。我带的是一些crypto-js文件，使用变量'CryptoJS'的文件似乎看不到它。

我在webpack配置中发现了一个似乎像这样加载jquery的ProvidePlugin

new webpack.ProvidePlugin({
  jQuery: 'jquery',
  $: 'jquery',
  /*CryptoJS: 'CryptoJS'*/
}),

所以我添加了Crypto认为它需要它。不起作用。

我的问题是这个。我需要在内部使用的js文件使用一个名为CryptoJS的变量来执行以下操作：

function hash(value) {
   return CryptoJS.SHA256(value);
}

这可以正常工作，包括index.html中的所有脚本，但是如何让我的webpack应用程序了解这意味着什么。我如何导入和捆绑这些文件，以及如何使用CryptoJS等文件的内部可变量。

Answer 1

好吧，经过几个小时的挣扎，我无所畏惧，我设法弄明白了。我正在做的导入是错误的，将js文件添加到全局空间（相当于将它们添加到index.html）就是这样导入它们

require('script!./assets/aws-sdk/lib/axios/dist/axios.standalone.js');

该脚本加载器具有魔力。你需要在你的项目中也可以从npm

安装

Webpack和加载自定义脚本

1 个答案: