What does this single line of webpack html loader syntax mean?

Question

To solve a problem I was having with my webpack.config.js file I copied a line from a webpack blog. The line is starred in the code below. However I can't seem to easily figure out what the line is doing and googling didn't lead me to a simple explanation. So, what is the purpose/syntax of the indicated line? A short explanation would probably suffice, but a link to some (official) documentation would also be helpful.

var path = require('path'); module.exports = { entry: { javascript: ['babel-polyfill', './src/main.js'], html: './index.html' }, output: { path: path.join(__dirname, 'build'), filename: 'bundle.js' }, devtools: 'inline-source-map', module: { loaders: [ { loader: 'babel-loader', test: path.join(__dirname, 'src'), query: { presets: ['react', 'es2015', 'stage-2'] } }, { test: /\.html$/, loader: 'file?name=[name].[ext]' // <---- ********** } ] } };

7zark7 · Accepted Answer · 2016-08-10 01:55:04Z

3

The webpack file loader lets you specify a custom filename template for imported files using the name= query parameter:

https://github.com/webpack/file-loader#filename-templates

answered Aug 10, 2016 at 1:55

7zark7

10.2k5 gold badges42 silver badges54 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Andrew Willems Over a year ago

Your link takes me to the exact information I was looking for, e.g. explaining name and ext, and a further link from there takes me to more general information about using loaders, e.g. explaining ? and !. Many thanks.

Sean Vieira · Accepted Answer · 2016-08-10 01:59:57Z

Webpack 1 supports configuring a loader entirely through a query-string like DSL. Written in the alternative syntax for configuration makes it clear(er) what is going on:

{ test: /\.html$/, loader: 'file', // Use the file loader query: { // Configuring it with the following options name: '[name].[ext]' // Set the name of the HTML files that are output to be // the local name of the file, followed by a literal dot character // followed by the file's extension. } }

I chose the answer from @7zark7 because of the link(s). However, you've provided some very useful information about alternative syntax that is not (or at least not obviously) described in that answer, its direct link or the second link I mentioned. Thanks.

Collectives™ on Stack Overflow

What does this single line of webpack html loader syntax mean?

2 Answers 2

1 Comment

1 Comment

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

1 Comment

Related