silverstripe-framework/webpack.config.js

const webpack = require('webpack');
const autoprefixer = require('autoprefixer');
const ExtractTextPlugin = require('extract-text-webpack-plugin');
const path = require('path');
// const SprityWebpackPlugin = require('sprity-webpack-plugin');

const PATHS = {
  MODULES: './node_modules',
  ADMIN: './admin',
  ADMIN_IMAGES: './admin/client/dist/images',
  ADMIN_CSS_SRC: './admin/client/src/styles',
  ADMIN_CSS_DIST: './admin/client/dist/styles',
  ADMIN_THIRDPARTY: './admin/thirdparty',
  ADMIN_JS_SRC: './admin/client/src',
  ADMIN_JS_DIST: './admin/client/dist/js',
  FRAMEWORK: '.',
  FRAMEWORK_THIRDPARTY: './thirdparty',
  FRAMEWORK_CSS_SRC: './client/src/styles',
  FRAMEWORK_CSS_DIST: './client/dist/styles',
  INSTALL_CSS_SRC: './src/Dev/Install/client/src/styles',
  INSTALL_CSS_DIST: './src/Dev/Install/client/dist/styles',
};

// Used for autoprefixing css properties (same as Bootstrap Aplha.2 defaults)
const SUPPORTED_BROWSERS = [
  'Chrome >= 35',
  'Firefox >= 31',
  'Edge >= 12',
  'Explorer >= 9',
  'iOS >= 8',
  'Safari >= 8',
  'Android 2.3',
  'Android >= 4',
  'Opera >= 12',
];

