Comments (11)
@matthewma7 Hey, I'm started investigating into the issue with two messages and it's looks like it's problem with html-webpack-plugin
.
Did you update html-webpack-plugin
to latest version with support for webpack 5? Looks like @jantimon already known about this issue
from modify-source-webpack-plugin.
The reason is that html-webpack-plugin is using a new webpack 5
feature which is not working correctly with watchpack
.
The webpack core team is trying to fix it:
from modify-source-webpack-plugin.
Hi. CSS files are modules after they processed with style-loader
or other loader, so plugin cannot handle raw files before they transformed to NormalModule
from modify-source-webpack-plugin.
If you want to modify CSS files after style-loader
and you use multiple loaders on your css files, there is another problem.
{
plugins: [
new ModifyModuleSourcePlugin({
test: /\.css$/
})
],
module: {
rules: [
{
test: /\.css$/i,
use: ['style-loader', 'css-loader']
}
]
}
}
In this case one the same CSS file will be modified twice, because Webpack will create two normal modules:
/node_modules/css-loader/dist/cjs.js ! /path/to/css-file.css
/node_modules/style-loader/dist/cjs.js ! /node_modules/css-loader/dist/cjs.js ! /path/to/css-file.css
And this problem is not only with CSS files. It's how works with all files if they processed with multiple loaders. So, I think we need to find way to modify raw files before they multiply as modules.
And then we should rename our plugin to ModifySourcePlugin
, not ModifyModuleSourcePlugin
as currently 😄
from modify-source-webpack-plugin.
@matthewma7 You can share more about your use case, so I can try help you
from modify-source-webpack-plugin.
Hi @artemirq , Thank you for the detailed answer!
My use case is relatively simple. I have a css file within a node_module package that has a font defined with url('http://foo.com/font.woff2)', instead of loading the font over the internet, I would like to pack it locally as static media. So I am thinking performing two tasks with a webpack plugin. 1, download the font.woff2 locally, possibly in the same directly along side with the css file. 2, change the url to url('./font.woff2').
Doing these two tasks manually before webpack build does seems to work.
It might be possible to just do literally these two tasks before compile stage, but a loader sounds more systematic.
from modify-source-webpack-plugin.
During the experiments I figured out and fixed all above described problems. Changes is prepared in this PR.
Now I understand that I was wrong with raw modules. Yes, we can modify raw CSS files/modules before they got processed by other loaders :)
I published all changes under 2.0.0-beta.6
version (this version for webpack 5). So you can try it.
I wrote test with css file and external css file, looks like it's working well. Also added some other changes: renamed class to ModifySourcePlugin
and slightly changed options format.
@matthewma7 So now you can do something like this
{
plugins: [
new ModifySourcePlugin({
rules: [
{
test: /node_modules\/modern-normalize\/modern-normalize\.css$/, // external css
modify: (src, file) =>
src + `.myExtraClass { background: gray; /* ${file} */ }`
}
]
})
],
module: {
rules: [
{
test: /\.css$/i,
use: ['style-loader', 'css-loader']
}
]
}
}
from modify-source-webpack-plugin.
Thank you! for the immediate help. 😃
It works for my case. I am curious if it is a huge change from unshift() to push().
I noticed another small thing, I saw two 'Compiled successfully.' message when this plugin is enabled. Maybe it has something to do with the fact of dynamic loader addition.
from modify-source-webpack-plugin.
@matthewma7 I'm happy that it's works for you.
Yep, pushing loader to the end of array let's Webpack to use its first (as I understand).
Two messages it's the problem. Maybe there is the way to preload this loader to avoid rebuild, I don't know. I think I will ask the Webpack guys later.
from modify-source-webpack-plugin.
Got it.
Thank you the help! This plugin opens up so many possibilities! 😃
This issue can be closed now. 🙂
from modify-source-webpack-plugin.
@matthewma7 Thank you for the kind words! 😊 ❤️
from modify-source-webpack-plugin.
Related Issues (14)
- Extra webpack recompliation on initial build HOT 2
- How used the plugin in custom webpack plugin? HOT 6
- Give access to full file path in the modify callback HOT 5
- Supported file types? HOT 1
- how to use this plugin in vue2.0
- crash when build again HOT 3
- Incompatibility with webpack v >= 5.66.0 HOT 3
- Describe about user defined compile-time constants in Readme
- I used the plugin to remove sections from my code using a regexp, is this still possible somehow? HOT 2
- This will broke webpack cache when the value be repleaced is dynamic HOT 4
- Doesn't run when using Watch HOT 9
- Add support for regular expressions in replace operation and update docs
- Feature request: add ability to dynamically determine inserted contents based on current file path
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from modify-source-webpack-plugin.