2017-10-11 58 views
4

爲什麼我的反應應用程序在升級到反應16後生產版本失敗?爲什麼我的反應應用程序在升級到反應16後生產版本失敗?

升級後反應版本16我的應用程序罷工作的生產版本,運行時開發工作正常。如果我降級到React 15.6,它在prod和dev環境下仍然可以正常工作。

我使用:"webpack": "^3.5.6","react": "^16.0.0",

我收到以下錯誤:

未捕獲的ReferenceError:要求沒有定義 enter image description here

我的WebPack督促配置:

const path = require('path'); 
const merge = require("webpack-merge"); 
const webpack = require("webpack"); 
const config = require("./webpack.base.babel"); 

const OfflinePlugin = require('offline-plugin'); 
const HtmlWebpackPlugin = require("html-webpack-plugin"); 

module.exports = merge(config, { 
    // devtool: "nosources-source-map", 
    devtool: "source-map", 
    // In production, we skip all hot-reloading stuff 
    entry: [ 
    'babel-polyfill', // Needed for redux-saga es6 generator support 
    path.join(process.cwd(), 'src/client/app.js'), // Start with app.js 
    ], 
    performance: { 
    assetFilter: (assetFilename) => !(/(\.map$)|(^(main\.|favicon\.))/.test(assetFilename)), 
    }, 
    plugins: [ 
    new webpack.LoaderOptionsPlugin({ 
     minimize: true 
    }), 
    new HtmlWebpackPlugin({ 
     template: "src/client/index.html", 
     minify: { 
     removeComments: true, 
     collapseWhitespace: true, 
     removeRedundantAttributes: true, 
     useShortDoctype: true, 
     removeEmptyAttributes: true, 
     removeStyleLinkTypeAttributes: true, 
     keepClosingSlash: true, 
     minifyJS: true, 
     minifyCSS: true, 
     minifyURLs: true, 
     }, 
     inject: true, 
    }), 
    // Shared code 
    new webpack.optimize.CommonsChunkPlugin({ 
     name: "vendor", 
     children: true, 
     minChunks: 2, 
     async: true, 
    }), 
    // Avoid publishing files when compilation fails 
    new webpack.NoEmitOnErrorsPlugin(), 
    // Put it in the end to capture all the HtmlWebpackPlugin's 
    // assets manipulations and do leak its manipulations to HtmlWebpackPlugin 
    new OfflinePlugin({ 
     relativePaths: false, 
     publicPath: '/', 

     // No need to cache .htaccess. See http://mxs.is/googmp, 
     // this is applied before any match in `caches` section 
     excludes: ['.htaccess'], 

     caches: { 
     main: [':rest:'], 

     // All chunks marked as `additional`, loaded after main section 
     // and do not prevent SW to install. Change to `optional` if 
     // do not want them to be preloaded at all (cached only when first loaded) 
     additional: ['*.chunk.js'], 
     }, 

     // Removes warning for about `additional` section usage 
     safeToUseOptionalCaches: true, 

     AppCache: false, 
    }), 
    ] 
}); 

我如何解決它?

webpack.base.babel.js

// Common Webpack configuration used by webpack.config.development and webpack.config.production 
const path = require("path"); 
const webpack = require("webpack"); 
const autoprefixer = require("autoprefixer"); 
const e2c = require("electron-to-chromium"); 
const GLOBALS = require('../bin/helpers/globals'); 

const ExtractTextPlugin = require("extract-text-webpack-plugin"); 

const isProd = process.env.NODE_ENV === 'production'; 
const postcssLoaderOptions = { 
    plugins: [ 
    autoprefixer({ 
     browsers: e2c.electronToBrowserList("1.4") 
    }), 
    ], 
    sourceMap: !isProd, 
}; 

GLOBALS['process.env'].__CLIENT__ = true; 

