Webpack integrate webslides












0














I'm kinda new to webpack.



How would I integrate https://github.com/webslides/WebSlides into webpack?



webpack.config.vendor.js - https://pastebin.com/Fqj6U7Np



const path = require('path');
const webpack = require('webpack');
const ExtractTextPlugin = require('extract-text-webpack-plugin');
const merge = require('webpack-merge');
const treeShakableModules = [
'@angular/animations',
'@angular/common',
'@angular/compiler',
'@angular/core',
'@angular/forms',
'@angular/http',
'@angular/platform-browser',
'@angular/platform-browser-dynamic',
'@angular/router',
'zone.js',
];
const nonTreeShakableModules = [
'bootstrap',
'bootstrap/dist/css/bootstrap.css',
'es6-promise',
'es6-shim',
'event-source-polyfill',
'jquery',
];
const allModules = treeShakableModules.concat(nonTreeShakableModules);

module.exports = (env) => {
const extractCSS = new ExtractTextPlugin('vendor.css');
const isDevBuild = !(env && env.prod);
const sharedConfig = {
stats: { modules: false },
resolve: { extensions: [ '.js' ] },
module: {
rules: [
{ test: /.(png|woff|woff2|eot|ttf|svg)(?|$)/, use: 'url-loader?limit=100000' }
]
},
output: {
publicPath: 'dist/',
filename: '[name].js',
library: '[name]_[hash]'
},
plugins: [
new webpack.ProvidePlugin({ $: 'jquery', jQuery: 'jquery' }), // Maps these identifiers to the jQuery package (because Bootstrap expects it to be a global variable)
new webpack.ContextReplacementPlugin(/@angularb.*b(bundles|linker)/, path.join(__dirname, './ClientApp')), // Workaround for https://github.com/angular/angular/issues/11580
new webpack.ContextReplacementPlugin(/angular(\|/)core(\|/)@angular/, path.join(__dirname, './ClientApp')), // Workaround for https://github.com/angular/angular/issues/14898
new webpack.IgnorePlugin(/^vertx$/) // Workaround for https://github.com/stefanpenner/es6-promise/issues/100
]
};

const clientBundleConfig = merge(sharedConfig, {
entry: {
// To keep development builds fast, include all vendor dependencies in the vendor bundle.
// But for production builds, leave the tree-shakable ones out so the AOT compiler can produce a smaller bundle.
vendor: isDevBuild ? allModules : nonTreeShakableModules
},
output: { path: path.join(__dirname, 'wwwroot', 'dist') },
module: {
rules: [
{ test: /.css(?|$)/, use: extractCSS.extract({ use: isDevBuild ? 'css-loader' : 'css-loader?minimize' }) }
]
},
plugins: [
extractCSS,
new webpack.DllPlugin({
path: path.join(__dirname, 'wwwroot', 'dist', '[name]-manifest.json'),
name: '[name]_[hash]'
})
].concat(isDevBuild ? : [
new webpack.optimize.UglifyJsPlugin()
])
});

const serverBundleConfig = merge(sharedConfig, {
target: 'node',
resolve: { mainFields: ['main'] },
entry: { vendor: allModules.concat(['aspnet-prerendering']) },
output: {
path: path.join(__dirname, 'ClientApp', 'dist'),
libraryTarget: 'commonjs2',
},
module: {
rules: [ { test: /.css(?|$)/, use: ['to-string-loader', isDevBuild ? 'css-loader' : 'css-loader?minimize' ] } ]
},
plugins: [
new webpack.DllPlugin({
path: path.join(__dirname, 'ClientApp', 'dist', '[name]-manifest.json'),
name: '[name]_[hash]'
})
]
});

return [clientBundleConfig, serverBundleConfig];
}


and
webpack.config.js - https://pastebin.com/AB6F0RzU



const path = require('path');
const webpack = require('webpack');
const merge = require('webpack-merge');
const AotPlugin = require('@ngtools/webpack').AotPlugin;
const CheckerPlugin = require('awesome-typescript-loader').CheckerPlugin;

