Webpack 4 loader to easy copy static assets form the script soucre code via a #copy() function allowing to keep always clead the dist folder, very important for Progressive Web Application. Any kind of script language is supported. To avoid any compatibility problem the default copy function is #copy by default, but it could be customized via configuration. The loader have to be ingect as last loader of the loaders chain.

Installation

npm i -D copy-asset-loader

Configuration

The configuration is optional, but configure the plugin allow the developer to makes less mistakes and write less code.

Webpack config:

...

module: {
  rules: [
    {
      test: /\.js|.jsx?$/,
      exclude: [/node_modules/],
      use: [
        { loader: 'babel-loader' },
        {
          loader: 'copy-asset-loader',
          options: {
            src_root: path.resolve(__dirname, './src/assets/'),
            dest_root: path.resolve(__dirname, '../public/'),
            path_prefix: '/assets/',
            http: 'http://localhost:80',
          },
        },
      ],
    },
  ],
},

...

• copySymbol '#copy' by default;
• src_root path where the assets are stored in the source app folder.
• dest_root path where in the filesystem will be copied the file. If "path_prefix" is defined, will complete the path where the file will be copied.
• path_prefix it will follow http in the css output path.
• http If defined it will be the first part in the script output.

syntax:

const images = {
  image1: #copy(/images/image1.png),  // will be copied in public/assets/images/image1.png
  image2: #copy(/images/image2.png, /otherFolder/image2.png)  // will be copied in public/assets/otherFolder/image1.png
  image3: #copy(/images/image3.png, ~otherPrefix/image3.png),  // will be copied in public/otherPrefix/image3.png
};

result:

const images = {
  image1: 'http://localhost:80/assets/images/image1.png',
  image2: 'http://localhost:80/assets/otherFolder/image1.png',
  image3: 'http://localhost:80/otherPrefix/image3.png',
};

Copy functions

These functions allow the developer to copy the file defined in the first parameter into the path defined in the second one. Both parameters will considerate the preset defined in the plugin configuration.

• #copy($src, $dest); This function copy the file described in $src path paramenter in the $dest path paramenter. The $dest paramenter is optional, if path_prefix is defined in the plugin options and it will be added to this last in the script output if defined. If the path described in $dest starts with ~, the path position described in path_prefix will be ignored.