For questions please post on Stack Overflow and use the 'webpack' tag (http://stackoverflow.com/tags/webpack).
dependabot-preview[bot] on npm_and_yarn
dependabot-preview[bot] on npm_and_yarn
chore(deps-dev): bump ts-loader… (compare)
dependabot-preview[bot] on npm_and_yarn
dependabot-preview[bot] on npm_and_yarn
chore(deps-dev): bump core-js f… (compare)
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)
because what you actually wind up with is
myproject/
node_modules/
mylib/ -> /workspace/mylib/
dist/
node_modules/
sublib/ -> /workspace/sublib/
dist/
etc
cd sublib; npm link
, cd mylib; npm link; npm link sublib;
, cd myproject; npm link mylib
->
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.
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).
style-loader
style-loader
is in the bundle, what's that based on? Have you used e.g. source-map-explorer
?
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?
$
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
<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.
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.
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',
}),
],
});
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
__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
).
__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.
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.
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!
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 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> :(
@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
tsconfig.json
so it should in fact be picking up your file
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
TypeScript
channel, where I also lurk