How to copy static files to build directory with Webpack

Question

I m trying to move from Gulp to Webpack  In Gulp I have task which copies all files and folders from  static  folder to  build  folder  How to do the same with Webpack  Do I need some plugin

User · Answer

If you want to copy your static files you can use the file-loader in this way :

for html files :

in webpack.config.js :

module.exports = {
    ...
    module: {
        loaders: [
            { test: /\.(html)$/,
              loader: "file?name=[path][name].[ext]&context=./app/static"
            }
        ]
    }
};

in your js file :

  require.context("./static/", true, /^\.\/.*\.html/);

./static/ is relative to where your js file is.

You can do the same with images or whatever. The context is a powerful method to explore !!

User · Answer

I was stuck here too  copy-webpack-plugin worked for me   However   copy-webpack-plugin  was not necessary in my case  i learned later    webpack ignores root paths example   lt img src   images logo png  gt    Hence  to make this work without using  copy-webpack-plugin  use     in paths   lt img src   images logo png  gt        tells webpack to consider  images  as a module  note  you might have to add the parent directory of images directory in  resolve        modules             parent-directory of images            node modules            Visit https   vuejs-templates github io webpack static html

User · Answer

You don t need to copy things around  webpack works different than gulp  Webpack is a module bundler and everything you reference in your files will be included  You just need to specify a loader for that   So if you write   var myImage   require    static myImage jpg      Webpack will first try to parse the referenced file as JavaScript  because that s the default   Of course  that will fail  That s why you need to specify a loader for that file type  The file- or url-loader for instance take the referenced file  put it into webpack s output folder  which should be build in your case  and return the hashed url for that file   var myImage   require    static myImage jpg    console log myImage        build 12as7f9asfasgasg jpg    Usually loaders are applied via the webpack config      webpack config js  module exports                 module            loaders                  test      jpe g gif png svg woff ttf wav mp3     loader   file                         Of course you need to install the file-loader first to make this work

User · Answer

You can write bash in your package json     package json      name           version           scripts          build    NODE ENV production npm run webpack  amp  amp  cp -v  lt this gt   lt that gt   amp  amp  echo ok

User · Answer

The webpack config file  in webpack 2  allows you to export a promise chain  so long as the last step returns a webpack config object  See promise configuration docs  From there      webpack now supports returning a Promise from the configuration file  This allows to do async processing in you configuration file    You could create a simple recursive copy function that copies your file  and only after that triggers webpack  E g    module exports   function        return copyTheFiles  inpath  outpath  then  result   gt            return   entry             Etc etc

User · Answer

One advantage that the aforementioned copy-webpack-plugin brings that hasn t been explained before is that all the other methods mentioned here still bundle the resources into your bundle files  and require you to  require  or  import  them somewhere    If I just want to move some images around or some template partials  I don t want to clutter up my javascript bundle file with useless references to them  I just want the files emitted in the right place  I haven t found any other way to do this in webpack  Admittedly it s not what webpack originally was designed for  but it s definitely a current use case    BreakDS I hope this answers your question - it s only a benefit if you want it

User · Answer

Most likely you should use CopyWebpackPlugin which was mentioned in kevlened answer  Alternativly for some kind of files like  html or  json you can also use raw-loader or json-loader  Install it via npm install -D raw-loader and then what you only need to do is to add another loader to our webpack config js file   Like         test     html       loader   raw      Note  Restart the webpack-dev-server for any config changes to take effect   And now you can require html files using relative paths  this makes it much easier to move folders around   template  require    nav html

User · Answer

Requiring assets using the file-loader module is the way webpack is intended to be used  source   However  if you need greater flexibility or want a cleaner interface  you can also copy static files directly using my copy-webpack-plugin  npm  Github   For your static to build example  const CopyWebpackPlugin   require  copy-webpack-plugin      module exports         context  path join   dirname   your-app        plugins            new CopyWebpackPlugin               patterns                      from   static

User · Answer

lets say all your static assets are in a folder  static  at the root level and you want copy them to the build folder maintaining the structure of subfolder  then  in your entry file  just put     index js or index jsx  require context    file name  path  name   ext  amp context   static    static    true

User · Answer

The way I load static images and fonts   module        rules                                test      jpe g png gif svg   i             Exclude fonts while working with images  e g   svg can be both image or font             exclude  path resolve   dirname      src assets fonts            use               loader   file-loader             options                name    name   ext                outputPath   images                                                   test      woff 2   ttf eot svg otf    v  d    d    d                  Exclude images while working with fonts  e g   svg can be both image or font             exclude  path resolve   dirname      src assets images            use               loader   file-loader             options                name    name   ext                outputPath   fonts                                    Don t forget to install file-loader to have that working

User · Answer

Above suggestions are good   But to try to answer your question directly I d suggest using cpy-cli in a script defined in your package json   This example expects node to somewhere on your path  Install cpy-cli as a development dependency   npm install --save-dev cpy-cli  Then create a couple of nodejs files   One to do the copy and the other to display a checkmark and message   copy js     usr bin env node  var shelljs   require  shelljs    var addCheckMark   require    helpers checkmark    var path   require  path     var cpy   path join   dirname      node modules cpy-cli cli js     shelljs exec cpy      static    build    addCheckMark bind null  callback     function callback       process stdout write   Copied  static   to the  build  directory n n        checkmark js  var chalk   require  chalk            Adds mark check symbol     function addCheckMark callback      process stdout write chalk green           callback       module exports   addCheckMark    Add the script in package json  Assuming scripts are in  lt project-root gt  scripts        scripts        copy    node scripts copy js         To run the sript   npm run copy

[javascript] How to copy static files to build directory with Webpack?

Examples related to javascript

Examples related to webpack