How to have en entry outside the root webpack folder?

Question

I make some tests to handle files located outside the webpack folder. I have three simple files:

/*entry.js*/
import style from "./style.css";
import string from "./content.js";

console.log(string);

---

/*style.css*/
body {
    background: beige;
}

---

/*content.js*/
export default string = "It works from content.js.";

I use ES6 syntax so I have a .babelrc like this:

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

Here is my webpack.config.js: var webpack = require('webpack');

var ExtractTextPlugin = require("extract-text-webpack-plugin");
module.exports = {
  entry: './../outsidefolder/client/wptest/entry.js',
  //entry: './entry.js',
  debug:true,
  devtool:'source-map',
  resolve: {
    extensions: ['', '.js', '.jsx', '.css']
  },
  output: {
    path: __dirname,
    filename: "bundle.js"
  },
  module: {
    loaders: [
      {
        test: /\.js?$/,
        loaders: ['babel']
          },{
            test: /\.css$/,
            loader: ExtractTextPlugin.extract('style', 'css?modules&importLoaders=1&localIdentName=[name]__[local]___[hash:base64:5]')
          }
        ]
      },
      plugins: [
        new ExtractTextPlugin("app.css",{
          allChunks: true
        })
      ]
    };

And my package.json

{
  "private": true,
  "devDependencies": {
    "babel": "^6.3.26",
    "babel-core": ">=5.8.29",
    "babel-loader": ">=5.3.2",
    "babel-preset-es2015": "^6.3.13",
    "babel-preset-react": "^6.3.13",
    "browser-sync": "^2.9.11",
    "css-loader": "^0.21.0",
    "extract-text-webpack-plugin": "^0.8.2",
    "react-hot-loader": "^1.3.0",
    "style-loader": "^0.13.0",
    "webpack": "^1.12.2",
    "webpack-dev-middleware": "^1.2.0",
    "webpack-dev-server": "^1.12.1",
    "webpack-hot-middleware": "^2.4.1",
    "write-file-webpack-plugin": "^1.0.0"
  }
}

When my entry is entry: './entry.js' all works well. But when my entry point to an outside folder entry: './../outsidefolder/client/wptest/entry.js', all goes wrong and I have this error:

ERROR in ../oustsidefolder/client/wptest/entry.js
Module parse failed: /Users/vikti/dev/webpacktut/node_modules/babel-loader/index.js!/Users/vikti/dev/oustsidefolder/client/wptest/entry.js Line 1: Unexpected token
You may need an appropriate loader to handle this file type.
| import style from "./style.css";
| import string from "./content.js";
| 

Is is possible to handle files with webpack outside the root folder?

Answer 1

Use path.join() and dirname to create an absolute path to the entry file.

webpack.config.js

var path = require('path');

//...

entry: path.join(__dirname, './../outsidefolder/client/wptest/entry.js'),

//...