Question

我在使用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引导）提供服务。

在控制台webpack中说捆绑包已经重建，但捆绑包不包含任何更改。

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

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

Answer 1

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

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

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

这适用于开发，但对于生产，您可能希望使用assets-webpack-plugin

Webpack不会重建包

1 个答案: