How to use @instructure/ui-webpack-config - 5 common examples

module.exports = ({ config, mode }) => {
  const baseConfig = require('@instructure/ui-webpack-config')
  config = merge(config, baseConfig)

  // need to override this instead of merge for these...
  config.module.rules = baseConfig.module.rules
  config.optimization = require('@instructure/ui-webpack-config/config/optimization')
  if (process.env.NODE_ENV === 'production') {
    config.devtool = 'none'
  }

  console.log(`Building Storybook with React version ${React.version}...`)

  if (parseFloat(React.version) < 16) {
    console.error('Storybook requires React > 16. Run `yarn install:react:16` before running `yarn start:examples`.')
  }

  return config
}

cache: !DEBUG,
        mode: 'development',
        devtool: DEBUG ? 'cheap-module-source-map': 'none',
        externals: {
          'react/lib/ExecutionEnvironment': true,
          'react/lib/ReactContext': true,
          'react/addons': true,
          // The karma mocha plugin exposes a mocha instance as `window.mocha`,
          // but the mocha npm package exports the mocha contructor function.
          // The choma script needs access to the mocha constructor so it can
          // monkey-patch it for random test ordering.
          'mocha': 'mocha.constructor'
        },
        resolveLoader: {
          alias: {
            ...baseWebpackConfig.resolveLoader.alias,
            'ui-tests-loader': path.join(__dirname, './loaders/ui-tests-loader')
          }
        }
      },

      webpackMiddleware: { stats: 'errors-only' },

      // TODO: pull breakpoints from theme
      viewport: {
        breakpoints: [
          {
            name: 'small',
            size: {
              width: 320,
              height: 480
            }

* to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
 * copies of the Software, and to permit persons to whom the Software is
 * furnished to do so, subject to the following conditions:
 *
 * The above copyright notice and this permission notice shall be included in all
 * copies or substantial portions of the Software.
 *
 * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
 * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
 * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
 * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
 * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
 * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
 * SOFTWARE.
 */
module.exports = require('@instructure/ui-webpack-config').module.rules

'react',
      'react-dom'
    ],
    globals: './globals.js'
  },
  output: {
    path: outputPath,
    filename: '[name].js'
  },
  devServer: {
    disableHostCheck: true,
    contentBase: outputPath,
    host: '0.0.0.0'
  },
  plugins: [
    ...baseConfig.plugins,
    ...require('./plugins')
  ],
  resolve: DEBUG ? require('./resolve') : { mainFields: ['main'] }
}

module.exports = function plugins () {
  return require('@instructure/ui-webpack-config').plugins
}