iqiyi_game_wp_cli/config/WebpackConfig.js

const path = require('path');
const webpack = require('webpack');
const BabelConfig = require('./BabelConfig');
const Utils = require('../lib/utils');
const ProgressBarPlugin = require('progress-bar-webpack-plugin');
const ExtractTextPlugin = require('extract-text-webpack-plugin');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const nodeExternals = require('webpack-node-externals');
const CleanWebpackPlugin = require('clean-webpack-plugin');
const LessPluginCleanCSS = require('less-plugin-clean-css');

exports._default = function (env) {
  env = env || 'development'
  const output = {
    path: path.join(process.cwd(), `.${path.sep}dist${path.sep}`),
  };

  const AUTOPREFIXER_BROWSERS = [
    'Android 2.3',
    'Android >= 4',
    'Chrome >= 35',
    'Firefox >= 31',
    'Explorer >= 8',
    'iOS >= 6',
    'Opera >= 12',
    'Safari >= 7.1',
  ];

  const GLOBALS = {
    __IS_SSR__: false,
    __MODE__:`'${env}'`,
    'process.env.NODE_ENV': `'${env}'`,
  };

  const plugins = [
    new webpack.DefinePlugin(GLOBALS),
    new webpack.optimize.AggressiveMergingPlugin(),
    new webpack.NoEmitOnErrorsPlugin(),
    new webpack.optimize.ModuleConcatenationPlugin(),
    new ProgressBarPlugin(),
    new webpack.ProvidePlugin({
      React: 'react',
      ReactDOM: 'react-dom',
    }),
    new webpack.optimize.UglifyJsPlugin({
        sourceMap:env === 'development',
        beautify: false,
        comments: false,
        compress: {
            warnings: false,
            drop_console: false,
            collapse_vars: true,
            reduce_vars: true,
        }
    }),
  ];

  const moduleConfig = {
    rules: [{
      enforce: 'pre',
      test: /\.jsx?$/,
      use: {
        loader: require.resolve('babel-loader'),
        options: BabelConfig.get(),
      },
      include: /(node_modules\/igame_base_libs|src)/
    }, {
      test: /\.(png|jpg|jpeg|gif)$/,
      use: require.resolve('url-loader') + '?limit=1024&&name=images/[name].[hash:6].[ext]',
    }, {
      test: /\.(eot|ttf|wav|mp3|svg|woff|woff2)$/,
      use: require.resolve('file-loader') + '?name=fonts/[name].[hash:6].[ext]',
    }, {
      test: /\.css$/,
      use: ExtractTextPlugin.extract({
        allChunks: true,
        fallback: require.resolve('style-loader'),
        use: [require.resolve('css-loader'), {
          loader: require.resolve('postcss-loader'),
          options: {
            plugins: (loader) => [
              require('postcss-import')({
                path: [Utils.resolveNodeModulesPath()]
              }),
              require('postcss-mixins')(),
              require('postcss-nested')(),
              require('cssnano')({
                  colormin: false,
                  zindex: false,
                  autoprefixer: false,
              }),
              require('postcss-cssnext')({
                browsers: AUTOPREFIXER_BROWSERS,
              }),
              require('postcss-opacity')(),
              require('../postcssPlugins/rgbaPlugin')(),
            ]
          }
        }]
      })
    },{
        test: /\.less$/,
        use: ExtractTextPlugin.extract({
            allChunks: true,
            fallback: require.resolve('style-loader'),
            use:[require.resolve('css-loader'),{
                loader:require.resolve('less-loader'),
                options:{
                    plugins:[
                        new LessPluginCleanCSS({ advanced: true })
                    ]
                }
            }]
        })
    }]
  };

  const resolve = {
    extensions: ['.webpack.js', '.web.js', '.js', '.jsx'],
    modules: [
      Utils.resolveNodeModulesPath(),
      'node_modules'
    ]
  };

  const config = {
    entry: {},
    output,
    module: moduleConfig,
    plugins,
    externals: {
      'react': {
          commonjs: 'react',
          commonjs2: 'react',
          amd: 'react',
          root: 'React',
          'var': 'React'
      },
      'react-dom': {
          commonjs: 'react-dom',
          commonjs2: 'react-dom',
          amd: 'react-dom',
          root: 'ReactDOM',
          'var': 'ReactDOM'
      },
      'react-router': {
          commonjs: 'react-router',
          commonjs2: 'react-router',
          amd: 'react-router',
          root: 'ReactRouter',
          'var': 'ReactRouter'
      },
    },
    resolve,
  };

  return config;
}

