angular2 webpack如何在不使用npm包的情况下引用本地js库

Question

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

我正在使用 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.js 404（未找到）

很明显，外部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 文件。但是现在如何在开发环境中引用一些本地文件呢？

谢谢

Answer 1

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

assets/your-file.js

因为 webpack 只允许在 assets 文件夹中或在 angular-cli.json.

中定义为资产的文件提供服务

Answer 2

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

例如，如果你的库在目录 assets 中（相对于 webpack 配置），配置将如下所示：

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

angular2 webpack如何在不使用npm包的情况下引用本地js库

angular 2 webpack how to refer to local js library without using npm package

webpack

webpack-dev-server

angular