google/closure-compiler-js

Create webpack loader

enjikaka opened this issue · 3 comments

Would be nice with a webpack loader for closure compiler.
See: https://webpack.github.io/docs/loaders.html

Today we use Babel like this below at my workplace;

Webpack conf:

    {
        test: /\.js$/,
        exclude: /(node_modules)|(lib)/,
        loader: 'babel',
        query: {
          presets: ['es2015']
        }
      },

Components

define([
  'components/some-component' // .js file
], (
  someComponent
) => {
  'use strict';

  // Do something with someComponent
});

https://www.npmjs.com/package/closure-compiler-web-loader
https://github.com/enjikaka/closure-compiler-web-loader

Made working non-configurable example.

Usage like this;

  1. npm install closure-compiler-web-loader
  2. Add it to webpack module loaders. Example of config file;
const ClosureCompiler = require('google-closure-compiler-js').webpack;
const path = require('path');

module.exports = {
  entry: [
    path.join(__dirname, 'src', 'main.js')
  ],
  output: {
    path: path.join(__dirname, 'dist'),
    filename: 'app.min.js'
  },
  module: {
    loaders: [
      {
        test: /\.js$/,
        exclude: /(node_modules)|(lib)/,
        loader: 'closure-compiler'
      }
    ]
  }
};

I'm missing something, but

Module not found: Error: Can't resolve 'closure-compiler'

@Kikobeats Webpack changes their config all the time to break things and fuck up for the community :) You now have to write the full module name; which is closure-compiler-web-loader. Before, webpack assumed this when you only wrote closure-compiler. So this should work;

const ClosureCompiler = require('google-closure-compiler-js').webpack;
const path = require('path');

module.exports = {
  entry: [
    path.join(__dirname, 'src', 'main.js')
  ],
  output: {
    path: path.join(__dirname, 'dist'),
    filename: 'app.min.js'
  },
  module: {
    loaders: [
      {
        test: /\.js$/,
        exclude: /(node_modules)|(lib)/,
        loader: 'closure-compiler-web-loader'
      }
    ]
  }
};