在 webpack 配置中，"context" 是什么意思？

Question

我是一个 webpack 的初学者。我想要编写一个 webpack.config.js 来构建我的项目。但是它出了一些问题！

这是我的 package.json 文件（所有依赖项都已安装）：

{
  "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"
  }
}

我的项目目录结构如下：

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

entry.js 是：

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

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

style.css 是：

body {
    background: #f90;
}

重要文件 webpack.config.js 为:

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"]
        }]
    }
};

当我运行npm run dev时，控制台会打印：

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

> webpack-101@1.0.0 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
▀ ╢░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░

如果我修改了webpack.config.js文件（删除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"]
        }]
    }
};

它运行良好：

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

> webpack-101@1.0.0 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
▀ ╢░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░

我阅读了webpack的配置，它说context是： 用于解析入口选项的基本目录（绝对路径！）。 但是为什么我添加它后，CSS文件无法解析呢？

还有，在webpack中管理CSS文件的最佳实践是什么？

谢谢！

- leohxj

Answer 1

很可能是由于在Windows环境下运行webpack命令（在您的情况下：npm run dev）导致此问题。

在webpack.config.js（Windows环境）中使用以下内容是不好的： context: __dirname + "/src"，因为应该使用\\来分隔文件夹。 无论如何，最佳实践是使用path.resolve，它知道如何使用正确的斜杠（Linux或Windows）附加文件夹和子文件夹。

正确的用法如下（应该在Win或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'
  }
};

注意：在上面的例子中，以 ./ 开头的条目似乎很重要。 Entry 完成了上下文，因此它必须以 ./ 开头，而不能以 / 或 "js/entry.js" 开头，否则也无法正常工作。

- Mercury

Answer 2

当我将context更改为以下内容：

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

它正常运行。我发现path返回一个绝对路径。

- xw340721