如何指定要包含在 Webpack 中的特定 css/js？答案

【问题标题】：How to specify specific css/js to include in Webpack?如何指定要包含在 Webpack 中的特定 css/js？
【发布时间】：2017-04-06 20:22:08
【问题描述】：

我已经启动了一个带有 Angular 2 的 .Net Core 项目。 Webpack 和一切对我来说都很新，但我开始理解它们。

我已经使用 dotnet new angular 创建了一个项目，并且我已经了解如何填充 webpack.config.vendor.js 以引用我的 nugets 包。

我现在有一些我想直接包含的 CSS/JS（没有带有它们的 nuget 包）（不知道在哪里放下摆，目前它们在 /libs/somefolder/something.js/.css

所以我尝试在entry: {vendor:[]} 数组(webpack.config.vendor.js) 中放入两个新条目：

entry: {
    vendor: [
        //Previous entries
        '/libs/somefolder/something.js',
        '/libs/somefolder/something.css',
    ]
},

但是当我运行webpack --config webpack.config.vendor.js 时，我得到了错误：

找不到 dll 供应商模块中的错误：错误：无法解析 '/libs/somefolder/something.js' in 'E:\My\Project.Web' @ dll vendor

找不到 dll 供应商模块中的错误：错误：无法解析 '/libs/somefolder/something.css' in 'E:\My\Project.Web' @ dll vendor

那么，我应该如何引用这些？

【问题讨论】：

您是否尝试过在resolve: {} 配置中添加modules: [path.resolve(__dirname, "libs"), "node_modules"]，然后将这些额外的库指定为somefolder/something.js？见resolve.modules
@DanielJ.G.这就是解决方案。你能把你的评论变成答案吗？
今后请避免使用“tag:title”格式，要么完全删除标签，要么将其以更自然/更自然的方式放入标题本身。阅读这篇帮助中心文章，了解如何正确使用标签stackoverflow.com/help/tagging
@Tseng 我发现这可以更好地理解问题的上下文。很多地方没有标签，甚至找不到主题
就像我说的，当你以“有机/自然”的方式使用它时没关系，请参阅我的编辑；）但只是将标签填充到标题中是不受欢迎的，因为它变得难以阅读并且不会不要总结问题：“.net core - mvc - not working”是一个糟糕的标题，因为它没有说明问题，只是有一堆标签。 tag 部分在大多数需求中就足够了，因为大多数人不看首页而是监控他们感兴趣的特定标签，即我正在监控 asp.net-core tag 和 mvvm，所以我们会看到他们是否是问题正确标记，无需将其填充在标题中

标签： angular webpack asp.net-core

【解决方案1】：

告诉 webpack 如何使用它的 resolve.modules 配置属性找到你的额外库。这样，它将能够找到放置在 libs 中的自定义库，而不仅仅是 node_modules 中的那些。

您的webpack.config.vendor.js 配置可能与此类似：

...
resolve: {
    extensions: [ '.js' ],
    modules: [path.resolve(__dirname, "libs"), "node_modules"]
}
entry: {
    vendor: [
        //Previous entries
        '/libs/somefolder/something.js',
        '/libs/somefolder/something.css',
    ]
},
...

【讨论】：