What does context mean in the webpack configuration?

Question

I am a beginner user of webpack. I want to write a webpack.config.js to build my project. But something wrong with it!

Here is my package.json (All dependenciens are installed):

{
  "name": "webpack-101",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "dev": "webpack --progress --colors",
    "build": "webpack --progress --colors"
  },
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "css-loader": "^0.23.1",
    "style-loader": "^0.13.0",
    "webpack": "^1.12.14",
    "webpack-dev-server": "^1.14.1"
  }
}

And my project directory structure is:

--webpack-hello
---- dist
----src
    --css
      -- style.css
    --js
      -- entry.js
      -- content.js
---- index.html
---- package.json
---- webpack.config.js
---- node_modules

entry.js is:

// load css files
require("../css/style.css");

document.write("It works.");
document.write("<br/>");
document.write(require("./content.js"));

style.css is:

body {
    background: #f90;
}

The important file, webpack.config.js is :

var path = require('path');
var webpack = require('webpack');

module.exports = {
    context: __dirname + "/src",
    entry:  "./js/entry.js",
    output: {
        path: __dirname + "/dist",
        filename: "bundle.js"
    },
    module: {
        loaders: [{
            test: /\.css$/,
            loaders: ["style", "css"]
        }]
    }
};

When I run npm run dev, the console prints:

F:\my-workspace\codeTest\webpack\webpack-hello>npm run dev

> [email protected] dev F:\my-workspace\codeTest\webpack\webpack-hello
> webpack --progress --colors

▀ ╢░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░
Hash: 081ea611fafd2241cf14
Version: webpack 1.12.14
Time: 107ms
    Asset     Size  Chunks             Chunk Names
bundle.js  3.03 kB       0  [emitted]  main
   [0] ./js/entry.js 194 bytes {0} [built]
   [2] ./js/content.js 93 bytes {0} [built]
    + 1 hidden modules

ERROR in ./css/style.css
Module not found: Error: Cannot resolve 'file' or 'directory' ./../../node_modules/css-loader/index.js in F:\my-workspace\codeTest\webpack\webpack-hello/src\css
 @ ./css/style.css 4:14-79

ERROR in ./css/style.css
Module not found: Error: Cannot resolve 'file' or 'directory' ./../../node_modules/style-loader/addStyles.js in F:\my-workspace\codeTest\webpack\webpack-hello/src\css
 @ ./css/style.css 7:13-71
▀ ╢░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░

If I modify the webpack.config.js (remove the context):

var path = require('path');
var webpack = require('webpack');

module.exports = {
    entry:  "./src/js/entry.js",
    output: {
        path: __dirname + "/dist",
        filename: "bundle.js"
    },
    module: {
        loaders: [{
            test: /\.css$/,
            loaders: ["style", "css"]
        }]
    }
};

It works well:

F:\my-workspace\codeTest\webpack\webpack-hello>npm run dev

> [email protected] dev F:\my-workspace\codeTest\webpack\webpack-hello
> webpack --progress --colors

▀ ╢░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░
Hash: 798df3fe90bea39e31ad
Version: webpack 1.12.14
Time: 811ms
    Asset   Size  Chunks             Chunk Names
bundle.js  12 kB       0  [emitted]  main
   [0] ./src/js/entry.js 194 bytes {0} [built]
   [5] ./src/js/content.js 93 bytes {0} [built]
    + 4 hidden modules
▀ ╢░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░

I read the configuration of webpack, it says the context is : The base directory (absolute path!) for resolving the entry option.. But why I add it, the css files cannot reslove?

And what is the base practice for manage css files in webpack?

Thanks!

Answer 1

Most likely this is due to running webpack command (in your case: npm run dev) in Windows environment.

Having this in the webpack.config.js (Windows environment):

context: __dirname + "/src",

is not good since you should use the \\ to seperate between folders. Anyway best practice is to use the path.resolve which knows to append folders and sub folders using the correct slash (linux or windows)

The correct usage is (should work on Win or Linux):

const path = require('path');
const webpack = require('webpack');

module.exports = {
  context: path.resolve(__dirname, "src"),
  entry:  "./js/entry.js",
  output: {
    path: `${__dirname}/dist`,
    filename: 'bundle.js'
  }
};

Note: Seems that having the entry starts with ./ is important in the above example -
(entry: "./js/entry.js"). Entry completes the context so it must start with ./ and not with / nor "js/entry.js" will not work as well.

Answer 2

After I change context to this:

context: path(__dirname,'src/');

It runs as normal. I found out that path returns an absolute path.