custom webpack plugin about create-apollo-app HOT 13 CLOSED

@veeramarni There are multiple ways to do it, but I'm going to support css out of the box.

To customize webpack config you can use webpackAppConfig.js, just add proper rule to load css as you normally do with webpack. This approach will work, if your rule is something that doesn't interfere with config generated by spin.js

You can also write spin.js plugin if you need clever webpack config part generation, the way spin.js does it now. There is no docs for writing a plugin yet, but you can check source code of spin.js. All webpack config generation stuff is done via plugins.

The general direction of spin.js is to provide as much out of the box as possible and provide mutliple ways to configure stuff, when out of the box can't work for some reason or another. Generally we want spin.js to not stay on developers way. We are going to add spin init command soon that will help you bootstrap small projects instantly by generating package.json with proper dependencies, after that we are going to work on supporting micro-services in the best way that can be possibly achieved.

from create-apollo-app.

Thanks for quick explanation. How do we overwrite few configuration, for example

If I do a production build, I get the following error

[at-loader] Ok, 0.446 sec.
webpack-for-server Time: 4672ms

ERROR in index.js from UglifyJs
Unexpected token: name (CounterRepository) [index.js:337,4]

[at-loader] Checking started in a separate process...

[at-loader] Ok, 0.674 sec.
webpack-for-web Time: 9285ms

ERROR in index.889b365ddea4346c3b4e.js from UglifyJs
Unexpected token operator «=», expected punc «,» [index.889b365ddea4346c3b4e.js:104,24]

ERROR in vendor.889b365ddea4346c3b4e.js from UglifyJs
Unexpected token: name (ClientLogger) [vendor.889b365ddea4346c3b4e.js:51881,6]

It was known issue with uglify that comes with web pack as it has some compilation issue with typescript and ES2015 as referred here. I need to use latest uglify to fix this issue like shown below.

load

    "uglifyjs-webpack-plugin": "^1.0.0-beta.2",

And then in webpack config.js

const UglifyJSPlugin = require('uglifyjs-webpack-plugin')
...
if (__DEV__) {
    basePlugins.push(new webpack.NamedModulesPlugin());
} else {
    basePlugins.push(new UglifyJSPlugin());
    basePlugins.push(new webpack.LoaderOptionsPlugin({ minimize: true }));
    basePlugins.push(new webpack.optimize.ModuleConcatenationPlugin());
}

How do we do this fix?

from create-apollo-app.

@veeramarni I propose to have the code in spin.js that detects if uglifyjs-webpack-plugin is in package.json devDependencies and if it is, then spin.js will use it instead of stock UglifyJSPlugin

from create-apollo-app.

@veeramarni I think if you just install

    "uglifyjs-webpack-plugin": "^1.0.0-beta.2",

it should be used automatically without any changes to spin.js

from create-apollo-app.

In my case, it is already installed. But we need to add that plugin to webpack-confg to use it.

from create-apollo-app.

@veeramarni But this plugin is added to config, during build.

from create-apollo-app.

@Vlasenko can you please elaborate? Do you mean i need to add something to webpackAppConfig file.

from create-apollo-app.

@veeramarni You need to just add the version of uglifyjs-webpack-plugin you want into devDependencies of your project:

yarn add -D uglifyjs-webpack-plugin@^1.0.0-beta.2

And this version will be used by spin.js and webpack automatically.

from create-apollo-app.

https://github.com/sysgears/spin.js/blob/master/src/plugins/WebpackPlugin.ts#L33
https://github.com/webpack/webpack/blob/master/lib/optimize/UglifyJsPlugin.js#L7

from create-apollo-app.

I do have it in the devDependencies.

But Webpack brings the version it is compatible with.
https://github.com/webpack/webpack/blob/master/package.json#L25

In my case, I have two uglifyjs-webpack-plugin and it uses the older version by default.

from create-apollo-app.

@veeramarni Strange that it doesn't behave like that for me. Okay, I have patched spin.js to use uglifyjs-webpack-plugin directly:
sysgears/spinjs@95a07b1
Please try [email protected]

from create-apollo-app.

thanks for quick fix, but getting the following error

> cross-env NODE_ENV=production spin build

spin error { [Error: Validation Error

UglifyJs Plugin Invalid Options

options['minimize'] should NOT have additional properties
]
  err:
   [ { keyword: 'additionalProperties',
       dataPath: '[\'minimize\']',
       schemaPath: '#/additionalProperties',
       params: { additionalProperty: 'minimize' },
       message: 'should NOT have additional properties' } ] }

from create-apollo-app.

@veeramarni Should be fixed in [email protected]

from create-apollo-app.