I use to use webpack-devserver which was not the sharpest tool in the box. Well it was never near the browser-sync.
What do you use these days for dev server?

I have understand is the core concept of Webpack but there is very few documentation about it, any hint would be great.

Hi there, new to webpack. I have a single entry point and output file named [name].bundle.js. When I compile I get two files main.bundle.js and 0.bundle.js. Can someone explain this to me

I'm using a library to build my webpacks and npm fails because the library is symlinked.

basically what happens is that package-lock doesn't go deep enough to figure out dependencies and then at depth=n it says that it cannot find the module. So the solution is to use dependencies which have a small tree, and i cannot find an alternative to copy-webpack-plugin which has a big dependency tree

So I do not wanna know if I can drop a complete react app into a Vue app, this is possible as far as I know. I wanna know If I can pull for instance a react component with its own state management into a Vue component and feed the data from there?

I know code sharing has become so much easier with module federation, hence I was hoping there might be a possibility to do this.

Hi I come from a React dev shop and we love Webpack. Is there anywhere to acquire some stickers to show our proud support?

Does anyone have any advice on how we could acquire some?

Please PM if you have an idea, thanks!

Hi, I am new to webpack and I just pushed another webpack project to github however, I see that 3 other projects were also pushed at the same time, I am confused

in short : if you bundle all your JavaScript in a single file:

1- scripts from other pages will try to hook events in the current page. this may succeed ( an element in the current page has same id of an element in another page just by chance) which is bad.

2- too many error messages in the console due to other page's scripts trying to hook into the current page.

am I missing somethings?

How do I add footer and header to several HTML pages?

I have recently started learning Webpack. What I have understood is that it bundles various assets like JavaScript, CSS, etc., into bundles.

But regarding JavaScript, can't we achieve the same functionality natively with ES6 modules? For example, ideally we can have only one script of type module in our landing page .html file and that script module will import the require dependecies in the ES6 way.

I think ES6 modules are supported in almost all modern browsers. Isn't Webpack redundant in this scenario?

https://skillsmatter.com/courses/606-webpack-academy-from-beginner-to-master

my friend can get you a discount just DM me!

I mean an advanced one. I mean so far I spent like weeks on end as a beginner studying webpack. I think there should be a better way.

Hello!

I am struggling to convigure webpack 2 with hot module replacement. I am loading css styles using sass-loader->css-loader->style-loader and I am importing .sass file from index file directly.

Style is loaded OK, for example if I specify red background color on body element, it will be red. But when I launch webpack-dev-server and change scss file, it wont update styles until I reload page.

Console gets that something is changed, outputting:

[WDS] App updated. Recompiling...

[WDS] App hot update...

But style is not changed without reloading.

I am 100% sure that I managed to make this in my older project that was using webpack 1 and it updated styles in browser on the fly without reloading.

Here is my webpack config: http://pastebin.com/7FvRGqBA

Webpack version: webpack 2.1.0-beta.26

Webpack-dev-server version: webpack-dev-server 2.1.0-beta.10

I am launching dev server with commandline: webpack-dev-server --inline --hot

I am stuck and I dont know how to pass this problem.

You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders | import {render} from "react-dom"; | > render(<App/>, document.getElementById("root")); |

I am making sure I am using the right loaders and mentioned the jsx? in my test clause for the webpack modules. But things seem to remain same. Any help please ?

I'm trying to get react-carroussel working and as they mention in the documentation. You need to import the css files by using:

@import "~slick-carousel/slick/slick.css"; @import "~slick-carousel/slick/slick-theme.css";

Digging around in the issues revealed that my webpack needs to be resolved to handle the ~ statement but I can't figure it out being new to webpack and all. Can anyone give me a hand with this?

I am using Webpack plugin replace-bundle-webpack-plugin to replace strings in the generated bundle. Once use it, the source-maps will be generated incorrectly. How to replace string but not destroy source-maps?