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

Question

What I'm trying to do is configure webpack in a way that would copy all the partial html templates that are required in angular 1.x directives etc. into a separate folder (just like the file-loader does for assets referenced from css). I don't want the partial htmls to be included in my javascript bundle but rather have all of them in one folder with hashed names.

I tried configuring the file-loader to do it but when I run webpack in watch mode it also copies the those html in the dist folder again to it appending a new hash and essentially makes an infinite loop as every new html that shows up in that folder is copied, thus a new html appears and again and again. I tried to set an exclude matching pattern for that loader but webpack was still running constantly watching over that folder.

Here is the excerpt of my webpack.config.js file:

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

is there a loader that would help me do what I want without resorting to hacks?

Answer 1

Ok I have found the answer. The problem wasn't the file-loader which is configured correctly like this even without the exclude . What caused the infinite loop was a dynamic require that created a regex that matched those copied assets too... So by setting a proper context for this dynamic require the problem was resolved.

Answer 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/'
        }
    },

And in the plugins section of the webpack.config file

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

This will copy all the htmls and will be refered from the index.html