javascript - Webpack 产品构建因 ReferenceError 失败

Question

我最近更新到了 webpack 3.10.0 和 Babel 6.26。 虽然我能够修复我的开发版本，但由于某种原因，我无法弄清楚我的产品版本是否失败。

这是我得到的错误:

ERROR in ./src/index.js
Module build failed: ReferenceError: [BABEL] J:\project\src\index.js: Using removed Babel 5 option: foreign.modules - Use the corresponding module transform plugin in the `plugins` option. Check out http://babeljs.io/docs/plugins/#modules    at Logger.error (J:\project\node_modules\babel-core\lib\transformation\file\logger.js:41:11)
at OptionManager.mergeOptions (J:\project\node_modules\babel-core\lib\transformation\file\options\option-manager.js:220:20)
at J:\project\node_modules\babel-core\lib\transformation\file\options\option-manager.js:265:14
at J:\project\node_modules\babel-core\lib\transformation\file\options\option-manager.js:323:22
at Array.map (native)
at OptionManager.resolvePresets (J:\project\node_modules\babel-core\lib\transformation\file\options\option-manager.js:275:20)
at OptionManager.mergePresets (J:\project\node_modules\babel-core\lib\transformation\file\options\option-manager.js:264:10)
at OptionManager.mergeOptions (J:\project\node_modules\babel-core\lib\transformation\file\options\option-manager.js:249:14)
at OptionManager.init (J:\project\node_modules\babel-core\lib\transformation\file\options\option-manager.js:368:12)
at File.initOptions (J:\project\node_modules\babel-core\lib\transformation\file\index.js:212:65)
at new File (J:\project\node_modules\babel-core\lib\transformation\file\index.js:135:24)
at Pipeline.transform (J:\project\node_modules\babel-core\lib\transformation\pipeline.js:46:16)
at transpile (J:\project\node_modules\babel-loader\lib\index.js:50:20)
at J:\Permateam\node_modules\babel-loader\lib\fs-cache.js:118:18
at ReadFileContext.callback (J:\project\node_modules\babel-loader\lib\fs-cache.js:31:21)
at FSReqWrap.readFileAfterOpen [as oncomplete] (fs.js:366:13)

我去读了http://babeljs.io/docs/plugins/#modules按照错误消息中的建议。

但对我来说，看起来我正在做所有正确的事情。

有人可以告诉我我在 webpack.config.js 中未能转换的内容吗？

var BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin;

var webpack = require('webpack');
var path = require('path');

var ProvidePlugin = require("webpack/lib/ProvidePlugin");
var CommonsChunkPlugin = require("webpack/lib/optimize/CommonsChunkPlugin");
var LimitChunkCountPlugin = require("webpack/lib/optimize/LimitChunkCountPlugin");
var DedupePlugin = require("webpack/lib/optimize/DedupePlugin");
var CleanWebpackPlugin = require('clean-webpack-plugin');
var CopyWebpackPlugin = require('copy-webpack-plugin');
var CircularDependencyPlugin = require('circular-dependency-plugin');
var CompressionPlugin = require('compression-webpack-plugin');

var BUILD_DIR =  path.resolve(__dirname,'dist');

var APP_DIR = path.resolve(__dirname, 'src');
var CLIENT_DIR = path.resolve(__dirname, 'src/client');

// Load environment variables from .env file. Suppress warnings using silent
// if this file is missing. dotenv will never modify any environment variables
// that have already been set.
// https://github.com/motdotla/dotenv
require('dotenv').config({silent: true});

var PrintChunksPlugin = function() {};
PrintChunksPlugin.prototype.apply = function(compiler) {
    compiler.plugin('compilation', function(compilation, params) {
        compilation.plugin('after-optimize-chunk-assets', function(chunks) {
            console.log(chunks.map(function(c) {
                return {
                    id: c.id,
                    name: c.name
/*,
                    includes: c.modules.map(function(m) {
                        return m.request;
                    })
*/
                };
            }));
        });
    });
};

