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