Webpack don't重建捆绑包

Webpack don't rebuild bundle

本文关键字:重建 don Webpack      更新时间:2023-09-26

我在使用webpack时遇到了一些问题。我使用的是ES6、ReactJS、Mobx和SASS。这是我的开发配置:

var path = require('path');
var webpack = require('webpack');
var ExtractTextPlugin = require('extract-text-webpack-plugin');
var autoprefixer = require('autoprefixer');
var pathes = {
  root: './src/main/webapp/WEB-INF/static',
  entry: './src/main/javascript/client.js',
  js:  '/js/',
  css: '/css/'
}
var extractSASS = new ExtractTextPlugin( path.join(pathes.css, 'main.css') );
var extractVendorCSS = new ExtractTextPlugin( path.join(pathes.css, 'vendor.css') );
module.exports = {
  devtool: 'eval-source-map',
  entry: pathes.entry,
  output: {
    path: pathes.root,
    filename: path.join(pathes.js, 'app.js')
  },
  module: {
    loaders: [
      {
        test: /'.js$/,
        exclude: /(node_modules)/,
        loaders: [ 'babel' ]
      },
      {
        test: /'.scss$/,
        loader: extractSASS.extract([ 'css', 'postcss', 'sass' ])
      },
      {
        test: /'.css$/,
        loader: extractVendorCSS.extract([ 'css' ])
      }
    ]
  },
  plugins: [
    extractSASS,
    extractVendorCSS,
    new webpack.DefinePlugin({
      DEVELOPMENT: true
    })
  ],
  postcss: function () {
    return [ autoprefixer ];
  }
};

一切都很好,但今天我在服务器端Spring引导应用程序上添加了重定向到/index的拦截器。我不知道这怎么会破坏webpack,但他停下来重建了捆绑包。要运行webpack,我使用以下命令:

webpack --progress --colors --watch --config ./configs/webpack.development.config.js

我不使用webpack-dev服务器,因为静态文件由嵌入式Tomcat(Spring引导)提供服务。

在控制台中,webpack表示捆绑包已重建,但捆绑包不包含任何更改。

一个有趣的细节是,如果我将捆绑包名称从app.js更改为例如app1.js,并通过上面的命令重新运行webpack,那么webpack将接受所有更改,并且捆绑包将被更新。在那之后,webpack将自动重建捆绑包以进行更改(因为--watch)。

为什么webpack不重建旧名称为app.js的捆绑包?

如果您的控制台显示文件已重建,但您没有看到更改,则文件很可能已被浏览器缓存。

尝试在任何包含它们的地方添加某种缓存破坏参数:

<script src="app.js?<% time.now() %>"></script>

这对于开发来说很好,但对于生产来说,您可能需要考虑使用资产webpack插件