Webpack angularjs复制angularjs模板,但不包含在javascript包中

时间:2016-04-06 15:40:51

标签: javascript angularjs webpack

我要做的是以一种方式配置webpack,将所有角度1.x指令中所需的部分html模板复制到一个单独的文件夹中(就像文件加载器对引用的资源一样)来自css)。我不希望部分htmls包含在我的javascript包中,而是将它们全部放在一个带有散列名称的文件夹中。

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

以下是我的webpack.config.js文件的摘录:

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

是否有一个装载机可以帮助我做我想要的而不诉诸黑客?

2 个答案:

答案 0 :(得分:1)

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

答案 1 :(得分:1)

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')
]

这将复制所有htmls,并将从index.html

中提及