Static-files-loader NPM

Static Files Loader

Description.

Inpired by the SixClaw's static-loader static-files-loader is an alternative where you can use your static files and copy them to the production build folder.

This is also compatible with Webpack 4

you can include: - favicon.ico - human.txt - robot.txt - .htaccess - sitemap.xml - and many more...

Next To Do

advanced Loader's options (Since right now is very basic).

Installing.

Installing via Yarn

yarn add --dev static-files-loader

Installing vía NPM

npm i -d static-files-loader

How to use.

Add the loader in webpack.config.js

...
module: {
  rules: [{
    test: /\.ico|txt$/,
    use: [
      {
        loader: "static-files-loader",
      },
    ],
  }],
}
...

In your main Javascript file import them as common js file.

/* eslint-disable */
import "./favicon.ico";
import "./robot.txt";
import "./human.txt";
/* eslint-enable */

Also you can pass the output query to specify the path where you want the file to ourput and if you want to rename it.

/* eslint-disable */
import "./humano.txt?output="human.txt";
import "./favicon.ico?output=favicon.ico";
import "./robot.txt?output=static/txt/robot.txt";
/* eslint-enable */

Now in your dev html source file (/src) add the files you're going to use

<head>
  <meta charset="UTF-8" />
  <title>React App</title>
  <link rel="shortcut icon" href="favicon.ico" /> <!-- ADD FAVICON -->
</head>

<body>
  <noscript>You need to enable JavaScript to run this app.</noscript>
  <div id="app"></div>
</body>

</html>

Finally when you generate your production folder the static files imported in your js will be able in the path you specified (by default webpack entry directory "/")

-public
--bundle.js
--style.css
--index.html
--favicon.ico
--robot.txt
--human.txt

Author.

Pedro La Rosa D. Linkedin Profile Pedro La Rosa D. Github Profile

loader-utils

@infinitebrahmanuniverse/nolb-stati @everything-registry/sub-chunk-2822

0.1.1

6 years ago

0.1.0

6 years ago