springboot + webpack dev server, 重建后不改变localhost bundle文件

问题描述

点击此图片，请阅读下文

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

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

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

1. second pic is my html : the way i call js file

我将我的 jsx 文件更改为测试服务器npm 说完全重建但是，在 localhost:9090 中捆绑的 js 文件在像上图一样重建后不会改变

i changed my jsx file to test serverand npm said complete rebuildbut, bundled js file in localhost:9090 does not change after rebuilding like upper pic

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

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

我的项目是spring boot所以，我的问题是，如何更改 localhost9090 js 文件?

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

推荐答案

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

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.

示例:

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 等外部构建过程直接推送到该目录的效果要好得多.

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.

这篇关于springboot + webpack dev server, 重建后不改变localhost bundle文件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！