For questions please post on Stack Overflow and use the 'webpack' tag (http://stackoverflow.com/tags/webpack).
Hi all, I'm working on a project where webpacker imports a custom npm package; however, that package also has its own dependencies (which are custom). How can I get webpacker to auto reload the main package, when any of its dependencies are updated? The main package loads its dependencies via import myCustomPackage from '<path>/dist/bundle' (as an example).
At the moment, I'm having to run yard add file: <path> every time I update one of the child dependencies and this takes a long time (>50 secs)
I think the problem is that Webpack won't watch nested dependencies. It can already struggle with too many watchers and changing nested dependencies is inadvisable asfik. Does using yarn link on the sub dependency help at all if you're not using it already? I think that may make it more of a top dependency but I haven't tried this.
There might be an option to increase depth etc but it'll probably slow down watches
Oh you might try adding a context dependency on the folder you want. A plugin seems to exist that'll make this easier but the general idea isn't specific to it. See: https://www.npmjs.com/package/filewatcher-webpack-plugin
because what you actually wind up with is
myproject/
node_modules/
mylib/ -> /workspace/mylib/
dist/
node_modules/
sublib/ -> /workspace/sublib/
dist/etc
that's assuming you started with
cd sublib; npm link, cd mylib; npm link; npm link sublib;, cd myproject; npm link mylib
(and the
-> above represents a softlink)
Hello, my name's Arin and I am the creator of TeamLearn. TeamLearn is a website where you can learn how to code. But It's got a very small problem. It isn't done yet. And that's why i'm asking you to join our "call for code" if I can say so myself. We need you to make the world a better place.
aka code for me for free so I can profit off my website xD
Could some other dependency require it?
I use HtmlInlineCSSWebpackPlugin to take all my
imported CSS and inject a style tag into the generate index.html. The combination of plugins doesn't work if I remove style-loader and style-loader I think is included the JS in the bundle (which isn't needed by HtmlInline has statically included the CSS).
It's weird because the inline plugin depends on mini-css-extract plugin (which I do use, in prod mode), which says that it must not be used in the same build as
style-loader
when you say you "think"
style-loader is in the bundle, what's that based on? Have you used e.g. source-map-explorer?
@thw0rted Thanks for your suggestions. I think I'm in over my head and will have to pick this up next week, it's only a small bit of JS. I looked at the generated bundle and saw code to with creating style nodes. The project is otherwise empty so didn't come from anywhere else.
I'm sure I'm doing something dumb but I've been fighting with this for days now. I'm trying to use the
sass-loader additionalData config to append a dynamic variable to all my scss files. But when I try to build it the build fails because the variable is undefined. I created a slimmed-down project for illustrative purposes here https://github.com/AlexDenton/bootstrap-loader-test. There are definitely some weird things going on with the dependencies but I've been tinkering with it and can't seem to find root cause.
Hello! I'm trying to migrate from webpack 2.2.1 to webpack 5+. Output app.js has just ~100 lines of code out of ~50k project has and in the end there is such statement:
// This entry module is referenced by other modules so it can't be inlined
var __webpack_exports__ = __webpack_require__("./src/main.es6");What could be the reason webpack 5 skips packing certain sources into the final build? How can I force webpack 5 to fail build when it happens?
Perhaps it's because Webpack 5 automatically tree shakes better? You might be doing something like expecting to add a side effect import of jQuery and then using
$ all over without doing import $ from "jquery" or doing that but not using most of the library and getting it removed from the build which means Webpack removes all the dependencies it bundled before
@DavidArchibald thank you for your answer! Yeah, project has a lot of statically (not through npm package, but as
<script>...</script> in html) added libraries - planning to get rid of all of those, but need to start from at least adding my main.es6 into the build ^^. Should I completely remove "tree shaking"? The fact that my whole main (min thing I want to see in my build) doesn't go into the build is kinda weird.
I'd look into https://webpack.js.org/plugins/html-webpack-plugin/ for removing script tags from your html etc.
I wouldn't remove Tree Shaking, it's one of Webpack's best features for reducing bundle sizes; if you use only a handful of functions from libraries you don't need to keep the entire library around, right? As a stopgap I'd try provide plugin which will essentially import it anywhere you use the identifiers.
I wouldn't remove Tree Shaking, it's one of Webpack's best features for reducing bundle sizes; if you use only a handful of functions from libraries you don't need to keep the entire library around, right? As a stopgap I'd try provide plugin which will essentially import it anywhere you use the identifiers.
@DavidArchibald I do use
html-webpack-plugin already, but to just insert webpack-generated app.js into index.html.ejs. The problem is that app.js doesn't contain my code from src/main.es6 (and code from 100+ other sources, but that's lesser problem). The whole reason of using webpack in my case is to pack sources into single bundle and I can't understand yet why entry file doesn't go into the bundle.
@DavidArchibald here it is:
const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = (env, argv) => ({
entry: './src/main.es6',
optimization: {
minimize: argv.mode == 'production' ? true : false
},
devtool: 'inline-source-map',
module: {
rules: [
{
test: /\.(tsx|ts|js|es6)$/,
use: 'ts-loader',
exclude: /node_modules/,
include:[
path.join(__dirname, '.'),
path.join(__dirname, 'src'),
],
},
],
},
resolve: {
extensions: [ '.tsx', '.ts', '.js', '.es6' ],
},
output: {
filename: 'app.js',
path: path.resolve(__dirname, 'dist'),
},
plugins: [
new HtmlWebpackPlugin({
title: "My game",
filename: 'index.html',
template: 'src/index.html.ejs',
hash: true,
debug: argv.mode == 'development',
}),
],
});
@DavidArchibald generated
app.js is ~20Kb in size and mostly just contains sourcemap data, so the actual included code is ~100 lines with This entry module is referenced by other modules so it can't be inlined comment in the end. Original project has ~50k lines of code and webpack 2 generates ~1.2Mb app.js
@DavidArchibald it doesn't run, which is no wonder because it doesn't contain most of the code. I actually don't understand the line
__webpack_require__("./src/main.es6") because src/main.es6 is not supposed to get uploaded to server - only app.js, so src/main.es6 won't be there when user will access the page (that's my whole purpose of using webpack - to bundle everything into app.js).
First of all, I believe this is development code generation or an unusual production result -- if Webpack says
__webpack_require__("./src/main.es6"); it doesn't really mean it's doing an http request to get the file off of the filesystem. There's a mapping of filenames to portions of code so there should be a function with ./src/main.es6 near it.
Does it not run at all like as in a top level
console.log won't appear or what? Could you put together a small repo that I could download? Try to get those as small as possible such that it doesn't seem to work, e.g. a single library and file with a package.json and lock with that config? I'm not sure I can step you through solutions with just this since there's a few layers of problems possible.
@DavidArchibald okey, I managed to get webpack to pack all the code into
app.js. I think problem was with test: /\.(tsx|ts|js|es6)$/, param to ts-loader. I guess typescript doesn't handle .es6 and .js files and was outputting empty results so webpack was packing nothing into the final build. I renamed ALL (.es6, .js) the files to .ts, run tsc on all of them (including webpack.config.js) publishing to ts_dist dir and eventually run webpack from inside ts_dist dir. Now app.js is heavy and juicy ~3Mb! Thanks for your help!
I was curious about the es6 in the ts-loader but I definitely didn't think it'd be causing the problem
maybe allowJS would solve it?
or some other compiler config
@DavidArchibald yeah, I was having problems with "allowJs" being ignored when tried to run
npx tsc ./src/main.ts and googled that tsc ignores tsconfig.js when provided specific list of files, so I guess that's why tsc was ignoring tsconfig.js when invoked from within ts-loader because ts-loader invokes tsc specifically for every matched file? Dunno ... complicated stuff
Hi all!
We are considering a module federation to split our monolith FE. We started playing with a simple federation and we stumbled upon some issues. Our Vue package doesn't work when imported via MF. It works as a standalone application. It works when we dynamically import it also.
- here is our main app git@github.com:borisozegovic/federation-main.git (npm i; npm run serve)
- here is our federation app git@github.com:borisozegovic/federation-producer.git (npm i; npm run serve)
Here is the thing, we don't care about this package, we can substitute it, but we don't know why it doesn't work with MF only, and should we expect similar problems down the road. Any ideas? The package works if we remove content inside of <GmapMap> :(
@SlausB I use the
@ngtools/webpack loader instead of ts-loader, because my project is Angular, but I think it's calling ts-loader under the hood. It takes a tsConfigPath config argument. It looks like for ts-loader, the option is called configFile
but it says that by default, the value is just
tsconfig.json so it should in fact be picking up your file
One thing that often confuses new TS users is setting
include correctly, if a TS file is imported from one of your sources but isn't covered by the include wildcard, that's an error
You can get more help in the
TypeScript channel, where I also lurk