webpack - webpack 配置中的上下文是什么意思？

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是: The base directory (absolute path!) for resolving the entry option. .但是为什么我添加它，css文件不能reslove？

在 webpack 中管理 css 文件的基本做法是什么？

谢谢!

Answer 1

这很可能是由于运行 webpack 命令(在您的情况下: npm run dev )
在 Windows 环境中。

在 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" )。条目完成上下文
所以它必须以 ./ 开头而不是与 /也不是 "js/entry.js"也不会工作。