const config = [
  {
    // TODO Split out with new 'admin' module
    name: 'js',
    entry: {
      vendor: `${PATHS.ADMIN_JS_SRC}/bundles/vendor.js`,
      bundle: `${PATHS.ADMIN_JS_SRC}/bundles/bundle.js`,
      'LeftAndMain.Ping': `${PATHS.ADMIN_JS_SRC}/legacy/LeftAndMain.Ping.js`,
      leaktools: `${PATHS.ADMIN_JS_SRC}/legacy/leaktools.js`,
      MemberImportForm: `${PATHS.ADMIN_JS_SRC}/legacy/MemberImportForm.js`,
      CMSSecurity: `${PATHS.ADMIN_JS_SRC}/legacy/CMSSecurity.js`,
      UploadField_select: `${PATHS.ADMIN_JS_SRC}/legacy/UploadField_select.js`,
      TinyMCE_SSPlugin: `${PATHS.ADMIN_JS_SRC}/legacy/TinyMCE_SSPlugin.js`,
    },
    resolve: {
      root: [__dirname, path.resolve(__dirname, PATHS.ADMIN_JS_SRC)],
      modulesDirectories: [PATHS.MODULES],
    },
    output: {
      path: 'admin/client/dist',
      filename: 'js/[name].js',
    },

    // lib.js provies these globals and more. These references allow the framework bundle
    // to access them.
    externals: {
      'bootstrap-collapse': 'BootstrapCollapse',
      'components/Breadcrumb/Breadcrumb': 'Breadcrumb',
      'state/breadcrumbs/BreadcrumbsActions': 'BreadcrumbsActions',
      'components/FormAction/FormAction': 'FormAction',
      'components/FormBuilder/FormBuilder': 'FormBuilder',
      'components/FormBuilderModal/FormBuilderModal': 'FormBuilderModal',
      'components/GridField/GridField': 'GridField',
      'components/Toolbar/Toolbar': 'Toolbar',
      'containers/FormBuilderLoader/FormBuilderLoader': 'FormBuilderLoader',
      'deep-freeze-strict': 'DeepFreezeStrict',
      i18n: 'i18n',
      jQuery: 'jQuery',
      'lib/Backend': 'Backend',
      'lib/ReducerRegister': 'ReducerRegister',
      'lib/ReactRouteRegister': 'ReactRouteRegister',
      'lib/SilverStripeComponent': 'SilverStripeComponent',
      'page.js': 'Page',
      'react-addons-test-utils': 'ReactAddonsTestUtils',
      'react-dom': 'ReactDom',
      tether: 'Tether',
      'react-bootstrap-ss': 'ReactBootstrap',
      'react-redux': 'ReactRedux',
      'react-router-redux': 'ReactRouterRedux',
      'react-router': 'ReactRouter',
      'react-addons-css-transition-group': 'ReactAddonsCssTransitionGroup',
      react: 'React',
      'redux-form': 'ReduxForm',
      'redux-thunk': 'ReduxThunk',
      redux: 'Redux',
      config: 'Config',
      'lib/Router': 'Router',
    },
    module: {
      loaders: [
        {
          test: /\.js$/,
          exclude: /(node_modules|thirdparty)/,
          loader: 'babel',
          query: {
            presets: ['es2015', 'react'],
            plugins: ['transform-object-assign', 'transform-object-rest-spread'],
            comments: false,
          },
        },
        {
          test: '/i18n.js/',
          loader: 'script-loader',
        },
      ],
    },
    plugins: [
      new webpack.ProvidePlugin({
        jQuery: 'jQuery',
        $: 'jQuery',
      }),
      new webpack.DefinePlugin({
        'process.env':{
          // Builds React in production mode, avoiding console warnings
          'NODE_ENV': JSON.stringify('production')
        }
      }),
      new webpack.optimize.UglifyJsPlugin({
        compress: {
          unused: false,
          warnings: false,
        },
        output: {
          beautify: false,
          semicolons: false,
          comments: false,
          max_line_len: 200,
        },
      }),
      // Most vendor libs are loaded directly into the 'vendor' bundle (through require() calls in vendor.js).
      // This ensures that any further require() calls in other bundles aren't duplicating libs.
      new webpack.optimize.CommonsChunkPlugin({
        name: 'vendor',
        minChunks: Infinity,
      }),
    ],
  },
  {
    // TODO Split out with new 'admin' module
    name: 'css',
    entry: {
      'bundle': `${PATHS.ADMIN_CSS_SRC}/bundle.scss`,
      'editor': `${PATHS.ADMIN_CSS_SRC}/editor.scss`,
      'GridField_print': `${PATHS.ADMIN_CSS_SRC}/legacy/GridField_print.scss`,
      'AssetUploadField': `${PATHS.ADMIN_CSS_SRC}/legacy/AssetUploadField.scss`,
      'UploadField': `${PATHS.ADMIN_CSS_SRC}/legacy/UploadField.scss`,
    },
    output: {
      path: 'admin/client/dist/styles',
      filename: '[name].css',
    },
    module: {
      loaders: [
        {
          test: /\.scss$/,
          loader: ExtractTextPlugin.extract([
            'css?sourceMap&minimize&-core&discardComments',
            'postcss?sourceMap',
            'resolve-url',
            'sass?sourceMap',
          ]),
        },
        {
          test: /\.css$/,
          loader: ExtractTextPlugin.extract([
            'css?sourceMap&minimize&-core&discardComments',
            'postcss?sourceMap',
          ]),
        },
        {
          test: /\.(png|gif|jpg|svg)$/,
          loader: `url?limit=10000&name=../images/[name].[ext]`,
        },
        {
          test: /\.(woff|eot|ttf)$/,
          loader: `file?name=../fonts/[name].[ext]`,
        },
      ],
    },
    postcss: [
      autoprefixer({ browsers: SUPPORTED_BROWSERS }),
    ],
    plugins: [
      new ExtractTextPlugin('[name].css', { allChunks: true }),
    ],
  },
  {
    name: 'framework-css',
    entry: {
      [`${PATHS.INSTALL_CSS_DIST}/install`]: `${PATHS.INSTALL_CSS_SRC}/install.scss`,
      [`${PATHS.FRAMEWORK_CSS_DIST}/debug`]: `${PATHS.FRAMEWORK_CSS_SRC}/debug.scss`,
    },
    output: {
      path: './',
      filename: '[name].css',
    },
    module: {
      loaders: [
        {
          test: /\.scss$/,
          loader: ExtractTextPlugin.extract([
            'css?sourceMap&minimize&-core&discardComments',
            'postcss?sourceMap',
            'resolve-url',
            'sass?sourceMap',
          ]),
        },
        {
          test: /\.css$/,
          loader: ExtractTextPlugin.extract([
            'css?sourceMap&minimize&-core&discardComments',
            'postcss?sourceMap',
          ]),
        },
        {
          test: /\.(png|gif|jpg|svg)$/,
          loader: `url?limit=10000&name=../images/[name].[ext]`,
        },
        {
          test: /\.(woff|eot|ttf)$/,
          loader: `file?name=../fonts/[name].[ext]`,
        },
      ],
    },
    postcss: [
      autoprefixer({ browsers: SUPPORTED_BROWSERS }),
    ],
    plugins: [
      new ExtractTextPlugin('[name].css', { allChunks: true }),
    ],
  },
];

// Use WEBPACK_CHILD=js or WEBPACK_CHILD=css env var to run a single config
if (process.env.WEBPACK_CHILD) {
  module.exports = config.filter((entry) => entry.name === process.env.WEBPACK_CHILD)[0];
} else {
  module.exports = config;
}