Webpack 4在使用未定义函数时不会引发编译错误

Question

I recently got involved in a project which uses Webpack bundler. While refactoring the code I noticed that the bundler doesn't throw error on use of a function which is not defined.

import { foo } from './foo.js';

foo('hi');
baz('test');

Here baz is not imported and not defined, my expectations was that the bundler will throw error on baz as undefined, but it didn't.

It would be great to identify these cases in the compile time rather than at the runtime.

Answer 1

You'll need to run your code through a loader like eslint then ensure you turn on the no-undef rule. There's a sample of how to do this in the docs here: https://github.com/webpack-contrib/eslint-loader#usage .

module.exports = {
  // ...
  module: {
    rules: [
      {
        test: /\.js$/,
        exclude: /node_modules/,
        loader: 'eslint-loader',
        options: {
          // eslint options (if necessary)
        },
      },
    ],
  },
  // ...
};