WEBPACK WITH ANGULARJS

//WEBPACK WITH ANGULARJS

WEBPACK WITH ANGULARJS

WEBPACK WITH ANGULARJS

Hi fellow geeks today I’ll be setting up webpack a source code build tool with angularJS and by the end of this article we should be able to use it for generating development or production builds of our application.

webpack is quite versatile in a way it provides the developers to quickly setup a server the supported file types (image files, font files, scripts and stylesheets) and enable other developers to generate a packaged version of the applications. This is done by providing loaders object within webpack and we basically say hey webpack add functionality to handle this type of content. A typical webpack loader config could look something like this:

loaders: [{
                test: /\.css$/,
                loader: 'style-loader!css-loader'
            }]

We are also needed to provide entry point of our app the main module and the output directory where our build would go this can be achieved using the following code in the webpack config.

context: path.join(__dirname, '/'),
     entry: {
         app: [
             'webpack  /hot/dev-server',
             './src/app.module'
         ]
     },
     output: {
         path: path.join(__dirname, htmlPath),
         filename: 'bundle.js',

     },

Here we are setting the current execution system path or root of our application, the entry point and the output file path.
To enable dev server, we would need to add below information in webpack config file:

devServer: {
         port: 1885
     }

Additionally, to handle various file type and dev server resolutions we would need to add plugins in webpack. A typical setup could look something like below: –

plugins: [
         new webpack  .ProvidePlugin({ 'utils': 'utils' }),
         new webpack  .HotModuleReplacementPlugin(),
         new webpack  .ProvidePlugin({ '_': 'lodash', $: "jQuery", jQuery:       "jQuery" }),
         // definePlugin takes raw strings and inserts them, so you can put strings of JS if you want.
        new webpack  .DefinePlugin({ __DEV__: JSON.stringify(JSON.parse(process.env.BUILD_DEV || 'true')) }),
        new HtmlWebpack  Plugin({ path: path.join(__dirname, htmlPath), filename: './index.html', template: './index.html' }),
        new webpack  .optimize.UglifyJsPlugin({
            minimize: true,
            compress: false,
            mangle: true
        })
    ]

To get started with setting up our build environment lets open Visual Studio Code (an open source code editor from Microsoft). I’m going to setup my development environment something like below: –

After successfully adding necessary project files and setting up folder structure you should have something like below:

The “webpack.config.js” is the file which produces magic stuff. I have attached the project structure in this Git repository:

https://github.com/dany4ev/webpack AngularDemoApp/tree/master

After doing a Git clone of this repository following commands need to be run:

npm install (to install necessary dependencies of npm from “project.json”)
npm start (this will start the demo app in http://localhost:1885)

We can run “./node_modules/.bin/webpack “ Command with “–config“ argument to setup our build package according to our needs.

./node_modules/.bin/webpack –config webpack .config.js

The result will be a bundled version of our application as shown below:

That’s it for this blog. Please feel free to share your opinion in what topics to cover up next. Cheers and have fun building apps.

By |2018-10-25T08:03:42+00:00September 4th, 2018|Technology|0 Comments

About the Author:

Leave A Comment