webpack migration (from v1 to v3)

webpack.common.js

const path = require('path')

const theme = {
  '@form-item-margin-bottom': '12px',
  '@layout-body-background': '#ffffff'
}

module.exports = {
  resolve: {
    modules: [
      path.join(__dirname, 'src'),
      'node_modules'
    ]
  },
  module: {
    rules: [
      {
        test: /\.jsx?$/,
        exclude: /(node_modules|bower_components)/,
        use: {
          loader: 'babel-loader',
          options: {
            presets: ['env', 'react', 'stage-0'],
            plugins: [
              'react-hot-loader/babel',
              ['import', {
                libraryName: 'antd',
                style: 'css'
              }]
            ]
          }
        }
      },
      {
        test: /\.css$/,
        use: ['style-loader', 'css-loader']
      },
      {
        test: /\.less$/,
        use: ['style-loader', 'css-loader', `less-loader?{"sourceMap":true,"modifyVars":${JSON.stringify(theme)}}`]
      }
    ]
  }
}

webpack.dev.js

const path = require('path')
const webpack = require('webpack')
const merge = require('webpack-merge')
const common = require('./webpack.config.common')

module.exports = merge(common, {
  devtool: 'cheap-module-eval-source-map',
  entry: [
    'react-hot-loader/patch',
    'webpack-dev-server/client?http://localhost:3000',
    'webpack/hot/only-dev-server',
    path.join(__dirname, 'src/client/index')
  ],
  output: {
    path: path.join(__dirname, 'dist'),
    filename: 'bundle.js',
    publicPath: 'http://localhost:3000/build/'
  },
  plugins: [
    new webpack.HotModuleReplacementPlugin(),
    new webpack.NamedModulesPlugin(),
    new webpack.NoEmitOnErrorsPlugin()
  ]
})

webpack.dev.legacy.js

const path = require('path')
const webpack = require('webpack')

const theme = {
  '@form-item-margin-bottom': '12px',
  '@layout-body-background': '#ffffff'
}

const publicPath = 'http://localhost:3000/build/'

module.exports = {
  devtool: 'cheap-module-eval-source-map',
  entry: [
    'webpack-dev-server/client?http://localhost:3000',
    'webpack/hot/only-dev-server',
    'react-hot-loader/patch',
    path.join(__dirname, 'src/client/index')
  ],
  output: {
    path: path.join(__dirname, 'dist'),
    filename: 'bundle.js',
    publicPath: publicPath
  },
  plugins: [
    new webpack.HotModuleReplacementPlugin()
  ],
  resolve: {
    alias: {
      'react': path.join(__dirname, 'node_modules', 'react')
    },
    extensions: ['', '.js']
  },
  resolveLoader: {
    'fallback': path.join(__dirname, 'node_modules')
  },
  module: {
    loaders: [{
      test: /\.js$/,
      loader: 'babel',
      exclude: /node_modules/,
      include: __dirname,
      query: {
        presets: ['react', 'es2015', 'stage-0'],
        plugins: [
          'react-hot-loader/babel',
          ['import', {
            libraryName: 'antd',
            libraryDirectory: 'lib',
            style: true
          }]
        ]
      }
    }, {
      test: /\.css?$/,
      loaders: ['style', 'css'],
      include: __dirname
    }, {
      test: /\.less$/,
      loaders: ['style', 'css', `less?{"sourceMap":true,"modifyVars":${JSON.stringify(theme)}}`],
      include: __dirname
    }]
  }
}

webpack.prod.js

const path = require('path')
const webpack = require('webpack')
const merge = require('webpack-merge')
const common = require('./webpack.config.common')

module.exports = merge(common, {
  devtool: 'source-map',
  entry: [
    path.join(__dirname, 'src/client/index')
  ],
  output: {
    path: path.join(__dirname, 'dist'),
    filename: 'bundle.js',
    publicPath: '/'
  },
  plugins: [
    new webpack.LoaderOptionsPlugin({
      minimize: true,
      debug: false
    }),
    new webpack.DefinePlugin({
      'process.env': {
        'NODE_ENV': JSON.stringify('production')
      }
    }),
    new webpack.optimize.UglifyJsPlugin()
  ]
})

webpack.prod.legacy.js

const path = require('path')
const webpack = require('webpack')

const theme = {
  '@form-item-margin-bottom': '12px',
  '@layout-body-background': '#ffffff'
}

module.exports = {
  devtool: 'source-map',
  entry: [
    path.join(__dirname, 'src/client/index')
  ],
  output: {
    path: path.join(__dirname, 'dist'),
    filename: 'bundle.js',
    publicPath: '/'
  },
  resolve: {
    alias: {
      'react': path.join(__dirname, 'node_modules', 'react')
    },
    extensions: ['', '.js']
  },
  resolveLoader: {
    'fallback': path.join(__dirname, 'node_modules')
  },
  module: {
    loaders: [{
      test: /\.js$/,
      loader: 'babel',
      exclude: function (path) {
        // 路徑中含有 node_modules 的就不去解析。
        var isNpmModule = !!path.match(/node_modules/)
        return isNpmModule
      },
      include: __dirname,
      query: {
        presets: ['react', 'es2015', 'stage-0'],
        plugins: [
          ['import', {
            libraryName: 'antd',
            libraryDirectory: 'lib',
            style: true
          }]
        ]
      }
    }, {
      test: /\.css?$/,
      loaders: ['style', 'css'],
      include: __dirname
    }, {
      test: /\.less$/,
      loaders: ['style', 'css', `less?{"sourceMap":true,"modifyVars":${JSON.stringify(theme)}}`],
      include: __dirname
    }]
  },
  plugins: [
    new webpack.optimize.OccurenceOrderPlugin(),
    new webpack.DefinePlugin({
      'process.env': {
        'NODE_ENV': JSON.stringify('production')
      }
    }),
    new webpack.optimize.UglifyJsPlugin({
      compressor: {
        warnings: false
      }
    })
  ]
}