Comments (4)
eliperelman
commented on August 11, 2024
Interesting, I hadn't noticed this particular use case. I think we can find a way to make this work.
So, there is no .use method from a Rule instance. There is a loader method which has the signature:
loader(name, loader, options)According to the Webpack docs a UseEntry must have a loader property which is a string. If I execute the extract method, let's look at the return:
> ExtractTextPlugin.extract({ fallback: 'style-loader', use: 'css-loader' })
[ { loader: '/temp/node_modules/extract-text-webpack-plugin/loader.js',
options: { omit: 1, remove: true } },
{ loader: 'style-loader' },
{ loader: 'css-loader' } ]
So, looks like 3 loaders with possible options. Since webpack-chain requires loaders to be named, you can get around this by using an index or something to generate that name (or by using the loader itself as the ID):
const rule = config.module.rule('css');
ExtractTextPlugin
.extract({ fallback: 'style-loader', use: 'css-loader' })
.map(({ loader, options }, index) => rule.loader(index, loader, options));Will that work for you?
from webpack-chain.
sean-clayton
commented on August 11, 2024
@eliperelman Unfortunately not :( I don't think it's an issue with webpack-chain at this point, though, so I'm going to go ahead and close the ticket—thank you for the help, though 😄
from webpack-chain.
eliperelman
commented on August 11, 2024
@sean-clayton ah ok. Please let me know if you find out what the issue was, and if you think there is something actionable we can do here. Thanks!
from webpack-chain.
sean-clayton
commented on August 11, 2024
@eliperelman I did a little more messing around and I got a build to successfully output a CSS file via the extract plugin, but it looks like css-loader doesn't take effect (I have minimize set to true, but the extracted CSS is not minimized).
I've created a repo here: https://github.com/sean-clayton/neutrino-test
The steps to reproduce are:
- Install deps:
yarn install - Run build:
yarn build
Again, I'm not sure this is a problem with webpack-chain.
Here is the error I'm getting:
./~/css-loader?{"minimize":true}!./~/extract-text-webpack-plugin/loader.js?{"omit":1,"remove":true}!./~/style-loader!./~/css-loader?{"minimize":true}!./~/normalize.css/normalize.css
Module build failed: Unknown word (5:1)
3 | // load the styles
4 | var content = require("!!../css-loader/index.js?{\"minimize\":true}!./normalize.css");
> 5 | if(typeof content === 'string') content = [[module.id, content, '']];
| ^
6 | // add the styles to the DOM
7 | var update = require("!../style-loader/addStyles.js")(content, {});
8 | if(content.locals) module.exports = content.locals;
Error
at /Users/sean/code/neutrino-test/node_modules/css-loader/lib/processCss.js:214:23
at runMicrotasksCallback (internal/process/next_tick.js:58:5)
at _combinedTickCallback (internal/process/next_tick.js:67:7)
at process._tickCallback (internal/process/next_tick.js:98:9)
@ ./~/normalize.css/normalize.css 4:14-184
@ ./src/index.js
@ multi ./src/index.js
./~/css-loader?{"minimize":true}!./~/extract-text-webpack-plugin/loader.js?{"omit":1,"remove":true}!./~/style-loader!./~/css-loader?{"minimize":true}!./~/normalize.css/normalize.css
Module build failed: Unknown word (1:1)
> 1 | // removed by extract-text-webpack-plugin
| ^
Error
at /Users/sean/code/neutrino-test/node_modules/css-loader/lib/processCss.js:214:23
at runMicrotasksCallback (internal/process/next_tick.js:58:5)
at _combinedTickCallback (internal/process/next_tick.js:67:7)
at process._tickCallback (internal/process/next_tick.js:98:9)from webpack-chain.
Related Issues (20)
- the allowedHosts can't set 'all' HOT 1
- Missing strictModuleErrorHandling HOT 1
- Dependency Dashboard
- How to add polyfills? HOT 2
- When using vue as Multi Page Application, components in each entry point's internal directory cannot be used in common HOT 1
- Why tap functions return undefined? HOT 1
- Is there a configure for packaging wasm file? HOT 1
- One loader testing multiple file types
- RegExps in include.add, not working on Windows HOT 1
- How to specify filename for entry HOT 2
- config.output.chunkLoadingGlobal is not a function HOT 1
- How do I write this configuration ? HOT 2
- sideEffetcs method ts declare HOT 1
- This module is declared with using 'export =', and can only be used with a default import when using the 'allowSyntheticDefaultImports' flag. HOT 1
- Externals config for specific entry HOT 1
- support asset modules with generator HOT 2
- How to add a plugin developed based on unplugin ? HOT 2
- How to modify Heap Memory Limit? HOT 1
- Does webpack-chain support webpack5 resolve.fallback? HOT 1
- This project is no longer maintained
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 webpack-chain.