将Webpack 1升级到3

Question

我收到这个错误：

//lines

ERROR in ./node_modules/flag-icon-css/css/flag-icon.css
Module build failed: ModuleBuildError: Module build failed: TypeError: Cannot read property 'path' of undefined
    at Object.resolveUrlLoader (C:\Users\badri\Desktop\WORK\WASHAJ\washaj\gaca-frontend\node_modules\resolve-url-loader\index.js:38:56)
    at runLoaders (C:\Users\badri\Desktop\WORK\WASHAJ\washaj\gaca-frontend\node_modules\webpack\lib\NormalModule.js:195:19)
    at C:\Users\badri\Desktop\WORK\WASHAJ\washaj\gaca-frontend\node_modules\loader-runner\lib\LoaderRunner.js:367:11
    at C:\Users\badri\Desktop\WORK\WASHAJ\washaj\gaca-frontend\node_modules\loader-runner\lib\LoaderRunner.js:233:18
    at runSyncOrAsync (C:\Users\badri\Desktop\WORK\WASHAJ\washaj\gaca-frontend\node_modules\loader-runner\lib\LoaderRunner.js:143:3)
    at iterateNormalLoaders (C:\Users\badri\Desktop\WORK\WASHAJ\washaj\gaca-frontend\node_modules\loader-runner\lib\LoaderRunner.js:232:2)
    at C:\Users\badri\Desktop\WORK\WASHAJ\washaj\gaca-frontend\node_modules\loader-runner\lib\LoaderRunner.js:205:4
    at C:\Users\badri\Desktop\WORK\WASHAJ\washaj\gaca-frontend\node_modules\enhanced-resolve\lib\CachedInputFileSystem.js:70:14
    at _combinedTickCallback (internal/process/next_tick.js:132:7)
    at process._tickCallback (internal/process/next_tick.js:181:9)

//lines

经过2天的更改/升级等，我结束了这个webpack.config.js文件：

const path = require('path');
const webpack = require('webpack');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const ExtractTextPlugin = require('extract-text-webpack-plugin');
const OptimizeCssAssetsPlugin = require('optimize-css-assets-webpack-plugin');
const CleanWebpackPlugin = require('clean-webpack-plugin');

const PATHS = {
  app: path.join(__dirname, 'src/js'),
  build: path.join(__dirname, 'build'),
  public: path.join(__dirname, 'src/public'),
  assets: path.join(__dirname, 'src/assets'),
  styles: [
    path.join(__dirname, 'src/assets/css/bootstrap.min.css'),
    path.join(__dirname, 'src/assets/css/font-awesome.min.css'),
    path.join(__dirname, 'src/assets/css/bootstrap-grid-rtl.css'),
    path.join(__dirname, 'src/assets/css/main.css'),
    path.join(__dirname, 'src/assets/css/PrintStyle.css'),
    path.join(__dirname, 'node_modules/react-dates/lib/css/_datepicker.css'),
    path.join(__dirname, 'node_modules/flag-icon-css/css/flag-icon.css'),
    path.join(__dirname, 'src/assets/css/react-datepicker.css'),
    path.join(__dirname, 'src/assets/css/tracker.css'),

  ]
};

const isDebug = !process.argv.includes('--release');

