我不擅长webpack。我还没有真正"学会它",我有一个模板/样板,我从我制作的存储库中提取,它为我提供了一个在 React 中构建的环境。我正在努力为我的项目添加引导功能,因为我对 webpack 和了解加载器等的工作原理并不了解。有人可以帮我一把吗?也许是关于 webpack 加载器的简单解释?(学习它在我的清单上,但不是优先事项)。
我收到奇怪的错误,例如:
错误 ./~/bootstrap-sass/assets/fonts/bootstrap/glyphicons-halflings-regular.woff2
这是我的webpack.config.js
var webpack = require('webpack');
var path = require('path');
var BUILD_DIR = path.resolve(__dirname, 'src/client/public');
var APP_DIR = path.resolve(__dirname, 'src/client/app');
var config = {
entry: APP_DIR + '/index.jsx',
output: {
path: BUILD_DIR,
filename: 'bundle.js'
},
module : {
loaders : [
{
test : /.jsx?/,
include : APP_DIR,
loader : 'babel'
},
{
test: /.scss$/,
loaders: ["style", "css", "sass"]
}
]
}
};
module.exports = config;
这是我的包.json
{
"name": "react-camper-leaderboard",
"version": "1.0.0",
"description": "freecodecamp leaderboard sorter",
"main": "index.js",
"scripts": {
"test": "echo "Error: no test specified" && exit 1",
"dev": "webpack -d --watch",
"build": "webpack -p"
},
"author": "Tim Bell",
"license": "ISC",
"dependencies": {
"babel-loader": "^6.2.2",
"babel-preset-es2015": "^6.5.0",
"babel-preset-react": "^6.5.0",
"bootstrap": "^4.0.0-alpha.2",
"bootstrap-loader": "^1.0.8",
"bootstrap-sass": "^3.3.6",
"css-loader": "^0.23.1",
"file-loader": "^0.8.5",
"node-sass": "^3.4.2",
"react": "^0.14.7",
"react-dom": "^0.14.7",
"resolve-url-loader": "^1.4.3",
"sass-loader": "^3.1.2",
"style-loader": "^0.13.0",
"url-loader": "^0.5.7"
},
"devDependencies": {
"css-loader": "^0.23.1",
"node-sass": "^3.4.2",
"sass-loader": "^3.1.2",
"webpack": "^1.12.13"
},
"babel": {
"presets": [
"es2015",
"react"
]
}
}
从 sass-loader 中查看示例。您的webpack.config.js
应如下所示:
module.exports = {
...
module: {
loaders: [
{
test: /.woff2?$|.ttf$|.eot$|.svg$/,
loader: "file"
},
{
test: /.scss$/,
loaders: ["style", "css", "sass"]
}
]
}
};
由于您已经添加了一堆加载程序,因此应确保安装了所有加载程序:
npm i file-loader style-loader css-loader sass-loader --save-dev
然后,您应该将main.scss
作为 webpack 条目添加到 webpack.config.js
...
module.exports = {
...
entry: [
path.resolve(__dirname, '..', 'path', 'to', 'main.scss'),
// add other entries
],
...
。或者只是要求/导入您的main.js
:
require("./path/to/main.scss");
由于引导程序需要配置其url()
路径,因此您需要在导入引导程序之前设置$icon-font-path
。您的main.scss
应如下所示:
$icon-font-path: "~bootstrap-sass/assets/fonts/bootstrap/";
@import "~bootstrap-sass/assets/stylesheets/bootstrap";
如果你觉得@import "~bootstrap-sass/assets/stylesheets/bootstrap";
看起来很丑,你也可以在你的webpack.config.js
中添加一个别名:
module.exports = {
...
resolve: {
alias: {
"bootstrap-sass$": "bootstrap-sass/assets/stylesheets/bootstrap"
}
},
然后你只需要写:
@import "~bootstrap-sass";
你import
、require
或加载任何其他方式的每个扩展都必须有自己的加载器。
截至woff2
,您可能已经添加了以下内容:
{
test: /.woff2$/,
loader: 'url',
query: {
limit: 10240,
name: 'static/[hash].[ext]'
}
}
您可能需要查看url-loader
文档,了解它接受的所有参数。
您还可以匹配多个不同的文件名模式以与同一加载器一起使用,例如:
{
test: /.(eot|ttf|svg|png|gif|woff2?$/,
loader: 'url',
query: {
limit: 10240,
name: 'static/[hash].[ext]'
}
}
这将加载所有这些扩展。
可能是./~/bootstrap-sass/assets/fonts/bootstrap/glyphicons-halflings-regular.woff2
路径有问题。Bootstrap-sass 需要通过 sass 文件来获取它,但 webpack 找不到它。