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

Question

我是webpack的初学者用户。我想写一个webpack.config.js来建立我的项目。但它有什么问题！

这里是我的package.json（所有dependenciens安装）：

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

I牛逼效果很好：

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

我改变context这话：

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

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

Answer 2

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

在webpack.config.js（Windows环境）有这样的：

context: __dirname + "/src",

是不好的，因为你应该使用\\文件夹间独立。 反正最佳实践是使用哪知道追加使用正确的斜杠（Linux或Windows）

正确的用法是（应该赢或Linux的工作）的文件夹和子文件夹path.resolve：

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"也不适用。