需要帮助将webpack.config转换为webpack 3.10版本

Question

我使用的是较早版本的webpack，现在我正在尝试升级到最新版本。 但似乎格式/选项有一些变化。 问题是我对webpack并不是很了解。 我使用的配置来自我改编的另一个项目。 所以我不知道如何在不破坏所有内容的情况下将其转换为新的webpack格式。 有人可以通过并告诉我使用webpack 3.10进行更改所需的更改吗？

这是我的webpack.config：

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

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

var CopyWebpackPlugin = require('copy-webpack-plugin');
var CircularDependencyPlugin = require('circular-dependency-plugin');

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

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

// 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 = {
  context: path.join(__dirname, "src"),
    devtool: 'source-map',

entry: [
//'webpack/hot/dev-server',
// reload controls falling back to page refresh if hot reload fails ( rare ).
// change to false to debug hot reloading, so you can see the errors before it refreshes the page.
 'webpack-hot-middleware/client?reload=true',
//  'webpack-hot-middleware/client?path=/__webpack_hmr&timeout=20000',
  APP_DIR + '/index-hot.js'
  ],

output: {
path: path.join(__dirname, "src"),
filename: 'bundle-hot.js'
},
watch: true,
watchOptions: {
poll: true,
aggregateTimeout: 300
},
module : {
  loaders : [
      {
          test : /\.jsx?/,
          include : APP_DIR,
          exclude: /node_modules/,
          loaders: ['react-hot-loader', 'babel-loader?' + JSON.stringify({
            cacheDirectory: true,
            plugins: [
              'transform-runtime',
              'react-html-attrs',
              'transform-class-properties',
              'transform-decorators-legacy'
            ],
            presets: ['env', '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'),
          loader: '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$/,
          loader: 'file-loader',
          query: {
            name: '[path][name][hash].[ext]',
            publicPath: '/'
          }
      },
      {
          test: /\.(ico)(\?.*)?$/,
          exclude: /node_modules/,
          loader: 'file-loader',
          query: {
              name: './images/[name].[ext]'
          }
      },
      {
          test: /\.xml$/,
          loader: 'file-loader',
          query: {
              name: './[name].[ext]'
          }
      },
  ]
},

// use EnableCircularDependencyPlugin=true|false to check the option
plugins: (function() {
    var plugins = [
        new CopyWebpackPlugin([
            { from: APP_DIR + '/index-hot.html', to: BUILD_DIR + '/index-hot.html' },
            { 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 webpack.DefinePlugin({
            __DEVTOOLS__: true  // <-------- DISABLE redux-devtools HERE
        }),

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


    // 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;

编辑＃1： 以下是我最近的一次尝试。

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

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

    var CopyWebpackPlugin = require('copy-webpack-plugin');
    var CircularDependencyPlugin = require('circular-dependency-plugin');

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

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

    // 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 = {
      context: path.join(__dirname, "src"),
        devtool: 'source-map',

      entry: [
        //'webpack/hot/dev-server',
        // reload controls falling back to page refresh if hot reload fails ( rare ).
        // change to false to debug hot reloading, so you can see the errors before it refreshes the page.
        'webpack-hot-middleware/client?reload=true',
        //  'webpack-hot-middleware/client?path=/__webpack_hmr&timeout=20000',
        APP_DIR + '/index-hot.js'
      ],

  output: {
        path: path.join(__dirname, "src"),
    filename: 'bundle-hot.js'
  },
  watch: true,
  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', '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 CopyWebpackPlugin([
            { from: APP_DIR + '/index-hot.html', to: BUILD_DIR + '/index-hot.html' },
            { 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 webpack.DefinePlugin({
            __DEVTOOLS__: true  // <-------- DISABLE redux-devtools HERE
        }),

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


    // 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;

有了这个似乎我可以编译。 但由于我对npm和webpack的了解有限，我无法确定该行为是否与之前相同。