Xtykutl

I'm learning webpack and would like to have a gulp task to run the webpack, so that I could later include this gulp task in my VS2017 build pipeline.

Here's the task named webpackBundlesJs that I've coded on gulpfile.js:

gulp.task(

    "webpackBundlesJs",

    function () {

        var webpackStream = require("webpack-stream");

        var webpackConfig = require("./React/webpack.dev.config");



        return gulp

            .src()

            .pipe(webpackStream(webpackConfig))

            .pipe(gulp.dest("Scripts/bundles/", { "mode": "0777" }));

    }

);

When I execute this gulp task from VS2017 Task Runner Explorer I get the following output with error:

C:DesenvSGCSgc.WebSgc.Web> cmd.exe /c gulp -b "C:DesenvSGCSgc.WebSgc.Web" --color --gulpfile "C:DesenvSGCSgc.WebSgc.WebGulpfile.js" webpackBundlesJs

[17:29:13] Using gulpfile C:DesenvSGCSgc.WebSgc.WebGulpfile.js

[17:29:13] Starting 'webpackBundlesJs'...

(node:14360) UnhandledPromiseRejectionWarning: TypeError: Cannot read property 'default' of undefined

    at C:DesenvSGCSgc.WebSgc.Webnode_modulesloader-runnerlibloadLoader.js:4:67

    at <anonymous>

(node:14360) UnhandledPromiseRejectionWarning: Unhandled promise rejection. This error originated either by throwing inside of an async function without a catch block, or by rejecting a promise which was not handled with .catch(). (rejection id: 1)

(node:14360) [DEP0018] DeprecationWarning: Unhandled promise rejections are deprecated. In the future, promise rejections that are not handled will terminate the Node.js process with a non-zero exit code.

internal/streams/legacy.js:59

      throw er; // Unhandled stream error in pipe.

      ^

Error: ./React/MenuSidebar/App.tsx

Module build failed (from ./node_modules/ts-loader/index.js):

(SystemJS) ENOENT: no such file or directory, open 'C:DesenvSGCSgc.WebSgc.WebC:DesenvSGCSgc.WebSgc.Webnode_modulests-loaderindex.js'

    Error: ENOENT: no such file or directory, open 'C:DesenvSGCSgc.WebSgc.WebC:DesenvSGCSgc.WebSgc.Webnode_modulests-loaderindex.js'

    Error loading C:/Desenv/SGC/Sgc.Web/Sgc.Web/C:DesenvSGCSgc.WebSgc.Webnode_modulests-loaderindex.js

Process terminated with code 1.

As you may see the problem seems to be in the path of the ts-loader that is wrong because it's assuming

C:/Desenv/SGC/Sgc.Web/Sgc.Web/C:DesenvSGCSgc.WebSgc.Webnode_modulests-loaderindex.js

instead of the correct one at

C:DesenvSGCSgc.WebSgc.Webnode_modulests-loaderindex.js

What do I need to do to correct this error ? where should I be loooking at ? webpack, or its npm plugin webpack-stream or tsconfig.json ?

Here's the relevant files' locations:

• at folder C:DesenvSGCSgc.WebSgc.Web I have a VS2017 web project named Sgc.Web


• at folder C:DesenvSGCSgc.WebSgc.Web I also have gulpfile.js and package.json


• folder C:DesenvSGCSgc.WebSgc.Webnode_modules has the node modules


• I'm using webpack to make the React JavaScript bundle of a React app; this React app MenuSidebar is located at folder C:DesenvSGCSgc.WebSgc.WebReactMenuSidebar


• folder C:DesenvSGCSgc.WebSgc.WebReact contains the files tsconfig.json (to be used for React apps only), webpack.generic.config.js (generic webpack config settings) and webpack.dev.config.js (development specific webpack config settings to be merged with webpack.generic.config.js).

And now the above mentioned files contents:

• C:DesenvSGCSgc.WebSgc.Webgulpfile.js

...

gulp.task(

    "webpackBundlesJs",

    function () {

        var webpackStream = require("webpack-stream");

        var webpackConfig = require("./React/webpack.dev.config");



        return gulp

            .src()

            .pipe(webpackStream(webpackConfig))

            .pipe(gulp.dest("Scripts/bundles/", { "mode": "0777" }));

    }

);

• C:DesenvSGCSgc.WebSgc.Webpackage.json:

