我是一个 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文件的最佳实践是什么?
谢谢!