module.exports = (env) => {
// Configuration in common to both client-side and server-side bundles
const isDevBuild = !(env && env.prod);
const sharedConfig = {
stats: { modules: false },
context: __dirname,
resolve: { extensions: [ '.js', '.ts' ] },
output: {
filename: '[name].js',
publicPath: 'dist/' // Webpack dev middleware, if enabled, handles requests for this URL prefix
},
module: {
rules: [
{ test: /.ts$/, use: isDevBuild ? ['awesome-typescript-loader?silent=true', 'angular2-template-loader', 'angular2-router-loader'] : '@ngtools/webpack' },
{ test: /.html$/, use: 'html-loader?minimize=false' },
{ test: /.css$/, use: [ 'to-string-loader', isDevBuild ? 'css-loader' : 'css-loader?minimize' ] },
{ test: /.(png|jpg|jpeg|gif|svg)$/, use: 'url-loader?limit=25000' }
]
},
plugins: [new CheckerPlugin()]
};

// Configuration for client-side bundle suitable for running in browsers
const clientBundleOutputDir = './wwwroot/dist';
const clientBundleConfig = merge(sharedConfig, {
entry: { 'main-client': './ClientApp/boot.browser.ts' },
output: { path: path.join(__dirname, clientBundleOutputDir) },
plugins: [
new webpack.DllReferencePlugin({
context: __dirname,
manifest: require('./wwwroot/dist/vendor-manifest.json')
})
].concat(isDevBuild ? [
// Plugins that apply in development builds only
new webpack.SourceMapDevToolPlugin({
filename: '[file].map', // Remove this line if you prefer inline source maps
moduleFilenameTemplate: path.relative(clientBundleOutputDir, '[resourcePath]') // Point sourcemap entries to the original file locations on disk
})
] : [
// Plugins that apply in production builds only
new webpack.optimize.UglifyJsPlugin(),
new AotPlugin({
tsConfigPath: './tsconfig.json',
entryModule: path.join(__dirname, 'ClientApp/app/app.browser.module#AppModule'),
exclude: ['./**/*.server.ts']
})
])
});

// Configuration for server-side (prerendering) bundle suitable for running in Node
const serverBundleConfig = merge(sharedConfig, {
resolve: { mainFields: ['main'] },
entry: { 'main-server': './ClientApp/boot.server.ts' },
plugins: [
new webpack.DllReferencePlugin({
context: __dirname,
manifest: require('./ClientApp/dist/vendor-manifest.json'),
sourceType: 'commonjs2',
name: './vendor'
})
].concat(isDevBuild ? : [
// Plugins that apply in production builds only
new AotPlugin({
tsConfigPath: './tsconfig.json',
entryModule: path.join(__dirname, 'ClientApp/app/app.server.module#AppModule'),
exclude: ['./**/*.browser.ts']
})
]),
output: {
libraryTarget: 'commonjs',
path: path.join(__dirname, './ClientApp/dist')
},
target: 'node',
devtool: 'inline-source-map'
});

return [clientBundleConfig, serverBundleConfig];
};









