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

          Guess what letter conforming each word

          Port of Spain

          Run scheduled task as local user group (not BUILTIN)