WebPack使用闭合webpack-plugin代替Google-closure-compiler

Question

在WebPack V4之前， closure-webpack-plugin 均未提供支持，因此我们必须使用 google-closure-compiler 我不确定如何使用插件。

文件：buildsecondary.js

var ClosureCompiler = require('google-closure-compiler').compiler;
function runClosueCompiler(){
    if(!flags.compile)
      return;
    console.log('Compiling');
    var fs = require('fs');
    var closureCompiler = new ClosureCompiler({
      js: 'folder/filename.js',
      compilation_level: 'ADVANCED'
    });
    var compilerProcess = closureCompiler.run(function(exitCode, stdOut, stdErr) {
      //compilation complete 
      if(exitCode === 0){
        console.log('successful');
        fs.writeFileSync('folder/filename.min.js', stdOut);
        console.log('compiled file in folder/filename.min.js');
      }else{
        console.log('complilation exited with code '+exitCode);
        console.error(stdErr);
      }
    });
    console.log('Closure compiler executed successfully');  
}

setTimeout(function () {
  console.log('appending module.exports into file/filename.js (import fix)');
  var fs = require('fs');
  var filedata = [
    fs.readFileSync(__dirname + '/file/filename.js').toString(),
    'if(typeof module !== "undefined")',
    'module.exports = filename;'
  ];
  //append to file export
  fs.writeFileSync(__dirname + '/file/filename.js', filedata.join('n'));
  console.log('Executing closure compiler');
  runClosureCompiler();
}, 2 * 100);

文件：webpack.config.js

var Webpack = require('webpack');
var path = require('path');
const ClosurePlugin = require('closure-webpack-plugin');
module.exports = {
    entry: './folder/entry_file.js',
    output: {
        path: path.join(__dirname, 'folder'),
        filename: 'filename.js',
    },
    module: {
        rules: [
            {
                // Target Files
                // test: /.js?$/g,
                // Excluded folders
                exclude: /(node_modules|bower_components)/,
            },
        ]
    },
    optimization: {
        minimize: true,
        minimizer: [
            new ClosurePlugin({ mode: 'STANDARD'} , 
            { compilation_level: "ADVANCED" })
        ]
    },
    plugins: [
        new Webpack.LoaderOptionsPlugin({
            debug: true
        }),

    ],
};  

我不确定应该在webpack.config.js中更改的内容来构建类似于buildsecondary.js的文件。

Answer 1

CLOSURE-WEBPACK-PLUGIN具有WebPack V3版本

我将其与Gulp一起使用，例如这个

webpack.conf.js

const ClosurePlugin = require('closure-webpack-plugin');
const webpack = require('webpack');
const path = require('path');
module.exports = {
  devtool: 'eval-source-map',
  entry: {
    main: './src/global/js/app',
  },
  resolve: {extensions: ['.js']},
  output: {
    filename: 'js/[name].min.js',
    path: path.resolve(__dirname, 'src', 'static')
  },
  plugins: [
    new ClosurePlugin({
      mode: 'NONE',
      closureLibraryBase:
          require.resolve('google-closure-library/closure/goog/base'),
      deps: [
        require.resolve('google-closure-library/closure/goog/deps'),
        './.tmp/deps.js',
      ],
      extraDeps
    },
        devFlags),
  ],
};

gulpfile.js(部分(

const gulp = require('gulp');
const webpackConfig = require('../webpack.config.js');
const closureDeps = require('gulp-google-closure-deps');
// You'll want to connect isDevMode with your build system.
const isDevMode = true; 
const closureDir = path.dirname(
    require.resolve('google-closure-library/closure/goog/base'));
gulp.task('js', ['deps'], () => {
  // If we are in dev mode, do the uncompiled setup.
  if (isDevMode) {
    return gulp.src('')   // Source files have been configred in Webpack
        .pipe(webpack(webpackConfig))
        .pipe(gulp.dest('.'));  // Output files to public folder
  }
});
gulp.task('deps', function() {
  return gulp.src(['src/**/js/**/*.js'])
      .pipe(closureDeps({
        'closurePath': closureDir,
        prefix: '../../../..',
        baseDir: '.'
      }))
      .pipe(rename('deps.js'))
      .pipe(gulp.dest('.tmp'));
});

Answer 2

让WebPack识别Goog.require，Goog.provide，Goog.Module和GOOG.DecleModuleID，您可以尝试此Google-closure-library-webpack-plugin。

Div>