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

Question

click this pic and please read below

1.第一张图片是运行 webpack-dev-sercer --hot --inline 之后的

第二张图片是我的 html:我调用 js 文件的方式

我更改了 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, {});
}

我的项目是 spring boot 所以，我的问题是，如何更改 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 等外部构建过程来说，直接推送到该目录效果更好。