Table of contents

• Motivation
• Installation
• Usage
• License

Even if build result with webpack has some warnings, build succeed with no error exit codes. This can be trouble if some developer not carefully sees the result of CI service. By changing warnings to errors, webpack can recognize every warning as errors.

This can happen especially if you use the resolve.alias option.

1. webpack configuration

{
  resolve: {
    alias: {
      actions: 'app/state/actions.js'
    }
  }
}

2. resolve.alias file code

// app/state/actions.js
export const loadUserList = () => {}

3. import actions in some file. build result has a warning 🐛

// loadUserLists. Not a loadUserList.
import { loadUserLists } from 'actions';

// ...

$ npm install --save-dev warnings-to-errors-webpack-plugin

Alternatively, using yarn.

$ yarn add --dev warnings-to-errors-webpack-plugin

• default

const WarningsToErrorsPlugin = require('warnings-to-errors-webpack-plugin');

module.exports = {
  // ...
  plugins: [
    new WarningsToErrorsPlugin(),
  ],
};

• with NoEmitOnErrorsPlugin

Skip the emitting phase whenever there are warnings while compiling. This ensures that no assets are emitted that include warnings.

// webpack >= v4
{
  optimization: {
    noEmitOnErrors: true,
  },
  plugins: [
    new WarningsToErrorsPlugin();
  ],
};

// webpack v2 and v3
{
  plugins: [
    new WarningsToErrorsPlugin(),
    new NoEmitOnErrorsPlugin(),
  ],
};

MIT © Taehwan Noh