Comments (9)
That doesn't work, and makes no sense.
The useable API enables and disables styles on use
and unuse
. You cannot enable and disable the styles anymore when they are in a external stylesheet.
from extract-text-webpack-plugin.
@sokra thanks for clearing that up.
Can you reiterate in a few words what this plugin does? The readme is quite terse at this point :)
from extract-text-webpack-plugin.
It moves every require("style.css")
in entry chunks into a separate css output file. So your styles are no longer inlined into the javascript, but separate in a css bundle file. If your total stylesheet volume is big, it will be faster because the stylesheet bundle is loaded in parallel to the javascript bundle.
Advantages:
- Fewer style tags (older IE has a limit)
- CSS SourceMap
- CSS requested in parallel
- CSS cached separate
- Faster runtime (less code and DOM operations)
Caveats:
- Additional HTTP request
- Longer compilation time
- Complexer configuration
- No runtime public path modification
from extract-text-webpack-plugin.
That's nice and verbose. Perhaps, can be moved to the README.
Last question, when I include the bundled css, I do so directly in html. There is the customary /*# sourceMappingURL=bundle.js.map*/
at the end, however, chrome still shows me references to bundled css only.
Could I be missing something?
from extract-text-webpack-plugin.
@sokra ping
from extract-text-webpack-plugin.
You need to enable SourceMaps in devtools.
You need to use the devtool: "sourcemap"
option.
in html you need something like <link rel="stylesheet" href="bundle.css">
from extract-text-webpack-plugin.
Thanks! That brings up an interesting point. I removed my devtool: "sourcemap"
option to make JS sourcemaps work with absolute paths in webstorm. It's starting to appear, I can choose only one or the other, but not both.
new webpack.SourceMapDevToolPlugin(
'[file].map', null,
"[absolute-resource-path]", "[absolute-resource-path]")
Word?
from extract-text-webpack-plugin.
devtool: "sourcemap"
is just a shortcut for the SourceMapDevToolPlugin
.
from extract-text-webpack-plugin.
Thanks 👍
from extract-text-webpack-plugin.
Related Issues (20)
- Not working with webpack 4 HOT 4
- How to get that generated css in webpack plugin even in dev mode where style-loader is being used? HOT 1
- remove neo-async HOT 1
- webpack 3.8.1 css loader not working HOT 1
- Newbie question. Sorry for my ignorance. How do I uninstall? HOT 2
- Remove "/" from href="" on generated HTML HOT 1
- Sourcemaps are not linked HOT 1
- How to use this plugin and minify SCSS to CSS? HOT 7
- CSS file not generated HOT 3
- "extract-text-webpack-plugin" loader is used without the corresponding plugin HOT 3
- lost -webkit-box-orient HOT 2
- no vendor.css
- How to extract critical and uncritical css to different separate css file? HOT 1
- Stats/debug log could be improved HOT 1
- CSS is extracted from Dynamically loaded chunks, but not injected in page by the fallback loader HOT 1
- Removes Required CSS HOT 1
- Chrome Refused to apply style HOT 1
- Not able to run karma getting errors related to ```extract-text-webpack-plugin``` HOT 1
- 4.0.0-beta for a year+ - is this a dead project? HOT 2
- I've also got this issue: Module parse failed: Unexpected character '#' (17:0); HOT 2
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 extract-text-webpack-plugin.