Webpack 不重新构建包答案

【问题标题】：Webpack don't rebuild bundleWebpack 不重新构建包
【发布时间】：2016-07-25 06:33:29
【问题描述】：

我在使用 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-server，因为静态文件由嵌入式 Tomcat (Spring boot) 提供。

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

一个有趣的细节是，如果我将包名称从 app.js 更改为例如 app1.js 并通过上面的命令重新运行 webpack，webpack 将接受所有更改并更新包。之后，webpack 将通过更改自动重建包（因为--watch）。

为什么 webpack 不使用旧名称 app.js 重建包？

【问题讨论】：

标签： javascript webpack

【解决方案1】：

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

尝试在包含它们的任何位置添加某种缓存清除参数：

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

这对于开发来说很好，但对于生产，你可能想看看使用assets-webpack-plugin

【讨论】：