Webpack：オブジェクト（...）は、再バンドル後の関数ではありません。

Question

私は最近、ウェブパックの設定で、this link、さらにthis oneの長期キャッシュを設定しました。

私はちょっとした問題があります：コードを変更して再ビルドするたびに、webpackが一部のモジュールから関数をインポートして実行しようとしたときに同じエラー：Object(...) is not a functionが発生します。

Weirder：Shift + F5を押すと問題が解消します。

const path = require('path'); 
/* eslint-disable import/no-extraneous-dependencies */ 
const webpack = require('webpack'); 
const autoprefixer = require('autoprefixer'); 
const NameAllModulesPlugin = require('name-all-modules-plugin'); 
const ManifestPlugin = require('webpack-manifest-plugin'); 
/* eslint-enable import/no-extraneous-dependencies */ 

const configFileName = `./.env.${process.env.STAGE}.json`; 
let envConfig; 

try { 
    // eslint-disable-next-line import/no-dynamic-require, global-require 
    envConfig = require(configFileName); 
} catch (e) { 
    envConfig = {}; 
} 

const babelSettings = { 
    extends: path.join(__dirname, '.babelrc'), 
}; 

const excludes = [ 
    /node_modules(?![/\\]@shared[/\\])/, 
]; 
const roots = [ 
    path.join(__dirname, '../../node_modules'), 
    path.join(__dirname, 'node_modules'), 
    path.join(__dirname, 'client'), 
    path.join(__dirname, 'public'), 
    path.join(__dirname, 'node_modules/@shared/public'), 
]; 

const getCommonCSSLoaders = enableCSSModules => [ 
    { 
    loader: 'style-loader', 
    }, 
    { 
    loader: 'css-loader', 
    options: { 
     modules: enableCSSModules, 
     importLoaders: 1, 
     localIdentName: '[local]_[hash:base64:3]', 
     minimize: true, 
    }, 
    }, 
    { 
    loader: 'postcss-loader', 
    options: { 
     ident: 'postcss', 
     plugins:() => [ 
     // eslint-disable-next-line global-require, import/no-extraneous-dependencies 
     require('postcss-flexbugs-fixes'), 
     autoprefixer({ 
      env: 'production', 
      flexbox: 'no-2009', 
     }), 
     ], 
    }, 
    }, 
]; 

const rules = [ 
    { 
    test: /\.js$/, 
    exclude: excludes, 
    loader: 'babel-loader', 
    options: babelSettings, 
    }, 
    { 
    test: /\.css$/, 
    exclude: excludes, 
    use: [ 
     ...getCommonCSSLoaders(true), 
    ], 
    }, 
    { 
    test: /\.css$/, 
    include: excludes, 
    use: [ 
     ...getCommonCSSLoaders(false), 
    ], 
    }, 
    { 
    test: /\.scss$/, 
    exclude: excludes, 
    use: [ 
     ...getCommonCSSLoaders(true), 
     { 
     loader: 'sass-loader', 
     }, 
    ], 
    }, 
    { 
    test: /.*\.(eot|woff|woff2|ttf|svg|png|jpe?g|gif)$/i, 
    use: [ 
     { 
     loader: 'url-loader', 
     options: { 
      name: 'images/[name].[hash].[ext]', 
      limit: 20000, 
     }, 
     }, 
     { 
     loader: 'image-webpack-loader', 
     options: { 
      mozjpeg: { 
      quality: 80, 
      }, 
      pngquant: { 
      quality: '80-90', 
      speed: 1, 
      }, 
     }, 
     }, 
    ], 
    }, 
]; 

const plugins = [ 
    new webpack.optimize.UglifyJsPlugin({ 
    compress: { 
     warnings: false, 
     comparisons: false, 
    }, 
    output: { 
     comments: false, 
    }, 
    }), 
    new webpack.optimize.ModuleConcatenationPlugin(), 
    new webpack.NamedModulesPlugin(), 
    new webpack.NamedChunksPlugin((chunk) => { 
    if (chunk.name) { 
     return chunk.name; 
    } 

    return chunk.modules.map(m => path.relative(m.context, m.request)).join('_'); 
    }), 
    new NameAllModulesPlugin(), 
    new ManifestPlugin({ 
    fileName: 'client-manifest.json', 
    publicPath: '/dist/', 
    }), 
    new webpack.NormalModuleReplacementPlugin(/\/components\/Bundles/, './components/AsyncBundles'), 
    new webpack.NormalModuleReplacementPlugin(/\/Bundles/, './AsyncBundles'), 
    new webpack.optimize.CommonsChunkPlugin({ 
    name: 'client', 
    async: 'common', 
    children: true, 
    minChunks: (module, count) => { 
     if (module.resource && (/^.*\.(css|scss)$/).test(module.resource)) { 
     return false; 
     } 
     return count >= 3 && module.context && !module.context.includes('node_modules'); 
    }, 
    }), 
    new webpack.optimize.CommonsChunkPlugin({ 
    name: 'client', 
    children: true, 
    minChunks: module => module.context && module.context.includes('node_modules'), 
    }), 
    new webpack.optimize.CommonsChunkPlugin({ 
    name: 'vendors', 
    minChunks: module => module.context && module.context.includes('node_modules'), 
    }), 
    new webpack.optimize.CommonsChunkPlugin({ 
    name: 'manifest', 
    }), 
    new webpack.IgnorePlugin(/^\.\/locale$/, /moment$/), 
    new webpack.DefinePlugin({ 
    'process.env': { 
     NODE_ENV: JSON.stringify('production'), 
     STAGE: JSON.stringify(process.env.STAGE), 
    }, 
    'process.customEnv': { 
     api: { 
     URL: envConfig.api_url, 
     URLV2: envConfig.api_url_v2, 
     }, 
     job_board: { 
     URL: envConfig.job_board_url, 
     }, 
     vendors: { 
     AMPLITUDE_KEY: envConfig.amplitude_key, 
     STRIPE_PUBLISHABLE_KEY: envConfig.stripe_publishable_key, 
     OPTIMIZELY_DATAFILE_URL: envConfig.optimizely_datafile_url, 
     }, 
    }, 
    }), 
]; 

const config = { 
    bail: true, 
    resolve: { 
    modules: roots, 
    }, 
    resolveLoader: { 
    modules: roots, 
    }, 
    entry: { 
    client: ['./client/src/entry/js/polyfills', './client/src/entry/js/client'], 
    }, 
    output: { 
    filename: 'bundles/[name].[chunkhash].bundle.js', 
    chunkFilename: 'chunks/[name].[chunkhash].chunk.js', 
    path: path.join(__dirname, 'public/dist'), 
    publicPath: '/dist/', 
    }, 
    module: { 
    rules, 
    }, 
    plugins, 
    node: { 
    fs: 'empty', 
    net: 'empty', 
    tls: 'empty', 
    }, 
}; 

module.exports = config; 

私はその後、私のHTMLでmanifest、vendorsとclientをインポートします。

は、ここに私のWebPACKの設定です。

これについての洞察はありますか？

Answer 1

私たちの問題は、事前に

おかげで、私たちのWebPACKの設定のプラグインセクションからnew webpack.optimize.ModuleConcatenationPlugin()を除去することで修正されました。それにバグでなければならない。この関連するGitHubの問題を発見しました。 https://github.com/webpack/webpack/issues/5118