Herlitz

05 WebPack Config (webpack.config.js)

Feb 25th, 2018
121
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
  1. //"use strict";
  2. // https://www.youtube.com/watch?v=7hf4oFU2E_8&list=PL2yYLRgebbHakhdiCZkykZQU0CQer3pvO&index=5
  3. const path = require('path'),
  4.     webpack = require('webpack');
  5.  
  6. // Plugins
  7. const WebpackNotifierPlugin = require('webpack-notifier'),
  8.     HtmlWebpackPlugin = require('html-webpack-plugin'),
  9.     CleanWebpackPlugin = require('clean-webpack-plugin');
  10.  
  11.  
  12. // Folder structure
  13. const applicationFolderName = 'ClientApp';
  14. const applicationSource = path.join(__dirname, applicationFolderName);
  15. const applicationDest = path.join(__dirname, 'wwwroot');
  16. const nodeModules = path.join(__dirname, 'node_modules');
  17.  
  18. module.exports = {
  19.     // where to look for dependencies
  20.     entry: {
  21.         'Vendors': path.join(applicationSource, 'Vendors.ts'),
  22.         'Application': path.join(applicationSource, 'Startup.ts')
  23.     },
  24.     // where to submit bundles and compilations
  25.     output: {
  26.         path: applicationDest, // wwwroot
  27.         filename: applicationFolderName + '/[name].bundle.js', // name of the file + bundle
  28.         chunkFilename: applicationFolderName + '/Modules/[name]/[name].bundle.js', // to do several small bundles (chunks)
  29.         publicPath: '/'
  30.     },
  31.     // resolve files by relative paths
  32.     // ie. import { AppModule } from './Modules/App/App.Module' // relative path
  33.     resolve: {
  34.         // where to look for import/require() modules
  35.         modules: [applicationSource, 'node_modules'], // first check in applicationSource, if not found continue to node_modules
  36.         extension: ['.ts', '.js', '.json', '.css', '.html', '*']
  37.     },
  38.     //devServer: {
  39.     //    contentBase: ".",
  40.     //    host: "localhost",
  41.     //    port: 9000
  42.     //},
  43.     plugins: [
  44.         new webpack.optimize.UglifyJsPlugin(), // minify
  45.         new HtmlWebpackPlugin({
  46.             template: 'index.html.tmpl',
  47.             excludeChunks: ['Vendors'],
  48.             minify: {
  49.                 collapseWhitespace: true,
  50.                 collapseInlineTagWhitespace: true,
  51.                 removeRedundantAttributes: true,
  52.                 removeEmptyAttributes: true,
  53.                 removeScriptTypeAttributes: true,
  54.                 removeStyleLinkAttributes: true
  55.             }
  56.         }),
  57.         new webpack.optimize.CommonsChunkPlugin('Common'), // Creates a separate chunk for Common
  58.         new webpack.ProvidePlugin({
  59.             $: 'jquery',
  60.             jQuery: 'jquery'
  61.         }),
  62.         new CleanWebpackPlugin(applicationDest + '/') // clean things up befor we build
  63.     ],
  64.     // defines a list of loaders that tell us how to load things into our webpack modules
  65.     module: {
  66.         // test the file path of your dependencies
  67.         rules: [
  68.             { test: /\.ts$/, include: [applicationSource], loaders: ['ts-loader', 'angular-router-loader'] },
  69.             { test: /\.html$/, include: [applicationSource], loaders: ['file-loader?publichPath=/,name=[path][name].min.[ext]', { loader: 'html-minify-loader', options: { quotes: true, dom: { lowerCaseTags: false, lowerCaseAttributeNames: false } } } ] },
  70.             { test: /\.s?css$/, include: [applicationSource, nodeModules], loaders: ['file-loader?publichPath=,name=[path][name].min.css', 'extract-loader', 'css-loader?minimize=true', 'sass-loader'] },
  71.             { test: /\.(woff(2)?|eot|svg|ttf)(\?v=\d+\.\d+\.\d+)?$/, include: [applicationSource, nodeModules], loaders: ['file-loader?publichPath=,name=fonts/[name].[ext]'] }
  72.         ]
  73.     }
  74. };
RAW Paste Data