silki/lib/config/webpack.config.mod.dev.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 (config, cwd) {
  var publicPath = '/';
  var cssLoaders = (0, _getCSSLoaders2.default)(config);
  var theme = (0, _getTheme2.default)(process.cwd(), config);
  var paths = (0, _paths2.default)(cwd);
  // 获取多页面的所有入口，每个入口文件名默认为 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'];
  }
  delete entries.vendor;

  return {
    devtool: 'cheap-module-source-map',
    entry: entries,
    output: {
      path: paths.appBuild,
      filename: '[name].js',
      pathinfo: true,
      publicPath: publicPath
    },
    devServer: {
      disableHostCheck: true
    },
    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]'
          }
        }
      }, {
        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: ['style-loader'].concat(_toConsumableArray(cssLoaders.own))
      }, {
        test: /\.css$/,
        include: paths.appNodeModules,
        use: ['style-loader'].concat(_toConsumableArray(cssLoaders.nodeModules))
      }, {
        test: /\.less$/,
        include: paths.appSrc,
        use: ['style-loader'].concat(_toConsumableArray(cssLoaders.own), [{
          loader: 'less-loader',
          options: {
            modifyVars: theme
          }
        }])
      }, {
        test: /\.less$/,
        include: paths.appNodeModules,
        use: ['style-loader'].concat(_toConsumableArray(cssLoaders.nodeModules), [{
          loader: 'less-loader',
          options: {
            modifyVars: theme
          }
        }])
      }, {
        test: /\.scss$/,
        include: paths.appSrc,
        use: ['style-loader'].concat(_toConsumableArray(cssLoaders.own), [{
          loader: 'sass-loader',
          options: config.sassOptions
        }])
      }, {
        test: /\.scss$/,
        include: paths.appNodeModules,
        use: ['style-loader'].concat(_toConsumableArray(cssLoaders.nodeModules), [{
          loader: 'sass-loader',
          options: config.sassOptions
        }])
      }, {
        test: /\.(mp4|ogg|svg)$/,
        use: {
          loader: 'file-loader',
          options: {
            name: 'static/[name].[ext]'
          }
        }
      }]
    },
    plugins: [new _webpack2.default.HotModuleReplacementPlugin(), new _caseSensitivePathsWebpackPlugin2.default(), new _WatchMissingNodeModulesPlugin2.default(paths.appNodeModules), new _systemBellWebpackPlugin2.default(), new _webpack2.default.DefinePlugin(_extends({
      'process.env': {
        NODE_ENV: JSON.stringify(process.env.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 : []))
      }
    })].concat(!_fs2.default.existsSync(paths.appPublic) ? [] : new _copyWebpackPlugin2.default([{
      from: paths.appPublic,
      to: paths.appBuild
    }])).concat((0, _html2.default)(entries)).concat(!config.dll ? [] : new _webpack2.default.DllReferencePlugin({
      context: paths.appDirectory,
      manifest: require(_path2.default.join(paths.appPublic, 'vendor-manifest.json'))
    })),
    externals: config.externals || '',
    node: {
      fs: 'empty',
      net: 'empty',
      tls: 'empty'
    }
  };
};

var _autoprefixer = require('autoprefixer');

var _autoprefixer2 = _interopRequireDefault(_autoprefixer);

var _caseSensitivePathsWebpackPlugin = require('case-sensitive-paths-webpack-plugin');

var _caseSensitivePathsWebpackPlugin2 = _interopRequireDefault(_caseSensitivePathsWebpackPlugin);

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 _WatchMissingNodeModulesPlugin = require('react-dev-utils/WatchMissingNodeModulesPlugin');

var _WatchMissingNodeModulesPlugin2 = _interopRequireDefault(_WatchMissingNodeModulesPlugin);

var _systemBellWebpackPlugin = require('system-bell-webpack-plugin');

var _systemBellWebpackPlugin2 = _interopRequireDefault(_systemBellWebpackPlugin);

var _paths = require('../utils/paths');

var _paths2 = _interopRequireDefault(_paths);

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 _path = require('path');

var _path2 = _interopRequireDefault(_path);

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'];