Webpack.config how to just copy the index.html to the dist folder

I am trying to automate assets going into /dist. I have the following config.js:

module.exports =
context: __dirname + "/lib",
entry:
main: [
"./baa.ts"
]
,
output:
path: __dirname + "/dist",
filename: "foo.js"
,
devtool: "source-map",
module:
loaders: [

test: /.ts$/,
loader: 'awesome-typescript-loader'
,
test: /.css$/, loader: "style-loader!css-loader"
]
,
resolve:
// you can now require('file') instead of require('file.js')
extensions: ['', '.js', '.json']




I also want to include main.html from the directory that sits next to /lib, into the /dist folder when running webpack. How can I do this?

UPDATE 1 2017_____________

My favourite way to do this now is to use the html-webpack-plugin with a template file. Thanks to the accepted answer too! The advantage of this way is that the index file will also have the cachbusted js link added out of the box!

html-webpack-plugin

7 Answers
7

Option 1

In your index.js file (i.e. webpack entry) add a require to your index.html via file-loader plugin, e.g.:

index.js

index.html

require('file-loader?name=[name].[ext]!../index.html');

require('file-loader?name=[name].[ext]!../index.html');

Once you build your project with webpack, index.html will be in the output folder.

index.html

Option 2

Use html-webpack-plugin to avoid having an index.html at all. Simply have webpack generate the file for you.

-loader

require('file-loader?name=[name].[ext]!../index.html');

I will add an option to VitalyB's answer:

Option 3

Via npm. If you run your commands via npm, then you could add this setup to your package.json (check out also the webpack.config.js there too). For developing run npm start, no need to copy index.html in this case because the web server will be run from the source files directory, and the bundle.js will be available from the same place (the bundle.js will live in memory only but will available as if it was located together with index.html). For production run npm run build and a dist folder will contain your bundle.js and index.html gets copied with good old cp-command, as you can see below:

npm start

npm run build

"scripts":
"test": "NODE_ENV=test karma start",
"start": "node node_modules/.bin/webpack-dev-server --content-base app",
"build": "NODE_ENV=production node node_modules/.bin/webpack && cp app/index.html dist/index.html"



Update: Option 4

There is a copy-webpack-plugin, as described in this Stackoverflow answer

But generally, except for the very "first" file (like index.html) and larger assets (like large images or video), include the css, html, images and so on directly in your app via require and webpack will include it for you (well, after you set it up correctly with loaders and possibly plugins).

require

You could use the CopyWebpackPlugin. It's working just like this:

module.exports =
plugins: [
new CopyWebpackPlugin([
from: './*.html'
])
]



I would say the answer is: you can't. (or at least: you shouldn't). This is not what Webpack is supposed to do. Webpack is a bundler, and it should not be used for other tasks (in this case: copying static files is another task). You should use a tool like Grunt or Gulp to do such tasks. It is very common to integrate Webpack as a Grunt task or as a Gulp task. They both have other tasks useful for copying files like you described, for example, grunt-contrib-copy or gulp-copy.

For other assets (not the index.html), you can just bundle them in with Webpack (that is exactly what Webpack is for). For example, var image = require('assets/my_image.png');. But I assume your index.html needs to not be a part of the bundle, and therefore it is not a job for the bundler.

index.html

var image = require('assets/my_image.png');

index.html

file-loader

var url = require('myFile');

You can add the index directly to your entry config and using a file-loader to load it

module.exports =

entry: [
__dirname + "/index.html",
.. other js files here
],

module:
rules: [

test: /.html/,
loader: 'file-loader?name=[name].[ext]',
,
.. other loaders
]





This work well on Windows:

npm install --save-dev copyfiles

package.json

"copy": "copyfiles -u 1 ./app/index.html ./deploy"

This move my index.html from the app folder into the deploy folder.

I also found it easy and generic enough to put my index.html file in dist/ directory and add <script src='main.js'></script> to index.html to include my bundled webpack files. main.js seems to be default output name of our bundle if no other specified in webpack's conf file. I guess it's not good and long-term solution, but I hope it can help to understand how webpack works.

index.html

dist/

<script src='main.js'></script>

index.html

main.js

Thank you for your interest in this question.
Because it has attracted low-quality or spam answers that had to be removed, posting an answer now requires 10 reputation on this site (the association bonus does not count).



Would you like to answer one of these unanswered questions instead?