module.exports = { 
    target: 'web', // Make web variables accessible to webpack, e.g. window 
    output: { 
    filename: 'js/[name].[hash].js', 
    chunkFilename: 'js/[name].[hash].chunk.js', 
    path: path.resolve(process.cwd(), 'build'), 
    publicPath: "/" 
    }, 
    resolve: { 
    modules: ["node_modules"], 
    alias: { 
     client: path.resolve(process.cwd(), "src/client"), 
     shared: path.resolve(process.cwd(), "src/shared"), 
     server: path.resolve(process.cwd(), "src/server") 
    }, 
    extensions: [".js", '.jsx', ".json", ".scss"], 
    mainFields: ["browser", "module", 'jsnext:main', "main"], 
    }, 
    plugins: [ 
    new webpack.NormalModuleReplacementPlugin(
     /\/Bundles.js/, 
     './AsyncBundles.js' 
    ), 
    new webpack.IgnorePlugin(/vertx/), 
    new webpack.ProvidePlugin({ 
     Promise: 'imports-loader?this=>global!exports-loader?global.Promise!es6-promise', 
     fetch: "imports-loader?this=>global!exports-loader?global.fetch!whatwg-fetch", // fetch API 
     $: "jquery", 
     jQuery: "jquery", 
    }), 
    new webpack.DefinePlugin(GLOBALS), 
    new ExtractTextPlugin({ 
     filename: "css/[name].[hash].css", 
     disable: false, 
     allChunks: true 
    }) 
    ], 
    module: { 
    noParse: /\.min\.js$/, 
    rules: [ 
     // JavaScript/ES6 
     { 
     test: /\.(js|jsx)?$/, 
     include: [ 
      path.resolve(process.cwd(), "src/client"), 
      path.resolve(process.cwd(), "src/shared"), 
     ], 
     exclude: /node_modules/, 
     use: "babel-loader" 
     }, 
     // Json 
     { 
     test: /\.json$/, 
     use: 'json-loader', 
     }, 
     //HTML 
     { 
     test: /\.html$/, 
     include: [ 
      path.resolve(process.cwd(), "src/client"), 
     ], 
     use: [ 
      { 
      loader: "html-loader", 
      options: { 
       minimize: true 
      } 
      } 
     ] 
     }, 
     // Images 
     // Inline base64 URLs for <=8k images, direct URLs for the rest 
     { 
     test: /\.(png|jpg|jpeg|gif|svg)(\?v=\d+\.\d+\.\d+)?$/, 
     use: { 
      loader: "url-loader", 
      options: { 
      limit: 8192, 
      name: "images/[name].[ext]?[hash]" 
      } 
     } 
     }, 
     // Fonts 
     { 
     test: /\.(woff|woff2)(\?v=\d+\.\d+\.\d+)?$/, 
     use: { 
      loader: 'url-loader', 
      options: { 
      limit: 10000, 
      mimetype: 'application/font-woff' 
      } 
     } 
     }, 
     { 
     test: /\.(ttf|eot)(\?v=\d+\.\d+\.\d+)?$/, 
     use: 'file-loader' 
     }, 
     // Styles 
     { 
     test: /\.scss$/, 
     include: [ 
      path.resolve(process.cwd(), "src/client"), 
      path.resolve(process.cwd(), "src/shared"), 
     ], 
     use: ExtractTextPlugin.extract({ 
      fallback: "style-loader", 
      use: [ 
      { 
       loader: "css-loader", 
       options: { 
       sourceMap: true, 
       modules: true, 
       importLoaders: 1, 
       localIdentName: '[local]_[hash:base64:3]' 
       } 
      }, 
      { 
       loader: "postcss-loader", 
       options: postcssLoaderOptions 
      }, 
      { 
       loader: "sass-loader", 
       options: { 
       sourceMap: true, 
       outputStyle: "compressed" 
       } 
      } 
      ] 
     }) 
     }, 
    ] 
    } 
}; 
+0

您使用的是什麼版本的節點? – Derek

+0

'v8.1.1'它有什麼關係?我捆綁我的文件和服務器靜態內容 – Vardius

+0

你試過刪除NoEmitOnErrorsPlugin?我不確定你爲什麼使用它,但我不認爲它是用於生產設置。也許它掩蓋了真正的錯誤。 –

回答

4

定盤RLY簡單。

我只需要刪除此行noParse: /\.min\.js/

哪些呢:

Prevent webpack from parsing any files matching the given regular expression(s). Ignored files should not have calls to import, require, define or any other importing mechanism.

+0

你知道爲什麼生產版本還沒有被轉譯嗎? –

+0

@SamSamskies我不知道:( – Vardius

相關問題