{

   ...   

   "dependencies": {

    ...

    "react": "16.5.0",

    "react-dom": "16.5.0",

    "redux": "4.0.0",

    "react-redux": "5.0.7",

    ...   },   "devDependencies": {

    ...

    "babel-core": "6.26.3",

    "babel-loader": "7.1.5",

    "babel-preset-es2015": "6.24.1",

    "babel-preset-react": "6.24.1",

    ...

    "gulp": "3.9.1",

    ...

    "systemjs-builder": "0.16.13",

    "systemjs-plugin-text": "0.0.11",

    "ts-loader": "5.1.0",

    ...

    "typescript": "3.0.3",

    "uglifyjs-webpack-plugin": "^2.0.1",

    "webpack": "4.18.0",

    "webpack-cli": "3.1.0",

    "webpack-manifest-plugin": "2.0.4",

    "webpack-merge": "^4.1.4",

    "webpack-stream": "^5.1.1"   

  } 

}

• C:DesenvSGCSgc.WebSgc.WebReacttsconfig.json

 {

      "compilerOptions": {

        "target": "es5",

        "lib": [ "es5", "dom", "scripthost", "es2015" ],

        "module": "commonjs",

        "moduleResolution": "node",

        "jsx": "react",

        "sourceMap": true,

        "noImplicitAny": false,

        "noEmitOnError": true,

        "removeComments": false

      },

      "exclude": [

        "../node_modules"

      ]

    }

• C:DesenvSGCSgc.WebSgc.WebReactwebpack.generic.config.js

const path = require("path"); 

const ManifestPlugin = require("webpack-manifest-plugin");



function getGenericConfig() {

    let genericConfig = {};



    genericConfig.entry = {

        "MenuSidebarReact": "./React/MenuSidebar/App.tsx"

    };



    genericConfig.output = {

        "path": path.resolve(__dirname, "../Scripts/bundles"),

        "libraryTarget": "var",

        "library": "lib[name]"

    };



    // only output when errors happen

    genericConfig.stats = "errors-only",



    genericConfig.resolve = {

        "extensions": [".ts", ".tsx", ".js"]

    };



    //#region Optimization (chunks)



    const genericReact = {

        "chunks": "all",

        "name": "GenericReact",

        test(chunks) {

            ...

            };

            return checkResource(chunks);

        },

        "reuseExistingChunk": true,

        "enforce": true

    };



    const vendorReact = {

        chunks: "all",

        name: "VendorReact",

        test(chunks) {

            var checkResource = null;



            checkResource = function (value) {

                ...

                return false;

            };



            return checkResource(chunks);

        },

        reuseExistingChunk: true,

        enforce: true

    };



    const vendorRedux = {

        chunks: "all",

        name: "VendorRedux",

        test(chunks) {

            var checkResource = null;



            checkResource = function (value) {

                ...

            };



            return checkResource(chunks);

        },

        reuseExistingChunk: true,

        enforce: true

    };



    genericConfig.optimization = {

        "splitChunks": {

            "cacheGroups": {

                "GenericReact": genericReact,

                "VendorReact": vendorReact,

                "VendorRedux": vendorRedux

            }

        }

    };



    //#endregion



    //#region Modules



    const tsLoader = {

        "test": /.tsx?$/,

        "loader": "ts-loader"

    };



    const babelLoader = {

        "test": /.(js|jsx)$/,

        "exclude": /node_modules/,

        "use": [{

            "loader": "babel-loader",

            "options": {

                "presets": ["es2015", "react"],

                "cacheDirectory": true

            }

        }]

    };



    genericConfig.module = {

        "rules": [tsLoader, babelLoader]

    };



    //#endregion



    //#region Plugins



    const manifestPlugin = new ManifestPlugin({

        "fileName": "bustersWebpackJs.json",

        "map": funcManifestPluginCorrectKeysValues

    });



    genericConfig.plugins = [manifestPlugin];



    //#endregion



    return genericConfig;  }



module.exports = getGenericConfig();

• C:DesenvSGCSgc.WebSgc.WebReactwebpack.dev.config.js:

const merge = require("webpack-merge");

const genericConfig = require("./webpack.generic.config.js");



/**

 * Get the specific webpack configuration object for a DEVelopment build, that makes only non minified JS files.

 * @returns {Object} dev specific webpack config object.

 */

function getNonMinifiedConfig() {

    let nonMinConfig = {};



    // by default this option ensures that files won't be minified !

    nonMinConfig.mode = "development";



    nonMinConfig.output = {};

    nonMinConfig.output.filename = "[name].js?[chunkhash]";

    nonMinConfig.output.chunkFilename = nonMinConfig.output.filename;



    return nonMinConfig;

}



module.exports = merge(genericConfig, getNonMinifiedConfig());

any idea or hint as to where is the problem is deeply appreciated.
Thanks in advance,
Miguel.