I am getting this error while migrating webpack. Below is my webpack.config.js. I also attached error screenshot. Please find attachment.
I am already added sass-loader ,css-loader,style-loader. If i am doing anything wrong please tell me guys.
Not sure what error is.... Thanks in advance for help 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")
})
]
};
};
Replace this
{
test: /\.(ttf|eot|woff|woff2)$/,
use: {
loader: "file-loader",
options: {
name: "fonts/[name].[ext]",
},
},
}
With this code
{
test: /\.(woff|woff2|eot|ttf|svg)$/,
loader: 'url-loader?limit=100000'
}
First install the url-loader
package
You can try different URL in your CSS file, instead of
src: url("./alter.ttf")
try this one:
src: url("/alter.ttf");
or this:
src: url("/images/alter.ttf");
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.