gulp-query-webpack

Webpack plugin for gulp-query

Uses babel-loader, style-loader, css-loader and sass-loader

Webpack with a single line of code.

Supports:

• Webpack 4 + Babel
• Import .scss ans .css in js
• Decorators, dynamic import, class properties, object rest spread
• Custom config for Babel

P.S. Try gulp-query-webpack-buble with the blazing fast, batteries-included ES2015 compiler

npm install gulp-query gulp-query-webpack

Example

Paste the code into your gulpfile.js and configure it

let build = require('gulp-query')
  , webpack = require('gulp-query-webpack')
;
build((query) => {
    query.plugins([webpack])
      .webpack('src/js/app.js','js/','app')
    
      // Rename and own babel config
      .webpack('src/js/admin.js','js/undercover.js',{
        babel: {
          presets: ['env']
        }
      })
    
      // Config as object
      .webpack({
        from: 'src/js/main.js',
        to: 'js/',
        name: 'main'
      })
    ;
});

And feel the freedom

gulp
gulp --production // For production
gulp watch // Watching change
gulp webpack // Only for webpack
gulp webpack:app // Only for app.js
gulp webpack:admin webpack:main watch // Watching change only for admin.js and main.js
...

Options

.webpack({
    name: "task_name", // For gulp webpack:task_name 
    from: "src/js/app.js",
    to: "js/", // set filename "js/concat.js" -- for rename
    source_map: true,
    source_map_type: 'inline',
    full: false, // if set true is without compress in prod
    babel: {
      presets: ['env']
    }
})