webpack.config.js

const path = require('path');
const webpack = require('webpack');
const BrowserSyncPlugin = require('browser-sync-webpack-plugin');
const proxy = require('http-proxy-middleware'); // require('http-proxy-middleware');
const HtmlWebpackPlugin = require('html-webpack-plugin'); // require('http-proxy-middleware');
const pkg = require('./package.json');
const ExtractTextPlugin = require('extract-text-webpack-plugin');
const ngToolsWebpack = require('@ngtools/webpack');
const aotPlugin = new ngToolsWebpack.AngularCompilerPlugin({
  tsConfigPath: "./tsconfig.json",
  entryModule: "./src/app/main.module#WiseitAppModule",
});
const wiseitVersion = pkg.version;
let localConfig;
try {
  localConfig = require('./local.config.json');
} catch (e) {
  localConfig = {};
}
const target = 'http://' + (localConfig.host || '192.168.3.139') + ':' + (localConfig.hostPort || '8080');
const jsonPlaceholderProxy = proxy('/wiseit', {
  target: target,
  changeOrigin: true,
  ws: true,
  https: false
});
const extractLess = new ExtractTextPlugin({
  filename: `[name].${wiseitVersion}.[hash].css`,
  disable: process.env.NODE_ENV === "development"
});
module.exports = {
  entry: ['./src/app/main.module.ts', './src/app/styles/style.less'],
  output: {
    path: path.join(__dirname, 'build/app'),
    filename: `[name]-${wiseitVersion}.js?[hash]-[name]`,
  },
  resolve: {
    // Add '.ts' and '.tsx' as a resolvable extension.
    modules: [
      path.resolve(__dirname, 'src'),
      path.resolve(__dirname, 'node_modules'),
    ],
    extensions: [".webpack.js", ".web.js", ".js", ".ts", '.css', ".json", '.less', ".tsx", ".html"],
    alias: {
      'Selectize': path.join(__dirname, 'node_modules/@dmconsultoria/selectize.js/dist/js/standalone/selectize.js'),
      'DataTable': path.join(__dirname, 'node_modules/datatables.net/js/jquery.dataTables.js'),
    }
  },
  module: {
    rules: [
      {
        test: /\.tsx?$/,
        exclude: [/\.(spec|e2e|d)\.ts$/],
        use: [{loader: "ts-loader"}, {loader: 'angular2-template-loader'}]
      },
      {test: /\.html/, loader: 'raw-loader', exclude: [path.join(__dirname, 'src/app/index.html')]},
      {
        test: /\.css$/
        // ExtractTextPlugin CANNOT BE USED WITH AOT BUILD,
        // because it does not support ChildCompilation
        // ... "ExtractTextPlugin used without corresponding plugin"-error
        // So for the component css files use normal loader
        , use: ['css-to-string-loader'].concat('css-loader')
      },
      {
        test: /\.less$/,
        include: path.resolve(__dirname, 'src/app/styles'),
        use: ['css-to-string-loader'].concat(ExtractTextPlugin.extract({
          fallback: 'style-loader',
          use: [
            {
              loader: 'css-loader',
              options: {url: false}
            },
            {loader: 'autoprefixer-loader'},
            {
              loader: 'less-loader',
              options: {relativeUrls: false}
            }]
        }))
      }, {
        test: /\.woff(2)?(\?v=[0-9]\.[0-9]\.[0-9])?$/,
        loader: "url-loader?limit=10000&minetype=application/font-woff"
      },
      {test: /\.(eot|woff|ttf|svg|png|jpe?g|gif)(\?v=[0-9]\.[0-9]\.[0-9])?$/, loader: "file-loader"},
    ],
  },
  plugins: [
    extractLess,
    new webpack.optimize.UglifyJsPlugin({ // https://github.com/angular/angular/issues/10618
      mangle: {
        keep_fnames: true
      },
      output: {comments: false},
      exclude: [/\.min\.js$/gi]
    }),
    new webpack.ContextReplacementPlugin(
      // The (\\|\/) piece accounts for path separators for Windows and MacOS
      /(.+)?angular([\\/])core(.+)?/,
      path.join(__dirname, 'src'), // location of your src
      {} // a map of your routes
    ),
    new webpack.ProvidePlugin({
      $: "jquery",
      jQuery: "jquery",
      'window.jQuery': 'jquery',
      'window.$': 'jquery',
      _: 'lodash',
      Selectize: "Selectize",
      selectize: "Selectize",
      DataTable: "DataTable",
      dataTable: "DataTable"
    }),
    new BrowserSyncPlugin({
      host: (localConfig.connect || '0.0.0.0'),
      port: localConfig.port || 9000,
      middleware: [jsonPlaceholderProxy],
      // prevent BrowserSync from reloading the page
      // and let Webpack Dev Server take care of this
      reload: false,
      logLevel: "debug",
      // Multiple base directories
      server: ['build/app', 'build', 'dist', 'node_modules']
    }),
    new HtmlWebpackPlugin({
      filename: 'index.html',
      template: 'src/app/index.html',
      inject: true
    }),
    new webpack.NoEmitOnErrorsPlugin(),
  ],
  externals: {
    // shows how we can rely on browser globals instead of bundling these dependencies,
    // in case we want to access jQuery from a CDN or if we want an easy way to
    // avoid loading all moment locales: https://github.com/moment/moment/issues/1435
    jquery: 'jQuery',
    moment: 'moment',
    Fullcalendar: 'Fullcalendar'
  },
};