I have created the sample Angular 2 project with Webpack based on Angular documentation. Webpack is more convenient module bundler. Webpack roams over your application source code, looking for import statements, building a dependency graph, and emitting one (or more) bundles. With plugin "loaders" Webpack can preprocess and minify different non-JavaScript files such as TypeScript, SASS, and LESS files.

Setup the project

git clone https://github.com/SodhanaLibrary/angular2-webpack-prod-dev-setup.git
npm install
Now your project is ready. Start the project
npm start
Open http://localhost:8080 in your browser. You can see welcome screen.  Now create production version
npm run build
Above command creates dist folder consists of HTML file and bundle js file

Webpack setup

Now we will discuss the webpack setup. Observe below project structure
config - config folder consists of all configuration files. 
webpack.config.js - When user runs webpack command, webpack will look for webpack.config.js by default
webpack.common.js - This is common webpack configuration for development, testing and production
src - folder for all source files
main.ts - this is the entry point of the application which bootstraps whole application. index.html will load this file first
polyfills.ts - this file consists imports of ES6 and ES7 polyfills. This file is the entry point to generate final polyfills.js
vendor.ts - this file consists imports of RXJS and Angular libraries. This file is the entry point to generate vendor.js

webpack.common.js

Observe entry property. Here 3 entry points are there. Webpack will bundle these and create polyfills.js, vendor.js, app.js 
var webpack = require('webpack');
var HtmlWebpackPlugin = require('html-webpack-plugin');
var ExtractTextPlugin = require('extract-text-webpack-plugin');
var helpers = require('./helpers');

module.exports = {
  entry: {
    'polyfills': './src/polyfills.ts',
    'vendor': './src/vendor.ts',
    'app': './src/main.ts'
  },

  resolve: {
    extensions: ['', '.ts', '.js']
  },

  module: {
    loaders: [
      {
        test: /\.ts$/,
        loaders: ['awesome-typescript-loader', 'angular2-template-loader']
      },
      {
        test: /\.html$/,
        loader: 'html'
      },
      {
        test: /\.(png|jpe?g|gif|svg|woff|woff2|ttf|eot|ico)$/,
        loader: 'file?name=assets/[name].[hash].[ext]'
      },
      {
        test: /\.css$/,
        exclude: helpers.root('src', 'app'),
        loader: ExtractTextPlugin.extract('style', 'css?sourceMap')
      },
      {
        test: /\.css$/,
        include: helpers.root('src', 'app'),
        loader: 'raw'
      }
    ]
  },

  plugins: [
    new webpack.optimize.CommonsChunkPlugin({
      name: ['app', 'vendor', 'polyfills']
    }),

    new HtmlWebpackPlugin({
      template: 'src/index.html'
    })
  ]
};
HtmlWebpackPlugin reads index.html and adds generated polyfills.js, verdor.js, app.js to it.

Webpack.dev.js

var webpackMerge = require('webpack-merge');
var ExtractTextPlugin = require('extract-text-webpack-plugin');
var commonConfig = require('./webpack.common.js');
var helpers = require('./helpers');

module.exports = webpackMerge(commonConfig, {
  devtool: 'cheap-module-eval-source-map',

  output: {
    path: helpers.root('dist'),
    publicPath: 'http://localhost:8080/',
    filename: '[name].js',
    chunkFilename: '[id].chunk.js'
  },

  plugins: [
    new ExtractTextPlugin('[name].css')
  ],

  devServer: {
    historyApiFallback: true,
    stats: 'minimal'
  }
});
This webpack dev configuration merges with webpack.common.js configuration. Observe output property here, which gives dist as path folder.  The Webpack dev server makes dist as the main folder to serve content

package.json scripts

Observe below start property which executes webpack-dev-server on port 8080
"scripts": {
    "start": "webpack-dev-server --inline --progress --port 8080",
    "test": "karma start",
    "build": "rimraf dist && webpack --config config/webpack.prod.js --progress --profile --bail"
}
Here build command runs webpack with config/webpack.prod.js, this generates production ready files

webpack.prod.js

This file uses UglifyJsPlugin for uglifying the output production ready js files.  webpack.DefinePlugin will define the environment as 'production'. 
var webpack = require('webpack');
var webpackMerge = require('webpack-merge');
var ExtractTextPlugin = require('extract-text-webpack-plugin');
var commonConfig = require('./webpack.common.js');
var helpers = require('./helpers');

const ENV = process.env.NODE_ENV = process.env.ENV = 'production';

module.exports = webpackMerge(commonConfig, {
  devtool: 'source-map',

  output: {
    path: helpers.root('dist'),
    publicPath: '/',
    filename: '[name].js',
    chunkFilename: '[id].chunk.js'
  },

  htmlLoader: {
    minimize: false // workaround for ng2
  },

  plugins: [
    new webpack.NoErrorsPlugin(),
    new webpack.optimize.DedupePlugin(),
    new webpack.optimize.UglifyJsPlugin({ // https://github.com/angular/angular/issues/10618
      mangle: {
        keep_fnames: true
      }
    }),
    new ExtractTextPlugin('[name].css'),
    new webpack.DefinePlugin({
      'process.env': {
        'ENV': JSON.stringify(ENV)
      }
    })
  ]
});

5 comments:

  1. "Welcome to We Buy Houses Fort Lauderdale, the Official Cash Home Buyer of Fort Lauderdale, Florida, and surrounding areas.

    We provide home sellers with a cash option to purchase their property quickly—with NO Repairs, and NO Fees or Commissions.

    Simply go to our website or call us at (754) 200-2005 to get a no-obligation cash home offer sent to you. It’s free and confidential.

    Avoiding foreclosure? Facing divorce? Moving? Upside down in your mortgage? Liens? It doesn’t matter whether you live in it, you’re renting it out, it’s vacant, or not even habitable. We help owners who have inherited an unwanted property, own a vacant house, are behind on payments, owe liens, downsized, and can’t sell… even if the house needs repairs that you can’t pay for… and yes, even if the house is fire damaged or has bad rental tenants.

    Basically, if you have a property and need to sell it… we’d like to make you a fair cash offer and close on it when you’re ready to sell.

    Just contact us today to get started!
    "

    ReplyDelete
  2. I am very happy after visiting your website with very useful information. I am from one of the digital marketing agency... To visit my agency click on link Visitdigitalguru

    ReplyDelete
  3. One of the first things you should look for is the ‘About Us’ page. There you should expect to see information that reinforces the online casino’s operations which should give you a feeling of confidence. Transparency sòngbạc-trựctuyến.com
    of information is not a good thing, unless they are licenced in Gibraltar, the UK, Australia, the Isle Of Man, Malta or Alderney. These are strict jurisdictions that care about how the business world views them.

    ReplyDelete
  4. Nice blog and absolutely outstanding. You can do something much better but i still say this perfect. must visit Can dogs eat Veggie Straws

    ReplyDelete

Blogroll

Popular Posts