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

Question

I am  trying to automate assets going into  dist  I have the following config js  module exports       context    dirname    quot  lib quot     entry        main           quot   baa ts quot               output        path    dirname    quot  dist quot       filename   quot foo js quot         devtool   quot source-map quot     module        loaders                    test     ts            loader   awesome-typescript-loader                   test     css    loader   quot style-loader css-loader quot                 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

User · Answer

To copy an already existing index html file into the dist directory you can simply use the HtmlWebpackPlugin by specifying the source index html as a template   const HtmlWebpackPlugin   require  html-webpack-plugin     module exports                plugins            new HtmlWebpackPlugin         template     path to index html                             The created dist index html file will be basically the same as your source file with the difference that bundled resources like  js files are injected with  lt script gt  tags by webpack  Minification and further options can be configured and are documented on github

User · Answer

This work well on Windows    npm install --save-dev copyfiles    In package json I have a copy task    copy    copyfiles -u 1   app index html   deploy    This move my index html from the app folder into the deploy folder

User · Answer

I also found it easy and generic enough to put my index html file in dist  directory and add  lt script src  main js  gt  lt  script gt  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

User · Answer

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

User · Answer

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

User · Answer

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    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  amp  amp  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

User · Answer

Option 1 In your index js file  i e  webpack entry  add a require to your index html via file-loader plugin  e g   require  file-loader name  name   ext     index html    Once you build your project with webpack  index html will be in the output folder  Option 2 Use html-webpack-plugin to avoid having an index html at all  Simply have webpack generate the file for you  In this case if you want to keep your own index html file as template  you may use this configuration      plugins        new HtmlWebpackPlugin         template   src index html                See the docs for more information

User · Answer

To extend  hobbeshunter s answer if you want to take only index html you can also use CopyPlugin  The main motivation to use this method over using other packages is because it s a nightmare to add many packages for every single type and config it etc  The easiest way is to use CopyPlugin for everything   npm install copy-webpack-plugin --save-dev   Then   const CopyPlugin   require  copy-webpack-plugin     module exports       plugins        new CopyPlugin           from   static   to   static             from   index html   to   index html   toType   file                      As you can see it copy the whole static folder along with all of it s content into dist folder   No css or file or any other plugins needed   While this method doesn t suit for everything  it would get the job done simply  amp  quickly

User · Answer

You could use the CopyWebpackPlugin  It s working just like this   module exports       plugins        new CopyWebpackPlugin          from       html

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

Examples related to webpack