module.exports = {
  entry: {
    app: ['babel-polyfill',PATHS.app],
    style: PATHS.styles
  },
  output: {
    path: PATHS.build,
    filename: 'js/[name].js',
  },
  resolve: {
    extensions: ['.css', '.js', '.jsx']
  },

  module: {
    rules: [
      {
        test: /\.jsx?$/,
        use: [
          {
            loader: "babel-loader",
            options: {
              cacheDirectory: isDebug,
              babelrc: true,
              presets: [
                'latest',
                'react',
                ...isDebug ? [] : [
                  'react-optimize',
                ],
              ],
              plugins: [
                'transform-object-rest-spread',
                'transform-object-assign',
                [
                  'react-intl', {
                    'messagesDir': './build/messages',
                    'enforceDescriptions': false
                  }
                ]
              ]
            }
          }
        ],
        include: [
          path.resolve(__dirname, PATHS.app)
        ]
      },
      {
        test: /\.css$/,
        use: ExtractTextPlugin.extract({
          fallback: "style-loader",
          use: [
            {
              loader: 'css-loader',
              options: {
                importLoaders: 1,
                sourceMap: true,
                modules: true,
                localIdentName: isDebug ? '[name]-[local]-[hash:base64:5]' : '[hash:base64:5]'
              }
            },
            {
              loader: 'resolve-url-loader'
            },
            {
              loader: 'postcss-loader'
            }
          ]
        }),
        exclude: PATHS.styles,
      },
      {
        test: /\.css$/,
        use: ExtractTextPlugin.extract({
          fallback: 'style-loader',
          use: [
            {
              loader: 'css-loader',
              options: {
                localIdentName: isDebug ? '[name]-[local]-[hash:base64:5]' : '[hash:base64:5]'
              }
            },
            {
              loader: 'resolve-url-loader'
            }
          ]
        }),
        exclude: PATHS.app,
        include: PATHS.styles
      },
      {
        test: /\.sss$/,
        use: [
          {
            loader: 'style-loader'
          },
          {
            loader: 'css-loader'
          }
        ]
      },
      {
        test: /\.json$/,
        use: [
          {
            loader: 'json-loader'
          }
        ]
      },
      {
        test: /\.(eot|otf|webp|svg|ttf|woff|woff2)(\?.*)?$/,
        use: [
          {
            loader:
              `file-loader?${JSON.stringify({
                name: isDebug ? '/[path][name].[ext]?[hash:8]' : '/fonts/[hash:8].[ext]',
              })}`
          }
        ]
      },
      {
        test: /\.(ico|jpg|jpeg|png|gif)(\?.*)?$/,
        use: [
          {
            loader:
              `file-loader?${JSON.stringify({
                name: isDebug ? '/[path][name].[ext]?[hash:8]' : '/images/[hash:8].[ext]'
              })}`
          }
        ]
      },
    ],
  },
  plugins: [
    new webpack.LoaderOptionsPlugin({
      options: {
        context: __dirname,
        postcss: [
          require('postcss-partial-import')(),
          require('postcss-url')(),
          require('postcss-custom-properties')(),
          require('postcss-custom-media')(),
          require('postcss-media-minmax')(),
          require('postcss-custom-selectors')(),
          require('autoprefixer')({
            browsers: [
              '>1%',
              'last 4 versions',
              'Firefox ESR',
              'not ie < 9', 
            ],
          })
        ]
      }
    }),
    new webpack.DefinePlugin({
      'process.env.NODE_ENV': isDebug ? '"development"' : '"production"',
      'process.env.BROWSER': true,
      __DEV__: isDebug,
    }),
    /*new webpack.optimize.UglifyJsPlugin({
      compress: {
        properties: true
      }
      }),*/
    new ExtractTextPlugin({ filename: '[name].css', allChunks: true , disable: false}),

    new OptimizeCssAssetsPlugin({
      cssProcessorOptions: { discardComments: {removeAll: true } },
    }),
    new HtmlWebpackPlugin({
      title: 'Washaj Portal',
      template: path.join(PATHS.public, 'index.ejs'),
      favicon:  path.join(PATHS.assets, 'images/favicon.ico'),
    }),
    new webpack.optimize.CommonsChunkPlugin({
      name: 'vendor',
    }),
    ...isDebug? [
      new webpack.HotModuleReplacementPlugin({
        multiStep: true
      }),
    ] : [
      new CleanWebpackPlugin(PATHS.build, {
        root: process.cwd()
      }),
      new webpack.optimize.OccurrenceOrderPlugin(true),
      new webpack.optimize.DedupePlugin()

  ] //else ends
],

bail: !isDebug,
cache: false,

stats: {
  colors: true,
  reasons: isDebug,
  timings: true,
},

devtool: isDebug ? 'cheap-module-source-map' : false,
devServer: {
  historyApiFallback: true,
  hot: true,
  inline: true,
  stats: 'errors-only',
  port: 3000,
  host: '0.0.0.0',
  publicPath: '/',
  contentBase: PATHS.build,
  proxy: {
    '/api/**': {
      target: 'http://localhost:8080',
      secure: false
    }
  }
}
};

我想不同插件的版本也没有问题。 有没有什么办法解决这一问题？