0

My project directory Structure is :

mcdist <build output folder>
  - assets
    index.html
  - css
      main.css
  - js
      app.js
      lib.js
  - ng-app
      <all HTML Files>
  - images
src
  - images
      1.png
      2.png
  - javascripts
  - ng-app
     - components
            1.js
     - directives
            2.js
     - filters
            3.js
  - stylesheets
       1.scss
       2.scss
  index.html
  app.js
node_modules
webpack.config.js
package.json

My webpack.config looks like this :

var path = require('path');
var webpack = require('webpack');
var config = {
entry: {
    app: ['./app.js'],
    lib: ['./lib.js']
},
output: {
    path: path.join(__dirname, '/mcdist/assets/js/'),
    filename: 'app.js',
    publicPath: "/public/js/"
},
plugins: [
    new webpack.HotModuleReplacementPlugin(),
    new webpack.optimize.CommonsChunkPlugin({
        name: 'lib',
        filename: 'lib.js',
        minChunks: Infinity
    }),
    new webpack.NamedModulesPlugin()
],
devServer: {
    proxy: [{
        context: [
            '/mcdist/api',
            '/mcdist/appConfig',
            '/mcdist/j_spring_security_logout'
        ],
        target: 'http://localhost:8080',
        secure: false
    }],
    port: 9000
}
};
module.exports = config

I run:

webpack-dev-server --inline

I create build folder 'mcdist' using npm command as :

"build:js": "uglifyjs mcdist/assets/js/app.js -m -o mcdist/assets/js/app.js",

My src/app.js looks like this : 

require('./src/javascripts/ng-app/config/init-config.js');
require('./src/javascripts/ng-app/config/theme-config.js');
require('./src/javascripts/ng-app/components/dialog-message/dialog-message.service.js');
require('./src/javascripts/ng-app/components/footer/footer.controller.js');
require('./src/javascripts/ng-app/components/topbar/topbar.controller.js');

and many more files as list in require format in app.js

Now every time I make changes in HTML, JS files I need to create new build so changes get pushed to 'mcdist' folder (JS files gets concatenated and uglified in single app.js and all HTML files pushed to ng-app folder inside 'mcdist' folder.)

AND I've to RESTART WEBPACK dev server to see changes reflected.

This is very painful in local/development environment as changing small code needs build and restart, which is not the case with Grails application.

is there any way I can avoid restarting a server and just make changes to them hot-reloaded ? I've already tried running with --hot and --inline approaches but nothing had luck.

Help is most appreciated.

Enigma
  • 749
  • 1
  • 13
  • 35
  • I am using this for static files https://github.com/webpack-contrib/copy-webpack-plugin . Very simple in use and you can add watch parameter so reloads only the files that changed. – Panos K Nov 07 '17 at 06:59
  • not really worked because my js files are getting uglified and minified, May be I need to stop that to leverage this plugin. – Enigma Nov 07 '17 at 07:22
  • For dev purposes you propably dont need to minify/uglify but if you still want to do it ,you should first minify/uglify on a seperate directory and then copy resources to target – Panos K Nov 07 '17 at 07:28
  • Ok even if I don't minify and uglify my target app.js, but all JS files/modules are getting loaded in app.js with 'require' module so where should I copy my changed JS files to ? – Enigma Nov 07 '17 at 07:35
  • { from: 'directory you watch for changes', to: 'destination directory ' }, so you have to watch the directory of all your js files or html (etc) so on change you bundle your code and deploy on destination directory. Really dont know if these sounds clear hope it helps ! – Panos K Nov 07 '17 at 07:54
  • my directory structure is already there in question. Pls review and let me know config changes. – Enigma Nov 07 '17 at 07:56
  • Hey, I got your email... First of all, CopyWebpackPlugin is not related to this. There should be no need for u to use this. It also looks like you're not looking to use Hot Module Reloading, but simpe Live Reloading, which should work fine with dev-server ... You can always see it work at my repo at https://github.com/frederikprijck/angularjs-webpack-starter ... Please add a reproduction sample so I can fiddle with it. – Frederik Prijck Nov 09 '17 at 14:28

0 Answers0