var config = {
    devtool: 'cheap-module-source-map',
    entry: {
        app: APP_DIR + '/index.js'
    },

    output: {
        path:BUILD_DIR,
        filename: "[name].bundle.js",
        sourceMapFilename: "[name].bundle.js.map",
        chunkFilename: "[name]-chunk.js",
        //publicPath: BUILD_DIR
    },

  watch: false,
  watchOptions: {
    poll: true,
    aggregateTimeout: 300
  },
  module : {
    rules: [
    {
              test : /\.jsx?/,
              include : APP_DIR,
              exclude: /node_modules/,

              use: [
          {
            loader: 'react-hot-loader/webpack'
          },
          {
            loader: 'babel-loader?' + JSON.stringify({
              cacheDirectory: true,
              plugins: [
                'transform-runtime',
                'react-html-attrs',
                'transform-class-properties',
                'transform-decorators-legacy'
                ],
              presets: [
                'env',
                {
                  "modules": false
                },
                'react',
                'stage-2']
              })
          }
      ]
          },

          // CSS
          // "postcss" loader applies autoprefixer to our CSS.
          // "css" loader resolves paths in CSS and adds assets as dependencies.
          // "style" loader turns CSS into JS modules that inject <style> tags.
          // In production, we use a plugin to extract that CSS to a file, but
          // in development "style" loader enables hot editing of CSS.
          {
              test: /\.css$/,
              include: path.join(__dirname, 'src/style'),

        use: [
          'style-loader',
          'css-loader'
        ]
          },

          // "file" loader makes sure those assets get served by WebpackDevServer.
          // When you `import` an asset, you get its (virtual) filename.
          // In production, they would get copied to the `build` folder.
          {
              test: /\.(ico|jpg|png|gif|eot|otf|webp|svg|ttf|woff|woff2)(\?.*)?$/,
              exclude: /\/favicon.ico$/,

        use: [
          {
              loader: 'file-loader',
              query: {
                name: '[path][name][hash].[ext]',
                publicPath: '/'
              }
          }
        ]
          },

          {
              test: /\.(ico)(\?.*)?$/,
              exclude: /node_modules/,
        use: [
          {
              loader: 'file-loader',
              query: {
                  name: './images/[name].[ext]'
              }
          }
        ]
          },

          {
              test: /\.xml$/,

        use: [
          {
              loader: 'file-loader',
              query: {
                  name: './[name].[ext]'
              }
          },
        ]
      }
      ]
  },

     // use EnableCircularDependencyPlugin=true|false to check the option
  plugins: (function() {
        var plugins = [
              new webpack.DefinePlugin({
                  // A common mistake is not stringifying the "production" string.
                  'process.env': { 'NODE_ENV': JSON.stringify('production') },

                  // DISABLE redux-devtools HERE
                  __DEVTOOLS__: false 
              }),

            new CopyWebpackPlugin([
                { from: APP_DIR + '/index.html', to: BUILD_DIR + '/index.html' },
                { from: APP_DIR + '/sitemap.xml', to: BUILD_DIR + '/sitemap.xml' },
                { from: APP_DIR + '/Robots.txt', to: BUILD_DIR + '/Robots.txt' },
                { from: APP_DIR + '/images/favicon.ico', to: BUILD_DIR + '/images/favicon.ico' },
                { from: APP_DIR + '/images/favicon.png', to: BUILD_DIR + '/images/favicon.png' },
                { from: APP_DIR + '/images/favicon-16x16.png', to: BUILD_DIR + '/images/favicon-16x16.png' },
                { from: APP_DIR + '/images/favicon-32x32.png', to: BUILD_DIR + '/images/favicon-32x32.png' },
                { from: APP_DIR + '/images/favicon-48x48.png', to: BUILD_DIR + '/images/favicon-48x48.png' },
                { from: APP_DIR + '/images/favicon-57x57.png', to: BUILD_DIR + '/images/favicon-57x57.png' },
                { from: APP_DIR + '/images/favicon-60x60.png', to: BUILD_DIR + '/images/favicon-60x60.png' },
                { from: APP_DIR + '/images/favicon-72x72.png', to: BUILD_DIR + '/images/favicon-72x72.png' },
                { from: APP_DIR + '/images/favicon-76x76.png', to: BUILD_DIR + '/images/favicon-76x76.png' },
                { from: APP_DIR + '/images/favicon-96x96.png', to: BUILD_DIR + '/images/favicon-96x96.png' },
                { from: APP_DIR + '/images/favicon-114x114.png', to: BUILD_DIR + '/images/favicon-114x114.png' },
                { from: APP_DIR + '/images/favicon-120x120.png', to: BUILD_DIR + '/images/favicon-120x120.png' },
                { from: APP_DIR + '/images/favicon-144x144.png', to: BUILD_DIR + '/images/favicon-144x144.png' },
                { from: APP_DIR + '/images/favicon-152x152.png', to: BUILD_DIR + '/images/favicon-152x152.png' },
                { from: APP_DIR + '/images/favicon-160x160.png', to: BUILD_DIR + '/images/favicon-160x160.png' },
                { from: APP_DIR + '/images/favicon-180x180.png', to: BUILD_DIR + '/images/favicon-180x180.png' },
                { from: APP_DIR + '/images/favicon-192x192.png', to: BUILD_DIR + '/images/favicon-192x192.png' }
            ]),
            new webpack.HotModuleReplacementPlugin(),
            new webpack.NoEmitOnErrorsPlugin(),

            new BundleAnalyzerPlugin({analyzerMode: 'static'}),
            //new PrintChunksPlugin()

            new webpack.optimize.CommonsChunkPlugin({
                name: 'vendor',
                minChunks: function (module) {
                   // this assumes your vendor imports exist in the node_modules directory
                   return module.context && module.context.indexOf('node_modules') !== -1;
                }
            }),

            //CommonChunksPlugin will now extract all the common modules from vendor and main bundles
            new webpack.optimize.CommonsChunkPlugin({
                name: 'manifest' //But since there are no more common modules between them we end up with just the runtime code included in the manifest file
            }),

            new CompressionPlugin({
              asset: "[path].gz[query]",
              algorithm: "gzip",
              test: /\.js$|\.css$|\.html$/,
              threshold: 10240,
              minRatio: 0.8
            })
        ];


        // HERE IS OPTION CONDITION
        // edit .env file change to EnableCircularDependencyPlugin=false will bypass it
        if (process.env.EnableCircularDependencyPlugin=="true") {
            plugins.push(new CircularDependencyPlugin({
                // exclude detection of files based on a RegExp
                exclude: /a\.js|node_modules/,
                // add errors to webpack instead of warnings
                failOnError: true
            }));
        }

        return plugins;
    })(),
    node: {
        net: 'empty',
        dns: 'empty'
    }
};

module.exports = config;

Answer 1

经过一夜好眠后，我今天早上找到了解决方案。 Webpack 2.0 的解决方案已发布 here 。 所以我只需要将其适配为 Webpack 3.0

只需更改:

presets: [
  'env',
  {
    "modules": false
  },
  'react',
  'stage-2']

至:

presets: [
  ['env',
    {
      "modules": false
    }],
  'react',
  'stage-2']
})

之后 npm 就可以毫无问题地构建了。