springboot + webpack dev server, does not change localhost bundle file after rebuilding

问题

click this pic and please read below

1.this first pic is after run webpack-dev-sercer --hot --inline

second pic is my html : the way i call js file
i changed my jsx file to test server and npm said complete rebuild but, bundled js file in localhost:9090 does not change after rebuilding like upper pic

below code is my webpack.config.js file

var path = require('path');
var webpack = require('webpack');
var merge = require('webpack-merge');
var HtmlWebpackPlugin = require('html-webpack-plugin');
var ExtractTextPlugin = require('extract-text-webpack-plugin');
var jeet = require('jeet'); 
var nib = require('nib'); 

var RES = path.join(__dirname, 'src/main/resources'); 
var STATIC = path.join(__dirname, 'src/main/resources/static');

const TARGET = process.env.npm_lifecycle_event;

const common = {
  entry: {
    chunkA: path.join(STATIC, 'chunkA/chunkA_world.jsx'), 
    chunkB: path.join(STATIC, 'chunkB/chunkB_world.jsx')
  },
  output: {
    path: path.join(STATIC, 'jsbuilt'),
    filename: '[name].bundle.js',
    chunkFileName: '[id].bundle.js',
    publicPath:  '' 
  },
  plugins: [
    new webpack.optimize.OccurenceOrderPlugin(),
    new webpack.optimize.CommonsChunkPlugin({ 
      name: 'vendors',
      minChunks(module, count) {
        return (
          module.resource && 
          module.resource.indexOf(path.resolve('node_modules')) === 0
        )
      }
    }),
    new HtmlWebpackPlugin({ 
    }),
    new webpack.DefinePlugin({ 
      "process.env": {
        NODE_ENV: JSON.stringify('development') 
      }
    }),
    new ExtractTextPlugin('styles.css') 
  ],
  resolve: {
    extensions: ['', '.js'],
    root: RES
  },
  module: {
    preLoaders: [ 
      {
        test: /\.css$/,
        loader: 'stripcomment'
      }
    ],
    loaders: [{
      test: /\.jsx?$/,
      exclude: /(node_modules)/,
      loader: ['babel'],
      include: STATIC,
      query:
          {
            presets:['es2015','stage-0','react'],
            compact: false
          }
    }, {
      test: /\.styl$/,
      loader: ExtractTextPlugin.extract('css-loader!stylus-loader') 
    }, {
      test: /\.json/,
      loader: ['json-loader']
    }]
  },
  stylus: {
    use: [jeet(), nib()]
  }
};

if (TARGET === 'start' || !TARGET) {
    module.exports = merge(common, {
        devServer: {
            port: 9090,
            proxy: {
                '/*': {
                    target: 'http://localhost:8080',
                    secure: false,
                    prependPath: false
                }
            },
            publicPath: 'http://localhost:9090/',
            historyApiFallback: true
        },
        devtool: 'source-map'
    });
}

if (TARGET === 'build') {
    module.exports = merge(common, {});
}

and my project is spring boot so, my question is, how to make localhost9090 js file change?

回答1:

You'll need to updated your Webpack Output location to point to the Target directory in order for you to achieve a productive live reload workflow.

Example:

module.exports = {
    entry: "./src/app.js",
    output: {
        path: '../../../target/classes/static/js',
        filename: "bundle.js"
    },
    module: {
        loaders: [
            {
                test: /\.jsx?$/,
                exclude: /node_modules/,
                loader: 'babel-loader',
                query: {
                    presets: ['es2015', 'react']
                }
            }
        ]
    }
};

The embedded server is pulling from the Target directory so it works much better for these outside build processes like Webpack to push to that directory directly.

回答2:

i changed my webpack.config.js file like below

var path = require('path');
var webpack = require('webpack');
var merge = require('webpack-merge');
var HtmlWebpackPlugin = require('html-webpack-plugin');
var ExtractTextPlugin = require('extract-text-webpack-plugin');
var jeet = require('jeet'); 
var nib = require('nib'); 

var RES = path.join(__dirname, 'src/main/resources'); 
var STATIC = path.join(__dirname, 'src/main/resources/static');

module.exports = {  
  devtool: 'source-map',
  entry: {
    chunkA: path.join(STATIC, 'chunkA/chunkA_world.jsx'), 
    chunkB: path.join(STATIC, 'chunkB/chunkB_world.jsx')
  },
  output: {
    path: path.join(STATIC, 'jsbuilt'),
    filename: '[name].bundle.js',
    chunkFileName: '[id].bundle.js',
    publicPath:  'http://localhost:9090/jsbuilt/' 
  },
  plugins: [
    new webpack.optimize.OccurenceOrderPlugin(),
    new webpack.optimize.CommonsChunkPlugin({
      name: 'vendors',
      minChunks(module, count) {
        return (
          module.resource && 
          module.resource.indexOf(path.resolve('node_modules')) === 0
        )
      }
    }),
    new webpack.DefinePlugin({ 
      "process.env": {
        NODE_ENV: JSON.stringify('development')
      }
    }),
    new ExtractTextPlugin('styles.css')
  ],
  resolve: {
    extensions: ['', '.js'],
    root: RES
  },
  module: {
    preLoaders: [ 
      {
        test: /\.css$/,
        loader: 'stripcomment'
      }
    ],
    loaders: [{
      test: /\.jsx?$/,
      exclude: /(node_modules)/,
      loader: ['babel'],
      include: STATIC,
      query:
          {
            presets:['es2015','stage-0','react'],
            compact: false
          }
    }, {
      test: /\.styl$/,
      loader: ExtractTextPlugin.extract('css-loader!stylus-loader') 
    }, {
      test: /\.json/,
      loader: ['json-loader']
    }]
  },
  stylus: {
    use: [jeet(), nib()]
  },
  devServer: {
      port: 9090,
      proxy: {
          '/*': {
              target: 'http://localhost:8080',
              secure: false,
              prependPath: false
          }
      },
      publicPath: 'http://localhost:9090/jsbuilt',
      historyApiFallback: true
  }
};

and it worked. thanks!

来源：https://stackoverflow.com/questions/37921629/springboot-webpack-dev-server-does-not-change-localhost-bundle-file-after-reb

标签

Spring

spring-boot

Webpack

webpack-dev-server