refactor: next #1295
refactor: next #1295
Conversation
Codecov Report
@@ Coverage Diff @@
## master #1295 +/- ##
==========================================
+ Coverage 98.31% 98.35% +0.03%
==========================================
Files 11 11
Lines 892 972 +80
Branches 298 324 +26
==========================================
+ Hits 877 956 +79
- Misses 12 13 +1
Partials 3 3
Continue to review full report at Codecov.
|
|
I wanted starting writing new code from the {
test: /\.(eot|svg|ttf|woff2?)$/,
use: [
{
loader: 'file-loader',
options: {
name: '[name].[ext]',
outputPath: 'fonts/',
},
},
],
},This setup used to create CSS rules like src:url(/fonts/materialdesignicons-webfont.eot?#iefix&v=5.9.55)but as of commit 899a4e3 the following is what I get. src:url(file:///a2abc9c944c48139f361.eot?#iefix&v=5.9.55)The same holds true for the other formats of the MDI font, of course. Is this a mistake or a breaking change? I can't find documentation that explains what I need to do to fix it. |
|
Do you use |
Yes, I do. |
That changes the behavior, but it doesn't fix it. The corresponding output is now src:url(/a2abc9c944c48139f361.eot?v=5.9.55)The file export default __webpack_public_path__ + "fonts/materialdesignicons-webfont.eot";which causes the browser to write "Failed to decode downloaded font" in the console. I apologize if this pull request is work in progress or if there's some changelog that I haven't read. I just wanted to report it in case the behavior was unknown. |
it means you have broken fonts |
Yes, since the file But the way I see it, the CSS points out the wrong files. The files in the |
|
It means something wrong with your configuration, without it I can't help, anyway this issue is not related to these changes |
My actual project is under NDA, but here's a small(-ish) project that accomplishes the same thing. Dockerfile FROM node:16.1.0-buster-slim
WORKDIR /usr/src/web
RUN apt-get update && apt-get install --yes file && rm -rf /var/lib/apt/lists/*
COPY package.json ./
RUN npm install
COPY main.js webpack.config.js ./
RUN $(yarn bin)/webpack --mode development
CMD set -x && head -9 build/css/* && file build/*.* build/fonts/*main.js import './node_modules/@mdi/font/css/materialdesignicons.css';package.json {
"dependencies": {
"@mdi/font": "5.9.55"
},
"devDependencies": {
"css-loader": "webpack-contrib/css-loader#1167ab4a9f5b49e32a28f9b9645f6ab37b541f89",
"file-loader": "6.2.0",
"mini-css-extract-plugin": "1.6.0",
"webpack": "5.37.0",
"webpack-cli": "4.7.0"
},
"private": true
}webpack.config.js const MiniCssExtractPlugin = require('mini-css-extract-plugin');
module.exports = (_env, argv) => ({
mode: argv.mode,
entry: {
system: './main.js',
},
module: {
rules: [
{
test: /\.css$/,
use: [
MiniCssExtractPlugin.loader,
'css-loader',
],
},
{
test: /\.(eot|svg|ttf|woff2?)$/,
use: [
{
loader: 'file-loader',
options: {
name: '[name].[ext]',
outputPath: 'fonts/',
},
},
],
},
],
},
output: {
filename: 'js/[name].js',
path: `${__dirname}/build`,
publicPath: '/',
},
plugins: [
new MiniCssExtractPlugin({
filename: 'css/[name].css',
}),
],
});Building with When changing the However, I now discovered that if I remove the Does this mean that I'm not supposed to use |
|
@sjoqvist Can you create github repo better, it is faster - just clone and run |
|
You can find more information here https://webpack.js.org/guides/asset-modules/ |
I see, thanks. When upgrading to v5, I read the changelog and migration guide but didn't see I'll set up a GitHub repo in a bit. |
|
Works fine with |
|
You can set |
|
Can you provide steps to get the problem? Maybe you have wrong configured server? |
Thanks. I've already fixed it in my own project. I thought that I'm not sure what I'm looking at. Your screenshots don't look like the output from my demo. Did you try my demo repository? It should include all the steps. Just run |
Yes, and these screenshots from there with |
My apologies for not responding sooner. I haven't been able to figure out what you need. Just to be clear: Getting rid of The screenshots that you provided aren't from anything served by my repository. Hence, those screenshots don't tell me anything. I think that there's some kind of misunderstanding. A screenshot of a browser that says "Failed to decode downloaded font" seems utterly useless.
|
…shDigestLength` options added
This PR contains a:
Motivation / Use-Case
localIdentHashFunction,localIdentHashDigest,localIdentHashDigestLengthoptions addedBreaking Changes
~is depreacted but still supported, you can safely remove ~ from your code, due logic prefer relative then prefer absolute (only for esModules: true)urlandimportoptions removed typefunctionin favorobjecttype withfilterpropertyimportLoadersoption in favor import.loaders optionmodules.compileTypeoption in favormodules.modeoption, formodules.modeoption addedicsstypeinterpolatefunction fromloader-utilsin favor webpacktemplate strings:localIdentHashPrefixoption renamed inlocalIdentHashSaltesModules: trueAdditional Info
Supported template strings:
compiler.contextoption ormodules.localIdentContextoption.localIdentHashSalt,localIdentHashFunction,localIdentHashDigest,localIdentHashDigestLength,localIdentContext,resourcePathandexportName[<hashFunction>:hash:<hashDigest>:<hashDigestLength>]- hash with hash settings.