How to copy from node_modules assets in the public directory means gulp or webpack?

Warning: count(): Parameter must be an array or an object that implements Countable in /home/styllloz/public_html/qa-theme/donut-theme/qa-donut-layer.php on line 274
0 like 0 dislike
Develop an application in PHP, in frontend development I'm a dinosaur. I have several libraries connected via npm. I need to copy some folders from node_modules in the public project folder public/assets preserving the structure of subfolders. Example folders you want to copy:

- node_modules\\vue\\dist\\
- node_modules\\bootstrap\\dist\\

The output I want to obtain such a structure:

- public/assets/vue/dist
- public/assets/bootstrap/dist

Tell me how to do it means gulp or webpack, preferably purely available funds, without additional plugins.

And which is generally practices for publishing assets? Basically meet the Assembly just 1 file, the examples are full of plugins, tutorials written in different years and due to the rapid development of the tools presented there code often does not work, therefore it's difficult to learn.
by | 18 views

1 Answer

0 like 0 dislike
An example of a configuration for webpack version 4 (and previous works):
output: { path: resolve(__dirname, './dist'), publicPath: mode === 'development' ? '/' : 'static/', filename: '[name].js' }, module: { rules: [ { test: /\\.(png|jpg|jpeg|gif|svg|woff|ico|woff2|ttf|eot)(\\?.*$|$)/, loader: 'file-loader', exclude: /node_modules/, options: { name: '[path][name].[ext]?[hash]', publicPath: mode === 'development' ? ": './static' } }, { test: /\\.(png|jpg|jpeg|gif|svg)(\\?.*$|$)/, loader: 'file-loader', options: { regExp: /node_modules/, name: '[name].[ext]?[hash]', publicPath: mode === 'development' ? ": './static/img', outputPath: 'static/img' } } ] }

The first loader for a private assets, the second to node_modules.
In my case, it was necessary to move the static to get the correct path for it in the css of this (second loader):
{ background: transparent url(./static/_/node_modules/fancybox/dist/img/blank.gif); }

{ background: transparent url(./static/img/blank.gif); }

This configuration is simple, static is not a lot and I did not attempt somehow to optimize it (use the url-loader for example, to share the fonts and graphics, etc.).

Related questions

0 like 0 dislike
1 answer
0 like 0 dislike
2 answers
asked May 20, 2019 by Igor_Lozovyk
0 like 0 dislike
4 answers
asked Apr 5, 2019 by doroshenko_magic
0 like 0 dislike
2 answers
asked Jun 4, 2019 by vovaspace
110,608 questions
257,187 answers
40,796 users