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 dev服务器时，所有这些文件都出现了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

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

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

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

Answer 2

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

assets/your-file.js

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

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

2 个答案: