angular 2 webpack如何在不使用npm包的情况下引用本地js库答案

【问题标题】：angular 2 webpack how to refer to local js library without using npm packageangular 2 webpack如何在不使用npm包的情况下引用本地js库
【发布时间】：2017-03-15 05:59:55
【问题描述】：

我以为这很容易，但我迷路了。

我正在使用 webpack 构建一个 angular 2 应用程序，并在 index.html 中添加了这个：

<script src="./react-with-addons.min.js"></script>
<script src="./react-dom.min.js"></script>
<script type="text/javascript" src="./jnpr-vendors.min.js"></script>
<script type="text/javascript" src="./jnpr-components.min.js"></script>

所有这些 js 文件都与 index.html 文件在同一目录中。

但是当我使用 webpack 开发服务器时，所有这些文件都出现 404 错误：

http://localhost:3002/jnpr-components.min.js404（未找到）

很明显，外部的 js 文件并没有放到 dist/ 目录下，webpack 配置如下：

output : {
    path : helpers.root('dist'),
    publicPath : 'http://localhost:3002/',
    filename : '[name].js',
    chunkFilename : '[id].chunk.js'
  },

我什至创建了一个文件夹'dist'并将这些js库放在那个文件夹中，仍然找不到。

我记得 web-pack-server 在内存目录中使用 js 文件。但是现在如何在开发环境中引用一些本地文件呢？

谢谢

【问题讨论】：

标签： angular webpack webpack-dev-server

【解决方案1】：

要告诉webpack-dev-server 从哪里提供静态文件，您可以使用devServer.contentBase。默认是当前目录。

例如，如果您的库位于目录 assets（相对于 webpack 配置），则配置将如下所示：

devServer: {
  contentBase: path.resolve(__dirname, 'assets')
}

【讨论】：

【解决方案2】：

我认为您正在使用 angular-cli。如果是这样，那么您需要将您的 JS 文件放在 assets 目录中。然后在 index.html 中使用如下。

assets/your-file.js

因为 webpack 只允许提供那些在 assets 文件夹中或在 angular-cli.json 中定义为 assets 的文件。

【讨论】：