springboot + webpack dev服务器，重建后不会更改localhost捆绑文件

Question

click this pic and please read below

1.这第一张照片是在运行webpack-dev-sercer --hot --inline

之后

1. 第二张照片是我的html：我调用js文件的方式

2. 我将我的jsx文件更改为测试服务器 和npm说完全重建 但是，在localhost：9090中捆绑的js文件在重建之后不会改变，如上图

下面的代码是我的webpack.config.js文件

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, {});
}

我的项目是春季启动 所以，我的问题是，如何更改localhost9090 js文件？

Answer 1

您需要更新Webpack输出位置以指向目标目录，以便实现高效的实时重新加载工作流程。

示例：

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']
                }
            }
        ]
    }
};

嵌入式服务器正在从Target目录中提取，因此它可以更好地为Webpack这些外部构建过程直接推送到该目录。

Answer 2

我改变了我的webpack.config.js文件，如下所示

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
  }
};

它有效。谢谢！