share|improve this question



























    0














    I'm kinda new to webpack.



    How would I integrate https://github.com/webslides/WebSlides into webpack?



    webpack.config.vendor.js - https://pastebin.com/Fqj6U7Np



    const path = require('path');
    const webpack = require('webpack');
    const ExtractTextPlugin = require('extract-text-webpack-plugin');
    const merge = require('webpack-merge');
    const treeShakableModules = [
    '@angular/animations',
    '@angular/common',
    '@angular/compiler',
    '@angular/core',
    '@angular/forms',
    '@angular/http',
    '@angular/platform-browser',
    '@angular/platform-browser-dynamic',
    '@angular/router',
    'zone.js',
    ];
    const nonTreeShakableModules = [
    'bootstrap',
    'bootstrap/dist/css/bootstrap.css',
    'es6-promise',
    'es6-shim',
    'event-source-polyfill',
    'jquery',
    ];
    const allModules = treeShakableModules.concat(nonTreeShakableModules);

    module.exports = (env) => {
    const extractCSS = new ExtractTextPlugin('vendor.css');
    const isDevBuild = !(env && env.prod);
    const sharedConfig = {
    stats: { modules: false },
    resolve: { extensions: [ '.js' ] },
    module: {
    rules: [
    { test: /.(png|woff|woff2|eot|ttf|svg)(?|$)/, use: 'url-loader?limit=100000' }
    ]
    },
    output: {
    publicPath: 'dist/',
    filename: '[name].js',
    library: '[name]_[hash]'
    },
    plugins: [
    new webpack.ProvidePlugin({ $: 'jquery', jQuery: 'jquery' }), // Maps these identifiers to the jQuery package (because Bootstrap expects it to be a global variable)
    new webpack.ContextReplacementPlugin(/@angularb.*b(bundles|linker)/, path.join(__dirname, './ClientApp')), // Workaround for https://github.com/angular/angular/issues/11580
    new webpack.ContextReplacementPlugin(/angular(\|/)core(\|/)@angular/, path.join(__dirname, './ClientApp')), // Workaround for https://github.com/angular/angular/issues/14898
    new webpack.IgnorePlugin(/^vertx$/) // Workaround for https://github.com/stefanpenner/es6-promise/issues/100
    ]
    };

    const clientBundleConfig = merge(sharedConfig, {
    entry: {
    // To keep development builds fast, include all vendor dependencies in the vendor bundle.
    // But for production builds, leave the tree-shakable ones out so the AOT compiler can produce a smaller bundle.
    vendor: isDevBuild ? allModules : nonTreeShakableModules
    },
    output: { path: path.join(__dirname, 'wwwroot', 'dist') },
    module: {
    rules: [
    { test: /.css(?|$)/, use: extractCSS.extract({ use: isDevBuild ? 'css-loader' : 'css-loader?minimize' }) }
    ]
    },
    plugins: [
    extractCSS,
    new webpack.DllPlugin({
    path: path.join(__dirname, 'wwwroot', 'dist', '[name]-manifest.json'),
    name: '[name]_[hash]'
    })
    ].concat(isDevBuild ? : [
    new webpack.optimize.UglifyJsPlugin()
    ])
    });

    const serverBundleConfig = merge(sharedConfig, {
    target: 'node',
    resolve: { mainFields: ['main'] },
    entry: { vendor: allModules.concat(['aspnet-prerendering']) },
    output: {
    path: path.join(__dirname, 'ClientApp', 'dist'),
    libraryTarget: 'commonjs2',
    },
    module: {
    rules: [ { test: /.css(?|$)/, use: ['to-string-loader', isDevBuild ? 'css-loader' : 'css-loader?minimize' ] } ]
    },
    plugins: [
    new webpack.DllPlugin({
    path: path.join(__dirname, 'ClientApp', 'dist', '[name]-manifest.json'),
    name: '[name]_[hash]'
    })
    ]
    });

    return [clientBundleConfig, serverBundleConfig];
    }


    and
    webpack.config.js - https://pastebin.com/AB6F0RzU



    const path = require('path');
    const webpack = require('webpack');
    const merge = require('webpack-merge');
    const AotPlugin = require('@ngtools/webpack').AotPlugin;
    const CheckerPlugin = require('awesome-typescript-loader').CheckerPlugin;

    module.exports = (env) => {
    // Configuration in common to both client-side and server-side bundles
    const isDevBuild = !(env && env.prod);
    const sharedConfig = {
    stats: { modules: false },
    context: __dirname,
    resolve: { extensions: [ '.js', '.ts' ] },
    output: {
    filename: '[name].js',
    publicPath: 'dist/' // Webpack dev middleware, if enabled, handles requests for this URL prefix
    },
    module: {
    rules: [
    { test: /.ts$/, use: isDevBuild ? ['awesome-typescript-loader?silent=true', 'angular2-template-loader', 'angular2-router-loader'] : '@ngtools/webpack' },
    { test: /.html$/, use: 'html-loader?minimize=false' },
    { test: /.css$/, use: [ 'to-string-loader', isDevBuild ? 'css-loader' : 'css-loader?minimize' ] },
    { test: /.(png|jpg|jpeg|gif|svg)$/, use: 'url-loader?limit=25000' }
    ]
    },
    plugins: [new CheckerPlugin()]
    };

    // Configuration for client-side bundle suitable for running in browsers
    const clientBundleOutputDir = './wwwroot/dist';
    const clientBundleConfig = merge(sharedConfig, {
    entry: { 'main-client': './ClientApp/boot.browser.ts' },
    output: { path: path.join(__dirname, clientBundleOutputDir) },
    plugins: [
    new webpack.DllReferencePlugin({
    context: __dirname,
    manifest: require('./wwwroot/dist/vendor-manifest.json')
    })
    ].concat(isDevBuild ? [
    // Plugins that apply in development builds only
    new webpack.SourceMapDevToolPlugin({
    filename: '[file].map', // Remove this line if you prefer inline source maps
    moduleFilenameTemplate: path.relative(clientBundleOutputDir, '[resourcePath]') // Point sourcemap entries to the original file locations on disk
    })
    ] : [
    // Plugins that apply in production builds only
    new webpack.optimize.UglifyJsPlugin(),
    new AotPlugin({
    tsConfigPath: './tsconfig.json',
    entryModule: path.join(__dirname, 'ClientApp/app/app.browser.module#AppModule'),
    exclude: ['./**/*.server.ts']
    })
    ])
    });

    // Configuration for server-side (prerendering) bundle suitable for running in Node
    const serverBundleConfig = merge(sharedConfig, {
    resolve: { mainFields: ['main'] },
    entry: { 'main-server': './ClientApp/boot.server.ts' },
    plugins: [
    new webpack.DllReferencePlugin({
    context: __dirname,
    manifest: require('./ClientApp/dist/vendor-manifest.json'),
    sourceType: 'commonjs2',
    name: './vendor'
    })
    ].concat(isDevBuild ? : [
    // Plugins that apply in production builds only
    new AotPlugin({
    tsConfigPath: './tsconfig.json',
    entryModule: path.join(__dirname, 'ClientApp/app/app.server.module#AppModule'),
    exclude: ['./**/*.browser.ts']
    })
    ]),
    output: {
    libraryTarget: 'commonjs',
    path: path.join(__dirname, './ClientApp/dist')
    },
    target: 'node',
    devtool: 'inline-source-map'
    });

    return [clientBundleConfig, serverBundleConfig];
    };









    share|improve this question

























      0












      0








      0







      I'm kinda new to webpack.



      How would I integrate https://github.com/webslides/WebSlides into webpack?



      webpack.config.vendor.js - https://pastebin.com/Fqj6U7Np



      const path = require('path');
      const webpack = require('webpack');
      const ExtractTextPlugin = require('extract-text-webpack-plugin');
      const merge = require('webpack-merge');
      const treeShakableModules = [
      '@angular/animations',
      '@angular/common',
      '@angular/compiler',
      '@angular/core',
      '@angular/forms',
      '@angular/http',
      '@angular/platform-browser',
      '@angular/platform-browser-dynamic',
      '@angular/router',
      'zone.js',
      ];
      const nonTreeShakableModules = [
      'bootstrap',
      'bootstrap/dist/css/bootstrap.css',
      'es6-promise',
      'es6-shim',
      'event-source-polyfill',
      'jquery',
      ];
      const allModules = treeShakableModules.concat(nonTreeShakableModules);

      module.exports = (env) => {
      const extractCSS = new ExtractTextPlugin('vendor.css');
      const isDevBuild = !(env && env.prod);
      const sharedConfig = {
      stats: { modules: false },
      resolve: { extensions: [ '.js' ] },
      module: {
      rules: [
      { test: /.(png|woff|woff2|eot|ttf|svg)(?|$)/, use: 'url-loader?limit=100000' }
      ]
      },
      output: {
      publicPath: 'dist/',
      filename: '[name].js',
      library: '[name]_[hash]'
      },
      plugins: [
      new webpack.ProvidePlugin({ $: 'jquery', jQuery: 'jquery' }), // Maps these identifiers to the jQuery package (because Bootstrap expects it to be a global variable)
      new webpack.ContextReplacementPlugin(/@angularb.*b(bundles|linker)/, path.join(__dirname, './ClientApp')), // Workaround for https://github.com/angular/angular/issues/11580
      new webpack.ContextReplacementPlugin(/angular(\|/)core(\|/)@angular/, path.join(__dirname, './ClientApp')), // Workaround for https://github.com/angular/angular/issues/14898
      new webpack.IgnorePlugin(/^vertx$/) // Workaround for https://github.com/stefanpenner/es6-promise/issues/100
      ]
      };

      const clientBundleConfig = merge(sharedConfig, {
      entry: {
      // To keep development builds fast, include all vendor dependencies in the vendor bundle.
      // But for production builds, leave the tree-shakable ones out so the AOT compiler can produce a smaller bundle.
      vendor: isDevBuild ? allModules : nonTreeShakableModules
      },
      output: { path: path.join(__dirname, 'wwwroot', 'dist') },
      module: {
      rules: [
      { test: /.css(?|$)/, use: extractCSS.extract({ use: isDevBuild ? 'css-loader' : 'css-loader?minimize' }) }
      ]
      },
      plugins: [
      extractCSS,
      new webpack.DllPlugin({
      path: path.join(__dirname, 'wwwroot', 'dist', '[name]-manifest.json'),
      name: '[name]_[hash]'
      })
      ].concat(isDevBuild ? : [
      new webpack.optimize.UglifyJsPlugin()
      ])
      });

      const serverBundleConfig = merge(sharedConfig, {
      target: 'node',
      resolve: { mainFields: ['main'] },
      entry: { vendor: allModules.concat(['aspnet-prerendering']) },
      output: {
      path: path.join(__dirname, 'ClientApp', 'dist'),
      libraryTarget: 'commonjs2',
      },
      module: {
      rules: [ { test: /.css(?|$)/, use: ['to-string-loader', isDevBuild ? 'css-loader' : 'css-loader?minimize' ] } ]
      },
      plugins: [
      new webpack.DllPlugin({
      path: path.join(__dirname, 'ClientApp', 'dist', '[name]-manifest.json'),
      name: '[name]_[hash]'
      })
      ]
      });

      return [clientBundleConfig, serverBundleConfig];
      }


      and
      webpack.config.js - https://pastebin.com/AB6F0RzU



      const path = require('path');
      const webpack = require('webpack');
      const merge = require('webpack-merge');
      const AotPlugin = require('@ngtools/webpack').AotPlugin;
      const CheckerPlugin = require('awesome-typescript-loader').CheckerPlugin;

      module.exports = (env) => {
      // Configuration in common to both client-side and server-side bundles
      const isDevBuild = !(env && env.prod);
      const sharedConfig = {
      stats: { modules: false },
      context: __dirname,
      resolve: { extensions: [ '.js', '.ts' ] },
      output: {
      filename: '[name].js',
      publicPath: 'dist/' // Webpack dev middleware, if enabled, handles requests for this URL prefix
      },
      module: {
      rules: [
      { test: /.ts$/, use: isDevBuild ? ['awesome-typescript-loader?silent=true', 'angular2-template-loader', 'angular2-router-loader'] : '@ngtools/webpack' },
      { test: /.html$/, use: 'html-loader?minimize=false' },
      { test: /.css$/, use: [ 'to-string-loader', isDevBuild ? 'css-loader' : 'css-loader?minimize' ] },
      { test: /.(png|jpg|jpeg|gif|svg)$/, use: 'url-loader?limit=25000' }
      ]
      },
      plugins: [new CheckerPlugin()]
      };

      // Configuration for client-side bundle suitable for running in browsers
      const clientBundleOutputDir = './wwwroot/dist';
      const clientBundleConfig = merge(sharedConfig, {
      entry: { 'main-client': './ClientApp/boot.browser.ts' },
      output: { path: path.join(__dirname, clientBundleOutputDir) },
      plugins: [
      new webpack.DllReferencePlugin({
      context: __dirname,
      manifest: require('./wwwroot/dist/vendor-manifest.json')
      })
      ].concat(isDevBuild ? [
      // Plugins that apply in development builds only
      new webpack.SourceMapDevToolPlugin({
      filename: '[file].map', // Remove this line if you prefer inline source maps
      moduleFilenameTemplate: path.relative(clientBundleOutputDir, '[resourcePath]') // Point sourcemap entries to the original file locations on disk
      })
      ] : [
      // Plugins that apply in production builds only
      new webpack.optimize.UglifyJsPlugin(),
      new AotPlugin({
      tsConfigPath: './tsconfig.json',
      entryModule: path.join(__dirname, 'ClientApp/app/app.browser.module#AppModule'),
      exclude: ['./**/*.server.ts']
      })
      ])
      });

      // Configuration for server-side (prerendering) bundle suitable for running in Node
      const serverBundleConfig = merge(sharedConfig, {
      resolve: { mainFields: ['main'] },
      entry: { 'main-server': './ClientApp/boot.server.ts' },
      plugins: [
      new webpack.DllReferencePlugin({
      context: __dirname,
      manifest: require('./ClientApp/dist/vendor-manifest.json'),
      sourceType: 'commonjs2',
      name: './vendor'
      })
      ].concat(isDevBuild ? : [
      // Plugins that apply in production builds only
      new AotPlugin({
      tsConfigPath: './tsconfig.json',
      entryModule: path.join(__dirname, 'ClientApp/app/app.server.module#AppModule'),
      exclude: ['./**/*.browser.ts']
      })
      ]),
      output: {
      libraryTarget: 'commonjs',
      path: path.join(__dirname, './ClientApp/dist')
      },
      target: 'node',
      devtool: 'inline-source-map'
      });

      return [clientBundleConfig, serverBundleConfig];
      };









      share|improve this question













      I'm kinda new to webpack.



      How would I integrate https://github.com/webslides/WebSlides into webpack?



      webpack.config.vendor.js - https://pastebin.com/Fqj6U7Np



      const path = require('path');
      const webpack = require('webpack');
      const ExtractTextPlugin = require('extract-text-webpack-plugin');
      const merge = require('webpack-merge');
      const treeShakableModules = [
      '@angular/animations',
      '@angular/common',
      '@angular/compiler',
      '@angular/core',
      '@angular/forms',
      '@angular/http',
      '@angular/platform-browser',
      '@angular/platform-browser-dynamic',
      '@angular/router',
      'zone.js',
      ];
      const nonTreeShakableModules = [
      'bootstrap',
      'bootstrap/dist/css/bootstrap.css',
      'es6-promise',
      'es6-shim',
      'event-source-polyfill',
      'jquery',
      ];
      const allModules = treeShakableModules.concat(nonTreeShakableModules);

      module.exports = (env) => {
      const extractCSS = new ExtractTextPlugin('vendor.css');
      const isDevBuild = !(env && env.prod);
      const sharedConfig = {
      stats: { modules: false },
      resolve: { extensions: [ '.js' ] },
      module: {
      rules: [
      { test: /.(png|woff|woff2|eot|ttf|svg)(?|$)/, use: 'url-loader?limit=100000' }
      ]
      },
      output: {
      publicPath: 'dist/',
      filename: '[name].js',
      library: '[name]_[hash]'
      },
      plugins: [
      new webpack.ProvidePlugin({ $: 'jquery', jQuery: 'jquery' }), // Maps these identifiers to the jQuery package (because Bootstrap expects it to be a global variable)
      new webpack.ContextReplacementPlugin(/@angularb.*b(bundles|linker)/, path.join(__dirname, './ClientApp')), // Workaround for https://github.com/angular/angular/issues/11580
      new webpack.ContextReplacementPlugin(/angular(\|/)core(\|/)@angular/, path.join(__dirname, './ClientApp')), // Workaround for https://github.com/angular/angular/issues/14898
      new webpack.IgnorePlugin(/^vertx$/) // Workaround for https://github.com/stefanpenner/es6-promise/issues/100
      ]
      };

      const clientBundleConfig = merge(sharedConfig, {
      entry: {
      // To keep development builds fast, include all vendor dependencies in the vendor bundle.
      // But for production builds, leave the tree-shakable ones out so the AOT compiler can produce a smaller bundle.
      vendor: isDevBuild ? allModules : nonTreeShakableModules
      },
      output: { path: path.join(__dirname, 'wwwroot', 'dist') },
      module: {
      rules: [
      { test: /.css(?|$)/, use: extractCSS.extract({ use: isDevBuild ? 'css-loader' : 'css-loader?minimize' }) }
      ]
      },
      plugins: [
      extractCSS,
      new webpack.DllPlugin({
      path: path.join(__dirname, 'wwwroot', 'dist', '[name]-manifest.json'),
      name: '[name]_[hash]'
      })
      ].concat(isDevBuild ? : [
      new webpack.optimize.UglifyJsPlugin()
      ])
      });

      const serverBundleConfig = merge(sharedConfig, {
      target: 'node',
      resolve: { mainFields: ['main'] },
      entry: { vendor: allModules.concat(['aspnet-prerendering']) },
      output: {
      path: path.join(__dirname, 'ClientApp', 'dist'),
      libraryTarget: 'commonjs2',
      },
      module: {
      rules: [ { test: /.css(?|$)/, use: ['to-string-loader', isDevBuild ? 'css-loader' : 'css-loader?minimize' ] } ]
      },
      plugins: [
      new webpack.DllPlugin({
      path: path.join(__dirname, 'ClientApp', 'dist', '[name]-manifest.json'),
      name: '[name]_[hash]'
      })
      ]
      });

      return [clientBundleConfig, serverBundleConfig];
      }


      and
      webpack.config.js - https://pastebin.com/AB6F0RzU



      const path = require('path');
      const webpack = require('webpack');
      const merge = require('webpack-merge');
      const AotPlugin = require('@ngtools/webpack').AotPlugin;
      const CheckerPlugin = require('awesome-typescript-loader').CheckerPlugin;

      module.exports = (env) => {
      // Configuration in common to both client-side and server-side bundles
      const isDevBuild = !(env && env.prod);
      const sharedConfig = {
      stats: { modules: false },
      context: __dirname,
      resolve: { extensions: [ '.js', '.ts' ] },
      output: {
      filename: '[name].js',
      publicPath: 'dist/' // Webpack dev middleware, if enabled, handles requests for this URL prefix
      },
      module: {
      rules: [
      { test: /.ts$/, use: isDevBuild ? ['awesome-typescript-loader?silent=true', 'angular2-template-loader', 'angular2-router-loader'] : '@ngtools/webpack' },
      { test: /.html$/, use: 'html-loader?minimize=false' },
      { test: /.css$/, use: [ 'to-string-loader', isDevBuild ? 'css-loader' : 'css-loader?minimize' ] },
      { test: /.(png|jpg|jpeg|gif|svg)$/, use: 'url-loader?limit=25000' }
      ]
      },
      plugins: [new CheckerPlugin()]
      };

      // Configuration for client-side bundle suitable for running in browsers
      const clientBundleOutputDir = './wwwroot/dist';
      const clientBundleConfig = merge(sharedConfig, {
      entry: { 'main-client': './ClientApp/boot.browser.ts' },
      output: { path: path.join(__dirname, clientBundleOutputDir) },
      plugins: [
      new webpack.DllReferencePlugin({
      context: __dirname,
      manifest: require('./wwwroot/dist/vendor-manifest.json')
      })
      ].concat(isDevBuild ? [
      // Plugins that apply in development builds only
      new webpack.SourceMapDevToolPlugin({
      filename: '[file].map', // Remove this line if you prefer inline source maps
      moduleFilenameTemplate: path.relative(clientBundleOutputDir, '[resourcePath]') // Point sourcemap entries to the original file locations on disk
      })
      ] : [
      // Plugins that apply in production builds only
      new webpack.optimize.UglifyJsPlugin(),
      new AotPlugin({
      tsConfigPath: './tsconfig.json',
      entryModule: path.join(__dirname, 'ClientApp/app/app.browser.module#AppModule'),
      exclude: ['./**/*.server.ts']
      })
      ])
      });

      // Configuration for server-side (prerendering) bundle suitable for running in Node
      const serverBundleConfig = merge(sharedConfig, {
      resolve: { mainFields: ['main'] },
      entry: { 'main-server': './ClientApp/boot.server.ts' },
      plugins: [
      new webpack.DllReferencePlugin({
      context: __dirname,
      manifest: require('./ClientApp/dist/vendor-manifest.json'),
      sourceType: 'commonjs2',
      name: './vendor'
      })
      ].concat(isDevBuild ? : [
      // Plugins that apply in production builds only
      new AotPlugin({
      tsConfigPath: './tsconfig.json',
      entryModule: path.join(__dirname, 'ClientApp/app/app.server.module#AppModule'),
      exclude: ['./**/*.browser.ts']
      })
      ]),
      output: {
      libraryTarget: 'commonjs',
      path: path.join(__dirname, './ClientApp/dist')
      },
      target: 'node',
      devtool: 'inline-source-map'
      });

      return [clientBundleConfig, serverBundleConfig];
      };






      webpack






      share|improve this question













      share|improve this question











      share|improve this question




      share|improve this question










      asked Nov 14 '18 at 11:49









      Burt

      4,7451558116




      4,7451558116
























          0






          active

          oldest

          votes











          Your Answer






          StackExchange.ifUsing("editor", function () {
          StackExchange.using("externalEditor", function () {
          StackExchange.using("snippets", function () {
          StackExchange.snippets.init();
          });
          });
          }, "code-snippets");

          StackExchange.ready(function() {
          var channelOptions = {
          tags: "".split(" "),
          id: "1"
          };
          initTagRenderer("".split(" "), "".split(" "), channelOptions);

          StackExchange.using("externalEditor", function() {
          // Have to fire editor after snippets, if snippets enabled
          if (StackExchange.settings.snippets.snippetsEnabled) {
          StackExchange.using("snippets", function() {
          createEditor();
          });
          }
          else {
          createEditor();
          }
          });

          function createEditor() {
          StackExchange.prepareEditor({
          heartbeatType: 'answer',
          autoActivateHeartbeat: false,
          convertImagesToLinks: true,
          noModals: true,
          showLowRepImageUploadWarning: true,
          reputationToPostImages: 10,
          bindNavPrevention: true,
          postfix: "",
          imageUploader: {
          brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
          contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
          allowUrls: true
          },
          onDemand: true,
          discardSelector: ".discard-answer"
          ,immediatelyShowMarkdownHelp:true
          });


          }
          });














          draft saved

          draft discarded


















          StackExchange.ready(
          function () {
          StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53299581%2fwebpack-integrate-webslides%23new-answer', 'question_page');
          }
          );

          Post as a guest















          Required, but never shown

























          0






          active

          oldest

          votes








          0






          active

          oldest

          votes









          active

          oldest

          votes






          active

          oldest

          votes
















          draft saved

          draft discarded




















































          Thanks for contributing an answer to Stack Overflow!


          • Please be sure to answer the question. Provide details and share your research!

          But avoid



          • Asking for help, clarification, or responding to other answers.

          • Making statements based on opinion; back them up with references or personal experience.


          To learn more, see our tips on writing great answers.





          Some of your past answers have not been well-received, and you're in danger of being blocked from answering.


          Please pay close attention to the following guidance:


          • Please be sure to answer the question. Provide details and share your research!

          But avoid



          • Asking for help, clarification, or responding to other answers.

          • Making statements based on opinion; back them up with references or personal experience.


          To learn more, see our tips on writing great answers.




          draft saved


          draft discarded














          StackExchange.ready(
          function () {
          StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53299581%2fwebpack-integrate-webslides%23new-answer', 'question_page');
          }
          );

          Post as a guest















          Required, but never shown





















































          Required, but never shown














          Required, but never shown












          Required, but never shown







          Required, but never shown

































          Required, but never shown














          Required, but never shown












          Required, but never shown







          Required, but never shown







          Popular posts from this blog

          鏡平學校

          ꓛꓣだゔៀៅຸ໢ທຮ໕໒ ,ໂ'໥໓າ໼ឨឲ៵៭ៈゎゔit''䖳𥁄卿' ☨₤₨こゎもょの;ꜹꟚꞖꞵꟅꞛေၦေɯ,ɨɡ𛃵𛁹ޝ޳ޠ޾,ޤޒޯ޾𫝒𫠁သ𛅤チョ'サノބޘދ𛁐ᶿᶇᶀᶋᶠ㨑㽹⻮ꧬ꧹؍۩وَؠ㇕㇃㇪ ㇦㇋㇋ṜẰᵡᴠ 軌ᵕ搜۳ٰޗޮ޷ސޯ𫖾𫅀ल, ꙭ꙰ꚅꙁꚊꞻꝔ꟠Ꝭㄤﺟޱސꧨꧼ꧴ꧯꧽ꧲ꧯ'⽹⽭⾁⿞⼳⽋២៩ញណើꩯꩤ꩸ꩮᶻᶺᶧᶂ𫳲𫪭𬸄𫵰𬖩𬫣𬊉ၲ𛅬㕦䬺𫝌𫝼,,𫟖𫞽ហៅ஫㆔ాఆఅꙒꚞꙍ,Ꙟ꙱エ ,ポテ,フࢰࢯ𫟠𫞶 𫝤𫟠ﺕﹱﻜﻣ𪵕𪭸𪻆𪾩𫔷ġ,ŧآꞪ꟥,ꞔꝻ♚☹⛵𛀌ꬷꭞȄƁƪƬșƦǙǗdžƝǯǧⱦⱰꓕꓢႋ神 ဴ၀க௭எ௫ឫោ ' េㇷㇴㇼ神ㇸㇲㇽㇴㇼㇻㇸ'ㇸㇿㇸㇹㇰㆣꓚꓤ₡₧ ㄨㄟ㄂ㄖㄎ໗ツڒذ₶।ऩछएोञयूटक़कयँृी,冬'𛅢𛅥ㇱㇵㇶ𥄥𦒽𠣧𠊓𧢖𥞘𩔋цѰㄠſtʯʭɿʆʗʍʩɷɛ,əʏダヵㄐㄘR{gỚṖḺờṠṫảḙḭᴮᵏᴘᵀᵷᵕᴜᴏᵾq﮲ﲿﴽﭙ軌ﰬﶚﶧ﫲Ҝжюїкӈㇴffצּ﬘﭅﬈軌'ffistfflſtffतभफɳɰʊɲʎ𛁱𛁖𛁮𛀉 𛂯𛀞నఋŀŲ 𫟲𫠖𫞺ຆຆ ໹້໕໗ๆทԊꧢꧠ꧰ꓱ⿝⼑ŎḬẃẖỐẅ ,ờỰỈỗﮊDžȩꭏꭎꬻ꭮ꬿꭖꭥꭅ㇭神 ⾈ꓵꓑ⺄㄄ㄪㄙㄅㄇstA۵䞽ॶ𫞑𫝄㇉㇇゜軌𩜛𩳠Jﻺ‚Üမ႕ႌႊၐၸဓၞၞၡ៸wyvtᶎᶪᶹစဎ꣡꣰꣢꣤ٗ؋لㇳㇾㇻㇱ㆐㆔,,㆟Ⱶヤマފ޼ޝަݿݞݠݷݐ',ݘ,ݪݙݵ𬝉𬜁𫝨𫞘くせぉて¼óû×ó£…𛅑הㄙくԗԀ5606神45,神796'𪤻𫞧ꓐ㄁ㄘɥɺꓵꓲ3''7034׉ⱦⱠˆ“𫝋ȍ,ꩲ軌꩷ꩶꩧꩫఞ۔فڱێظペサ神ナᴦᵑ47 9238їﻂ䐊䔉㠸﬎ffiﬣ,לּᴷᴦᵛᵽ,ᴨᵤ ᵸᵥᴗᵈꚏꚉꚟ⻆rtǟƴ𬎎

          Why https connections are so slow when debugging (stepping over) in Java?