CODEWITHSUNDEEP
angularjswebpack
user3469897
user3469897

Reputation: 27

hot-reload angularjs with webpack

I use webpack with this configuration:

var webpack = require('webpack');
var CopyWebpackPlugin = require('copy-webpack-plugin');

module.exports = {
    context: __dirname + '/app',
    entry: {
        app: './app.js',
        vendor: ['angular', 'angular-route', 'angular-resource', 'angular-bootstrap']  
    },
    output: {
        path: __dirname + '/app',
        filename: 'js/app.bundle.min.js'
    },
    plugins: [
        new webpack.optimize.CommonsChunkPlugin(/* chunkName= */"vendor", /* filename= */"js/vendor.bundle.min.js"),
        new CopyWebpackPlugin([
            { from: "../node_modules/bootstrap/dist/fonts/", to:"fonts/"},
            { from: "../node_modules/bootstrap/dist/css/bootstrap.min.css", to:"css/"}
        ]),   
        new webpack.optimize.UglifyJsPlugin({
            minimize: true,
            sourceMap: false,
            mangle: false
        })
    ]
};

In script of my package.json i have:

scripts": {
    "clean": "rimraf ../assets",
    "prestart": "npm install",
    "build": "webpack",
    "start": "webpack-dev-server -d --hot --inline --content-base ./app"
  },

It is possible reload application when i change everything in js file without stop and start server?

Upvotes: 2

Views: 3381

Answers (1)

Mati
Mati

Reputation: 1148

Check it out angular-hot-reloader. It is based on a few simple webpack loaders which are just adding a little piece of code to each reloadable file. The piece of code declares the file as hot-reloadable to webpack, and then does some hacky magic to make angular aware of the changes, recompiling the templates against the scope, and patching the controller’s prototype methods.

Usage:

const componentHotLoader = require.resolve('../loaders/component-loader');
const serviceHotLoader = require.resolve('../loaders/service-loader');
const jadeHotLoader = require.resolve('../loaders/jade-loader');


// add componentHotLoader and serviceLoader
(webpackConf.module.preLoaders = webpackConf.module.preLoaders || []).push(
  { test: /\.component\.js$/, loader: componentHotLoader, exclude: [/client\/lib/, /node_modules/, /\.spec\.js/] }
);
(webpackConf.module.preLoaders = webpackConf.module.preLoaders || []).push(
  { test: /\.service\.js$/, loader: serviceHotLoader, exclude: [/client\/lib/, /node_modules/, /\.spec\.js/] }
);
(webpackConf.module.postLoaders = webpackConf.module.postLoaders || []).push(
  { test: /\.html/, loader: jadeHotLoader }
);

You can use this example as a reference

Upvotes: 1

Related Questions