How to copy static files to build directory with Webpack?

by

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' }
            ]
        })
    ]
};

Compatibility note: If you’re using an old version of webpack like [email protected], use [email protected]. Otherwise use latest.

More Related Contents:

  1. What should I do to use this webpacked JS library? [closed]
  2. Passing environment-dependent variables in webpack
  3. babel-loader jsx SyntaxError: Unexpected token [duplicate]
  4. “You may need an appropriate loader to handle this file type” with Webpack and Babel
  5. Calling webpacked code from outside (HTML script tag)
  6. Resolving require paths with webpack
  7. How do I generate sourcemaps when using babel and webpack?
  8. What does “publicPath” in Webpack do?
  9. Using require(‘…’) with a variable vs. using a string in webpack
  10. How to bundle vendor scripts separately and require them as needed with Webpack?
  11. Error: Missing class properties transform
  12. webpack –watch isn’t compiling changed files
  13. Conditional build based on environment using Webpack
  14. Importing CSS files in Isomorphic React Components
  15. Webpack Express Cannot Resolve Module ‘fs’, Request Dependency is Expression
  16. Babel 7 – ReferenceError: regeneratorRuntime is not defined
  17. What are differences between SystemJS and Webpack?
  18. Webpack-dev-server compiles files but does not refresh or make compiled javascript available to browser
  19. Webpack: Bundle.js – Uncaught ReferenceError: process is not defined
  20. Webpack 5 – Uncaught ReferenceError: process is not defined
  21. Node JS and Webpack Unexpected token
  22. Example of how to load static CSS files from node_modules using webpack?
  23. How to disable ESLint in vue-cli?
  24. Run command after webpack build
  25. How can I use webpack with express?
  26. Webpack 4 migration CommonsChunkPlugin
  27. how can I use top level “await” in typescript next.js
  28. How can I fix the “BREAKING CHANGE: webpack < 5 used to include polyfills for node.js core modules by default" error?
  29. What does this javascript syntax mean ? (0, _parseKey2.default)(something) [duplicate]
  30. How to dynamically import SVG and render it inline

Leave a Comment