exports.development = function () {
  var config = this._default();
  return config
}

exports.postDevelopment = function (config, devServerConfig,webpackConfig) {
  process.noDeprecation = true;
  var nodeModulesPath = Utils.resolveNodeModulesPath();
  var preEntrys = [];
  config.output.publicPath = webpackConfig.devPath;
  //dev模式下不加hash
  config.output.filename = '[name].js';
  if(webpackConfig.preset === 'ie8'){
      shimIe8Plugins(config);
  }
  config.plugins.push(new ExtractTextPlugin('[name].css'));
  if (devServerConfig.hot) {
    const patch = path.join(nodeModulesPath,`react-hot-loader${path.sep}patch`);
    let devServer = path.join(nodeModulesPath,`webpack-dev-server${path.sep}client`);
    devServer = `${devServer}?http://127.0.0.1:${devServerConfig.port}/`;
    const hotDevServer = path.join(nodeModulesPath,`webpack${path.sep}hot${path.sep}dev-server`);
    preEntrys = preEntrys.concat([patch, devServer, hotDevServer])
  }

  if(webpackConfig.devBuildOnly && Array.isArray(webpackConfig.devBuildOnly) && webpackConfig.devBuildOnly.length > 0){
      const obj = {};
      webpackConfig.devBuildOnly.map((item)=>{
          obj[item] = config.entry[item];
      })
      config.entry = obj;
  }

  Object.keys(config.entry).forEach(function (entry) {
    if (Array.isArray(config.entry[entry])) {
      config.entry[entry].unshift.apply(config.entry[entry], preEntrys)
    } else {
      config.entry[entry] = preEntrys.concat(config.entry[entry])
    }

    config.plugins.push(new HtmlWebpackPlugin({
      template: path.join(__dirname, `..${path.sep}template${path.sep}js.ejs`),
      filename: process.cwd() + `${path.sep}dist_ejs${path.sep}${entry}.js.ejs`,
      chunks: [entry],
      inject:false
    }))
    config.plugins.push(new HtmlWebpackPlugin({
      template: path.join(__dirname, `..${path.sep}template${path.sep}css.ejs`),
      filename:process.cwd() + `${path.sep}dist_ejs${path.sep}${entry}.css.ejs`,
      chunks: [entry],
      favicon:webpackConfig.favicon,
      inject:false
    }))
  })
  if (devServerConfig.hot) {
    config.module.rules.unshift({
      test: /\.jsx?$/,
      use: require.resolve(`react-hot-loader${path.sep}webpack`),
      exclude: /node_modules/,
    })
    config.plugins.push(new webpack.HotModuleReplacementPlugin());
  }
  config.devtool = webpackConfig.sourceMap || '';
}

exports.production = function () {
    var config = this._default('production')
    return config
}

