Issues with webpack-dev-middleware and couple of questions?

[asadsahi]

I am trying to replace native DLL implementation in my project with your plugin. My project uses webpack-dev-middleware instead of dev server. static assets are served by .net web server instead.

Questions:

1. DLL bundles generated once are cached or they are generated each time we start the app in development mode?
2. Can we specify names of dll bundles e.g instead of polyfills.dll.js > polyfills.js?
3. I think I don't need assets plugin configured as:

 new AddAssetHtmlPlugin([
        { filepath: helpers.root(`dll/${DllBundlesPlugin.resolveFile('polyfills')}`) },
        { filepath: helpers.root(`dll/${DllBundlesPlugin.resolveFile('vendor')}`) }
      ]),

In my scenario static files aren't dynamically injected. There is no index.html file I am using. In my case root file is index.cshtml (equivalent of index.html) which have static file reference already added.?

Issue:
4) I was putting 3rd party SCSS files like bootstrap, font awesome in DLL and was extracting to common styles.css file using extract text plugin. But DllBundlesPlugin is throwing exception for these files. Any idea how to handle them?

[shlomiassaf]

1. DLL bundles are cached. Each time a bundle is created metadata is saved indicating the packages used in the bundle and their versions. Each time you run webpack the plugin checks the current versions of the packages in the bundle, if they are different from the metadata saved a rebuild is done.

2. Not at the moment, this is something I will add if I have time (it's in the TODOS)

3. You don't this is just a suggestion, it does not fit all use cases.

4. A Bundle is a single container for multiple packages, using the extract plugin here makes no sense. If you want to extract don't include it in a bundle.

[maxisam]

I think what he wanna do is more like having a way to build a DLL for css files, like style.dll.css. How do we achieve this with this plugin ?

[asadsahi]

@shlomiassaf as @maxisam pointed out
with native dll, extract text plugin was extracting styles file applying all of its loader even scss files were added in vendor bundles like this:

vendor: [
            'font-awesome/scss/font-awesome.scss',
            'bootstrap/scss/bootstrap.scss',
            '@angular/common',
            '@angular/compiler',

But DLLBundlesPlugin errors for scss files.

[shlomiassaf]

@asadsahi What is the webpackconfig you are sending? does it have proper loaders?

[asadsahi]

@shlomiassaf checked the loaders and haven' changed since they are working with DLL plugin.

I was trying to implement same idea of putting css/sass files inside vendor array list like native DLL supports it. I also tried to create a seperate bundle for vendor style like this:

 new DllBundlesPlugin({
            bundles: {
                styles: [
                    '../node_modules/font-awesome/css/font-awesome.css',
                    '../node_modules/bootstrap/dist/css/bootstrap.css'
                ],
                polyfills: [
                    'core-js',
                    'zone.js',
                ],
                vendor: [
                    .....................

But DLLBundlePlugin says it cannot find '../node_modules/font-awesome/css/font-awesome.css' but font-awesome is found, so I am guessing plugin is reading npm packages and not the absolute/relative paths. Not sure for styles, what would be strategy to include in dll bundles.

What works right now for me is to remove styles from vendor bundles and requiring them from component like this:

require('../../node_modules/font-awesome/css/font-awesome.css');
require('../../node_modules/bootstrap/dist/css/bootstrap.css');

So in my project, I am loading styles using this config:

                test: /\.css$/, loader: ExtractTextPlugin.extract({
                    fallbackLoader: "style-loader",
                    loader: "css-loader"
                })
            },
            { test: /\.scss$/, use: ['raw-loader', 'sass-loader'] },

css loader for vendor styles and sass loader for component styles.

[maxisam]

@asadsahi You can actually use your own project name and set the path to the main.scss that imports all vendor scss.

Something like this.

  styles: [{
                        name: 'my-app',
                        path: helpers.root('styles', 'main.scss')
              }],

in main.scss you can import all vendor styles you like

@import "~bootstrap/scss/custom"

And don't forget to add this to plugin in DllBundlesPlugin

new ExtractTextPlugin("[name].bundle.css")

@shlomiassaf
The problem I am facing right now is it doesn't copy everything under dll folder. It only copies certain files.

However, when I use url-loader, it copies files to dll folder as assets that is referenced by vendor styles.

loader: 'url-loader?limit=10000&name=./assets/[name].[ext]'

I wonder if it can copy everything to output folder ?

[asadsahi]

@maxisam I think the mechanism in angular2-webpack-starter project to have component level styles to be inline and application level (including vendor styles) styles as seperate css bundle is a better implementation. At the same time we can have css/scss files as an option on top of that both for component or applicaiton level styles.

If I understand correctly you are injecting vendor styles through angular 2 component. Not sure if thats the best way to include 3rd party vendor css/scss files.

It isn't working in my project right now the way I wanted, but I am looking forward to @d3viant0ne refactoring first to see if the config can be simplified.

[maxisam]

@asadsahi I think you misunderstood. My solution did separate component's style and vendor's. I put all vendor style in a main.scss because I need to customize bootstrap's style by overwriting its variable. If you don't need to overwrite, you can point to bootstrap directly with the format I used.

…

On Jan 14, 2017 7:52 AM, "Asad Sahi" ***@***.***> wrote: @maxisam <https://github.com/maxisam> I think the mechanism in angular2-webpack-starter project to have component level styles and application level (including vendor styles) styles is better to have an option. At the same time we can have css/scss files as an option on top of that. I think you are injecting vendor styles through angular 2 component. Not sure if thats the best way to include 3rd party vendor css/scss files. It isn't working in my project right now the way I wanted, but I am looking forward to @d3viant0ne <https://github.com/d3viant0ne> refactoring to see if that simplifies this. — You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub <#3 (comment)>, or mute the thread <https://github.com/notifications/unsubscribe-auth/AAb4Z1goEFJqzasONtA9K_pIqw4bwG3dks5rSNMfgaJpZM4LhKTh> .

[asadsahi]

@maxisam have you got complete webpack config demonstrating this somewhere?

[maxisam]

@asadsahi It should be pretty straight forward. I only change the following part.

new DllBundlesPlugin({
            bundles: {
                styles: [{
                        name: 'my-app',
                        path: helpers.root('styles', 'main.scss')
               }],
                polyfills: [ 'core-js', ...  ],
                vendor: [  ..................... ]
                },
                dllDir: helpers.root('dll'),
                webpackConfig: webpackMergeDll(commonConfig({
                    env: ENV
                }), {
                    devtool: 'cheap-module-source-map',
                    plugins: [
                        new ExtractTextPlugin("[name].bundle.css")
                    ]
                })
            })

in main.scss import all your vendor's style

@import "~bootstrap/scss/custom"
@import "~bootstrap/scss/variables";
@import "~font-awesome/css/font-awesome.css";
....

[asadsahi]

@maxisam what is your production config?

[maxisam]

Well, I haven't decided yet. But did you try the change I mentioned ? Anything doesn't work ?

[asadsahi]

My config is slightly different than yours, but I have got both dev and prod config working.

Check this out.

I am not passing following in dll plugin though:

new ExtractTextPlugin("[name].bundle.css")

Just figuring out how to handle polyfills for aot though. for dev and prod configuration generates bundles fine.

[maxisam]

@asadsahi I thought you were trying to create a css DLL file ?

[asadsahi]

@maxisam css/scss config is in the common webpack config. I am extracting external css (bootstrap/font-awesome) into a vendor file in common config file. I am not creating any dll for CSS. Not needed.

[maxisam]

Why not ? If we create a CSS DLL file for vendors' style, we don't need to recompile that part all the time right ? Isn't it the whole point of creating DLL ?

[asadsahi]

@maxisam perhaps haven't felt the need yet. :)

But will give it a try to see the improvement with or without css dll.