silki/lib/config/webpack.config.prod.js

Cli tool for build react app, based on generator-react-multipage, create-react-app, roadhog. Support react multiple pages app develop.

'use strict';

Object.defineProperty(exports, "__esModule", {
  value: true
});

var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };

exports.default = function (args, appBuild, config, paths) {
  var debug = args.debug,
      analyze = args.analyze;

  var NODE_ENV = debug ? 'development' : process.env.NODE_ENV;

  var publicPath = config.publicPath;
  var cssLoaders = (0, _getCSSLoaders2.default)(config);
  var theme = (0, _getTheme2.default)(process.cwd(), config);

  // 获取多页面的所有入口，每个入口文件名都为 index.js
  var configEntry = config.entry ? paths.appDirectory + '/' + config.entry : paths.appSrc + '/pages/*/index.js';
  var entries = (0, _entry2.default)(configEntry, config);
  // 添加mock数据入口
  if (_fs2.default.existsSync(paths.appSrc + '/mock/mock.js')) {
    entries['mock'] = [paths.appSrc + '/mock/mock.js'];
  }

  return {
    bail: true,
    entry: entries,
    output: {
      path: appBuild,
      filename: '[name].js',
      publicPath: publicPath,
      chunkFilename: '[name].[chunkhash:8].chunk.js'
    },
    resolve: {
      extensions: ['.web.js', '.web.jsx', '.web.ts', '.web.tsx', '.js', '.json', '.jsx', '.ts', 'tsx'],
      alias: {
        components: paths.appSrc + '/components/',
        containers: paths.appSrc + '/containers/',
        utils: paths.appSrc + '/utils/',
        mods: paths.appSrc + '/mods/',
        images: paths.appSrc + '/images/',
        'react/lib/ReactMount': 'react-dom/lib/ReactMount'
      }
    },
    resolveLoader: {
      modules: [paths.ownNodeModules, paths.appNodeModules]
    },
    module: {
      rules: [{
        exclude: [/\.html$/, /\.(js|jsx)$/, /\.(css|less|sass|scss|styl)$/, /\.json$/, /\.(mp4|ogg|svg)$/],
        use: {
          loader: 'url-loader',
          options: {
            limit: 10000,
            name: 'static/[name].[ext]',
            publicPath: publicPath
          }
        }
      }, {
        test: /\.(js|jsx)$/,
        include: paths.appSrc,
        use: {
          loader: 'babel-loader',
          options: config.useBabelrc ? {} : {
            babelrc: false,
            presets: [require.resolve('babel-preset-env'), require.resolve('babel-preset-react'), require.resolve('babel-preset-stage-0')].concat(config.extraBabelPresets || []),
            plugins: [require.resolve('babel-plugin-add-module-exports'), require.resolve('babel-plugin-react-require'), require.resolve('babel-plugin-syntax-dynamic-import')].concat(config.extraBabelPlugins || []),
            cacheDirectory: true
          }
        }
      }, {
        test: /\.css$/,
        include: paths.appSrc,
        use: _extractTextWebpackPlugin2.default.extract({
          fallback: 'style-loader',
          use: cssLoaders.own
        })
      }, {
        test: /\.css$/,
        include: paths.appNodeModules,
        use: _extractTextWebpackPlugin2.default.extract({
          fallback: 'style-loader',
          use: cssLoaders.nodeModules
        })
      }, {
        test: /\.less$/,
        include: paths.appSrc,
        use: _extractTextWebpackPlugin2.default.extract({
          fallback: "style-loader",
          use: [].concat(_toConsumableArray(cssLoaders.own), [{
            loader: 'less-loader',
            options: {
              modifyVars: theme
            }
          }])
        })
      }, {
        test: /\.less$/,
        include: paths.appNodeModules,
        use: _extractTextWebpackPlugin2.default.extract({
          fallback: "style-loader",
          use: [].concat(_toConsumableArray(cssLoaders.nodeModules), [{
            loader: 'less-loader',
            options: {
              modifyVars: theme
            }
          }])
        })
      }, {
        test: /\.scss/,
        include: paths.appSrc,
        use: _extractTextWebpackPlugin2.default.extract({
          fallback: 'style-loader',
          use: [].concat(_toConsumableArray(cssLoaders.own), [{
            loader: 'sass-loader',
            options: config.sassOptions
          }])
        })
      }, {
        test: /\.scss/,
        include: paths.appNodeModules,
        use: _extractTextWebpackPlugin2.default.extract({
          fallback: 'style-loader',
          use: [].concat(_toConsumableArray(cssLoaders.nodeModules), [{
            loader: 'sass-loader',
            options: config.sassOptions
          }])
        })
      }, {
        test: /\.(mp4|ogg|svg)$/,
        use: {
          loader: 'file-loader',
          options: {
            name: 'static/[name].[ext]',
            publicPath: publicPath
          }
        }
      }]
    },
    plugins: [new _webpack2.default.DefinePlugin(_extends({
      'process.env': {
        NODE_ENV: JSON.stringify(NODE_ENV)
      }
    }, !config.define ? {} : (0, _normalizeDefine2.default)(config.define))), new _webpack2.default.ProvidePlugin({
      jQuery: 'jquery',
      React: 'react',
      ReactDOM: 'react-dom'
    }), new _webpack2.default.LoaderOptionsPlugin({
      options: {
        context: __dirname,
        postcss: [(0, _autoprefixer2.default)(config.autoprefixer || {
          browsers: ['>1%', 'last 4 versions', 'Firefox ESR', 'not ie < 9']
        })].concat(_toConsumableArray(config.extraPostCSSPlugins ? config.extraPostCSSPlugins : []))
      }
    }), new _extractTextWebpackPlugin2.default({
      filename: '[name].css',
      allChunks: true
    })].concat(debug ? [] : new _webpackParallelUglifyPlugin2.default({
      cacheDir: '.cache/', // 设置 cache 地址，加速压缩
      uglifyJS: {
        compress: {
          screw_ie8: true, // React doesn't support IE8
          warnings: false
        },
        mangle: {
          screw_ie8: true
        },
        output: {
          comments: false,
          screw_ie8: true
        }
      }
    })).concat(analyze ? new _webpackVisualizerPlugin2.default() : []).concat(!_fs2.default.existsSync(paths.appPublic) ? [] : new _copyWebpackPlugin2.default([{
      from: paths.appPublic,
      to: paths.appBuild
    }])).concat(!config.multipage || config.noVendor ? [] : // 或配置了 noVendor
    new _webpack2.default.optimize.CommonsChunkPlugin({
      name: 'vendor',
      filename: 'vendor.js',
      minChunks: Infinity
    })).concat((0, _html2.default)(entries)),
    externals: config.externals || '',
    node: {
      fs: 'empty',
      net: 'empty',
      tls: 'empty'
    }
  };
};

