Webpack angularjs 复制 angularjs 模板，但不包含在 javascript 包中答案

【问题标题】：Webpack angularjs copy angularjs templates but don't include in javascript bundleWebpack angularjs 复制 angularjs 模板，但不包含在 javascript 包中
【发布时间】：2016-04-06 15:40:50
【问题描述】：

我想要做的是以一种方式配置 webpack，将 angular 1.x 指令等所需的所有部分 html 模板复制到一个单独的文件夹中（就像文件加载器对引用的资产所做的那样来自CSS）。我不希望将部分 html 包含在我的 javascript 包中，而是将它们全部放在一个带有散列名称的文件夹中。

我尝试配置文件加载器来执行此操作，但是当我在监视模式下运行 webpack 时，它还会将 dist 文件夹中的那些 html 再次复制到它，并附加一个新的哈希，并且基本上会在每个新的 html 显示时进行无限循环up 在该文件夹中被复制，因此一个新的 html 一次又一次地出现。我尝试为该加载程序设置一个exclude 匹配模式，但 webpack 仍在持续运行并监视该文件夹。

这是我的webpack.config.js 文件的摘录：

module: {
    loaders: [
        test: /\.html$/,
        exclude: /bundle\/templates/,
        loader: `file-loader?name=bundle/templates/[name]-[hash].[ext]
    ]
}

有没有一个加载器可以帮助我做我想做的事而无需求助于黑客？

【问题讨论】：

标签： javascript angularjs webpack

【解决方案1】：

好的，我找到了答案。问题不在于file-loader，即使没有exclude，它也像这样正确配置。导致无限循环的原因是一个动态需求，它创建了一个匹配这些复制资产的正则表达式......因此，通过为这个动态需求设置适当的上下文，问题得到了解决。

【讨论】：

您能分享您的解决方案吗？将来可能对其他人有用:)

【解决方案2】：

In the webpack.config file you can use the same way like this in the loader section. 

     { 
        test: /\.html$/,
        exclude: path.resolve(__dirname, 'index.html'),
        loader: 'file-loader',
        options: {
            name: '[name].[ext]',
            outputPath: 'views/'
        }
    },

在 webpack.config 文件的插件部分

 plugins: [ 
    new HtmlWebpackPlugin({
        template: 'index.html',
        inject: true
    }),
    new ExtractTextPlugin('bundle.css')
]

这将复制所有的 html，并从 index.html 中引用

【讨论】：