exports.postProduction = function (config, devServerConfig,webpackConfig) {
    var preEntrys = [];
    config.output.publicPath = process.env.NODE_ENV === "production" ? webpackConfig.cdnPath : webpackConfig.fatPath;
    //pro模式加hash
    config.output.filename = webpackConfig.libs ? '[name].js' : '[name].[chunkhash:6].js'
    if(webpackConfig.preset === 'ie8'){
        shimIe8Plugins(config);
    }
    config.plugins.unshift(new CleanWebpackPlugin(['dist'], {
        root: process.cwd(),
        verbose:  true,
        allowExternal: true
    }));
    webpackConfig.libs ? config.plugins.push(new ExtractTextPlugin('[name].css')) : config.plugins.push(new ExtractTextPlugin('[name].[contenthash:6].css'));
    let tempPath = '';
    webpackConfig.useTempPath && process.env.NODE_ENV === "production" ?  tempPath = 'dist_ejs_temp' : tempPath = 'dist_ejs';
    Object.keys(config.entry).forEach(function (entry) {
        if (Array.isArray(config.entry[entry])) {
            config.entry[entry].unshift.apply(config.entry[entry], preEntrys)
        } else {
            config.entry[entry] = preEntrys.concat(config.entry[entry])
        }
        if(!webpackConfig.libs){
            config.plugins.push(new HtmlWebpackPlugin({
                template: path.join(__dirname, `..${path.sep}template${path.sep}css.ejs`),
                filename: process.cwd() + `${path.sep}${tempPath}${path.sep}${entry}.css.ejs`,
                chunks: [entry],
                favicon:webpackConfig.favicon,
                inject:false
            }))
            config.plugins.push(new HtmlWebpackPlugin({
                template: path.join(__dirname, `..${path.sep}template${path.sep}js.ejs`),
                filename: process.cwd() + `${path.sep}${tempPath}${path.sep}${entry}.js.ejs`,
                chunks: [entry],
                inject:false
            }))
        }
    });
}


exports.NodeSSR = function () {
    var config = this._default('NodeSSR')
    return config;
}

exports.postNodeSSR = function (config, devServerConfig,webpackConfig) {
    var serverConfig = this._default('NodeSSR');
    let preEntrys = [];
    let nodeServerEntry = webpackConfig.nodeServerEntry;
    Object.keys(nodeServerEntry).forEach(function (entry) {
        if (Array.isArray(nodeServerEntry[entry])) {
            nodeServerEntry[entry].unshift.apply(nodeServerEntry[entry], preEntrys)
        } else {
            nodeServerEntry[entry] = preEntrys.concat(nodeServerEntry[entry])
        }
    });
    Object.assign(serverConfig, {
        entry : nodeServerEntry,
        output: {
            path: path.join(process.cwd(), `.${path.sep}dist_server${path.sep}`),
            filename: "[name].server.js",
            libraryTarget: 'commonjs2',
            publicPath:process.env.NODE_ENV === "production" ? webpackConfig.cdnPath : process.env.NODE_ENV === "fat" ? webpackConfig.fatPath : webpackConfig.devPath,
        },
        module: {
            rules: [{
                    test: /\.jsx?$/,
                    use: {
                        loader: require.resolve('babel-loader'),
                        options:{
                            presets: ['react'],
                            plugins: [
                                require.resolve("babel-plugin-transform-decorators-legacy"),
                                require.resolve("babel-plugin-transform-es2015-modules-commonjs"),
                            ]
                        }
                    },
                    include: /(node_modules\/igame_base_libs|src)/
                },
                {
                    test: /\.(png|jpg|jpeg|gif)$/,
                    use: require.resolve('url-loader'),
                },
                {
                    test: /\.(styl|css)$/,
                    use: 'null-loader'
                },
            ]
        },
        plugins: [
            new webpack.ProvidePlugin({
                React: 'react',
                ReactDOM: 'react-dom',
            }),
            new webpack.DefinePlugin({
                __IS_SSR__: true,
                __MODE__:'"node_ssr"'
            }),
        ],
        externals: [nodeExternals({
            whitelist: ['igame_base_libs']
        })]
    });
    return serverConfig;
}

function shimIe8Plugins(config) {
    config.module.rules.unshift({
        enforce: 'post',
        test: /\.js$/,
        use: {
            loader: require.resolve('es3ify-loader'),
        },
        include: /(node_modules\/igame_base_libs|src)/
    });
    config.plugins.pop();
    config.plugins.push(new webpack.optimize.UglifyJsPlugin({
        compress: {
            unused: true,
            drop_console: false,
            drop_debugger: true,
            dead_code: true,
            properties: false,
            warnings: false,
            screw_ie8: false,
        },
        mangle: false,
        mangle: {
            screw_ie8: false
        },
        output: {
            screw_ie8: false
        },
        comments: false
    }))
}