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文件无法重新开发？

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

谢谢！

Answer 1

将context更改为此后：

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

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

Answer 2

这很可能是因为运行了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"也不会有效。

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

2 个答案: