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 followhttp
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, ifpath_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 inpath_prefix
will be ignored.