gpt4 book ai didi

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

转载 作者:行者123 更新时间:2023-12-04 18:33:51 24 4
gpt4 key购买 nike

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 文件?

    最佳答案

    您需要更新 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 等外部构建过程来说,直接推送到该目录效果更好。

    关于springboot + webpack 开发服务器,重建后不会更改 localhost 捆绑文件,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/37921629/

    24 4 0
    Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
    广告合作:1813099741@qq.com 6ren.com