Webpack 和加载自定义脚本答案

【问题标题】：Webpack and Loading custom scriptsWebpack 和加载自定义脚本
【发布时间】：2016-06-09 14:39:20
【问题描述】：

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

所以我正在使用 webpack starter 开发一个 angular 2 项目。我有一些从 AWS 获得的 js 脚本（我的 API-Gateway 开发工具包）。它大约有 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 配置中发现了一个 ProvidePlugin，它似乎像这样加载 jquery

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

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

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

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

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

【问题讨论】：

标签： angular webpack cryptojs

【解决方案1】：

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

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

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

【讨论】：