gonzofish / angular-librarian

An Angular 2+ scaffolding setup for creating libraries
https://www.npmjs.com/package/angular-librarian
MIT License
91 stars 9 forks source link

How to add assets? #36

Closed tommueller closed 7 years ago

tommueller commented 7 years ago

I am building an module which needs some graphics, but no matter where I put the image-files, I cannot get them to show either in the example page nor are they exported to the dist folder.

gonzofish commented 7 years ago

There isn't support for assets currently, again, pull requests are always welcomed.

In the meantime, you can update the webpack configuration to pullin files using the file-loader and url-loader. I believe this SurviveJS tutorial might help.

tommueller commented 7 years ago

any plans to implement this at any points? Just tried to figure this out, but I am too far behind with all the webpack stuff ...

w4lt-dev commented 7 years ago

Hi,

I am also new to the webpack stuff, after some trying I think I get it to work for me. I use two webpack plugins:

npm i -D copy-webpack-plugin
npm i -D write-file-webpack-plugin

webpack.dev.js

const CopyWebpackPlugin = require('copy-webpack-plugin');
const WriteFilePlugin = require('write-file-webpack-plugin');

plugins: [
...
    new WriteFilePlugin(),
        new CopyWebpackPlugin([
            { context: './examples/assets', from: '**/*', to: 'examples/assets' },
            { context: './src/assets', from: '**/*', to: 'assets' }
        ])

build.js

const assetDir = path.resolve(rootDir, 'src/assets');
const copyAssetFiles = () =>
    copyGlobs(['**/*'], assetDir, distDir + '/assets');

return Promise.resolve()
...
    .then(runPromise('Copying asset files to `dist`', copyAssetFiles))

For the webpack dev server all files are copied from examples/assets to dist/examples/assets and fromsrc/assets to dist/assets. The build copies from src/assets to dist/assets.