var _autoprefixer = require('autoprefixer');

var _autoprefixer2 = _interopRequireDefault(_autoprefixer);

var _copyWebpackPlugin = require('copy-webpack-plugin');

var _copyWebpackPlugin2 = _interopRequireDefault(_copyWebpackPlugin);

var _webpack = require('webpack');

var _webpack2 = _interopRequireDefault(_webpack);

var _fs = require('fs');

var _fs2 = _interopRequireDefault(_fs);

var _extractTextWebpackPlugin = require('extract-text-webpack-plugin');

var _extractTextWebpackPlugin2 = _interopRequireDefault(_extractTextWebpackPlugin);

var _webpackVisualizerPlugin = require('webpack-visualizer-plugin');

var _webpackVisualizerPlugin2 = _interopRequireDefault(_webpackVisualizerPlugin);

var _getTheme = require('../utils/getTheme');

var _getTheme2 = _interopRequireDefault(_getTheme);

var _getCSSLoaders = require('../utils/getCSSLoaders');

var _getCSSLoaders2 = _interopRequireDefault(_getCSSLoaders);

var _normalizeDefine = require('../utils/normalizeDefine');

var _normalizeDefine2 = _interopRequireDefault(_normalizeDefine);

var _entry = require('../utils/entry');

var _entry2 = _interopRequireDefault(_entry);

var _html = require('../utils/html');

var _html2 = _interopRequireDefault(_html);

var _webpackParallelUglifyPlugin = require('webpack-parallel-uglify-plugin');

var _webpackParallelUglifyPlugin2 = _interopRequireDefault(_webpackParallelUglifyPlugin);

function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

function _toConsumableArray(arr) { if (Array.isArray(arr)) { for (var i = 0, arr2 = Array(arr.length); i < arr.length; i++) { arr2[i] = arr[i]; } return arr2; } else { return Array.from(arr); } }

module.exports = exports['default'];