[英]React / Webpack - “Module parse failed: Unexpected token - You may need an appropriate loader to handle this file type.”
[英]Module parse failed: Unexpected character '@'You may need an appropriate loader to handle this file type.(Webpack : 4.4.0)
我在遷移webpack時遇到此錯誤。 下面是我的webpack.config.js。 我還附上了錯誤截圖。 請查收附件。
我已經添加了sass-loader,css-loader,style-loader。 如果我做錯了什么,請告訴我們。
不確定是什么錯誤....提前感謝您的幫助 Webpack.config.js
const path = require("path");
const HtmlWebpackPlugin = require("html-webpack-plugin");
const CleanWebpackPlugin = require("clean-webpack-plugin");
const settings = {
distPath: path.join(__dirname, "dist"),
srcPath: path.join(__dirname, "src")
};
function srcPathExtend(subpath) {
return path.join(settings.srcPath, subpath)
}
module.exports = (env, options) => {
const isDevMode = options.mode === "development";
return {
devtool: isDevMode ? "source-map" : false,
resolve: {
extensions: [".ts", ".tsx", ".js"],
},
module: {
rules: [
{
test: /\.tsx?$/,
use: ["babel-loader", "ts-loader", "tslint-loader"]
},
{
test: /\.scss$/,
use: [
"style-loader",
{
loader: "css-loader",
options: {
sourceMap: isDevMode
}
},
{
loader: "postcss-loader",
options: {
plugins: [
require("autoprefixer")()
],
sourceMap: isDevMode
}
},
{
loader: "sass-loader",
options: {
sourceMap: isDevMode
}
}
]
},
{
test: /\.(ttf|eot|woff|woff2)$/,
use: {
loader: "file-loader",
options: {
name: "fonts/[name].[ext]",
},
},
},
{
test: /\.(jpe?g|png|gif|svg|ico)$/i,
use: [
{
loader: "file-loader",
options: {
outputPath: "assets/"
}
}
]
},
{
test: /\.js$/,
exclude: /node_modules/,
use: [
'babel-loader'
]
}
]
},
plugins: [
new CleanWebpackPlugin([settings.distPath], {
verbose: true
}),
new HtmlWebpackPlugin({
template: srcPathExtend("index.ejs")
})
]
};
};
替換它
{
test: /\.(ttf|eot|woff|woff2)$/,
use: {
loader: "file-loader",
options: {
name: "fonts/[name].[ext]",
},
},
}
有了這段代碼
{
test: /\.(woff|woff2|eot|ttf|svg)$/,
loader: 'url-loader?limit=100000'
}
首先安裝url-loader
包
您可以在CSS文件中嘗試不同的URL,而不是
src:url(“./ alter.ttf”)
試試這個:
src: url("/alter.ttf");
或這個:
src: url("/images/alter.ttf");
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.