我现在正在学习webpack,我对webpack的魔力感到有些困惑。
我必须将字体真棒字体的路径设置为node_modules文件夹,但是在编译过程之后,它是错误的。
Sass文件:
$fa-font-path: "~@fortawesome/fontawesome-free/webfonts/";
@import "~@fortawesome/fontawesome-free/scss/fontawesome.scss";
@import "~@fortawesome/fontawesome-free/scss/regular.scss";
我必须将$ fa-font-path var放到node_modules /文件夹中字体的当前位置,否则webpack找不到字体并抛出错误。
我的CSS文件导出到:"App/Resources/Public/Css/main.css"
,并且webpack魔术将$ fa-font-path更改为我为字体“ Fonts /”选择的outputPath
@font-face {
font-family: 'Font Awesome 5 Free';
font-style: normal;
font-weight: 400;
src: url(Fonts/fa-regular-400.eot);
src: url(Fonts/fa-regular-400.eot?#iefix) format("embedded-opentype"), url(Fonts/fa-regular-400.woff2) format("woff2"), url(Fonts/fa-regular-400.woff) format("woff"), url(Fonts/fa-regular-400.ttf) format("truetype"), url(Fonts/fa-regular-400.svg#fontawesome) format("svg"); }
但是它应该是“ ../Fonts”,因为Css和Fonts文件夹处于同一级别。
我的webpack.config.js:
const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
const CleanWebpackPlugin = require('clean-webpack-plugin');
const config = {
src: './App/Resources/Private/',
dist: './App/Resources/Public/'
};
module.exports = {
entry: { main: config.src + 'Javascript/app.js' },
output: {
path: path.resolve(__dirname, config.dist),
filename: 'Javascript/[name].[contenthash].js'
},
module: {
rules: [
{
test: /\.js$/,
exclude: /node_modules/,
use: {
loader: "babel-loader"
}
},
{
test: /\.scss$/,
use: [ 'style-loader', MiniCssExtractPlugin.loader, 'css-loader', 'postcss-loader', 'sass-loader']
},
{
test: /\.(eot|woff|woff2|ttf|svg)(\?\S*)?$/,
use: [{
loader: 'file-loader',
options: {
name: '[name].[ext]',
outputPath: 'Fonts/'
}
}]
}
]
},
plugins: [
new CleanWebpackPlugin(config.dist, {} ),
new MiniCssExtractPlugin({
filename: 'Css/[name].[hash].css',
chunkFilename: 'Css/[id].[hash].css'
}),
new HtmlWebpackPlugin({
inject: true,
hash: true,
template: config.src + 'Html/index.html',
filename: 'index.html'
})
]
};
package.json
{
"name": "bootstrapwebpack",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"build:prod": "webpack --mode production",
"build:dev": "webpack --mode development"
},
"author": "",
"license": "ISC",
"dependencies": {
"@fortawesome/fontawesome-free": "^5.4.1"
},
"devDependencies": {
"@babel/core": "^7.1.2",
"@babel/preset-env": "^7.1.0",
"autoprefixer": "^9.2.1",
"babel-loader": "^8.0.4",
"clean-webpack-plugin": "^0.1.19",
"css-loader": "^1.0.0",
"file-loader": "^2.0.0",
"html-webpack-plugin": "^3.2.0",
"mini-css-extract-plugin": "^0.4.4",
"node-sass": "^4.9.4",
"postcss-loader": "^3.0.0",
"sass-loader": "^7.1.0",
"style-loader": "^0.23.1",
"webpack": "^4.21.0",
"webpack-cli": "^3.1.2"
}
}
我在这里和文档中找到的解决方案对我不起作用。也许有人可以帮助您:) Git Repo带来了不错的消息:https://gitlab.com/szmedia/bootstrapwebpack
答案 0 :(得分:2)
问题已解决:
只需将outputPath和publicPath添加到文件加载器中,如下所示:
const path = require('path');
const webpack = require('webpack');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
const CleanWebpackPlugin = require('clean-webpack-plugin');
const config = {
src: './App/Resources/Private/',
dist: './App/Resources/Public/'
};
module.exports = {
entry: {
main: config.src + 'Javascript/app.js' ,
sass: config.src + 'Scss/app.scss'
},
output: {
path: path.resolve(__dirname, config.dist),
filename: 'Javascript/[name].[contenthash].js'
},
module: {
rules: [
{
test: /\.js$/,
exclude: /node_modules/,
use: {
loader: "babel-loader"
}
},
{
test: /\.scss$/,
use: [ 'style-loader', MiniCssExtractPlugin.loader, 'css-loader', 'postcss-loader', 'sass-loader']
},
{
test: /\.(eot|woff|woff2|ttf|svg)(\?\S*)?$/,
use: [{
loader: 'file-loader',
options: {
name: '[name].[ext]',
outputPath: 'Fonts/',
publicPath: '../Fonts/'
}
}]
}
]
},
resolve: {
alias: {
jquery: "jquery/src/jquery"
}
},
plugins: [
new CleanWebpackPlugin(config.dist, {} ),
new MiniCssExtractPlugin({
filename: 'Css/[name].[hash].css',
chunkFilename: 'Css/[id].[hash].css'
}),
new HtmlWebpackPlugin({
inject: true,
hash: true,
template: config.src + 'Html/index.html',
filename: 'index.html'
})
]
};