我对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;
这是我的package.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","webpack": "^1.12.13"
},"babel": {
"presets": [
"es2015","react"
]
}
}
解决方法
检查
example from the sass-loader.您的webpack.config.js应如下所示：
module.exports = {
...
module: {
loaders: [
{
test: /\.woff2?$|\.ttf$|\.eot$|\.svg$/,loader: "file"
},{
test: /\.scss$/,"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");
由于bootstrap需要配置url()路径,因此需要在导入bootstrap之前设置$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";