I was wondering and trying to find out how webpack internally finds out which are the import statements a entry file has?
For example my index.js looks like
import React, { PropTypes, Component } from 'react';
import { findDOMNode } from 'react-dom';
import classnames from 'classnames';
import Loading from 'components/Loading';
import Button from 'components/Button';
import Header from 'components/Header';
import Footer from 'components/Footer';
class App extends Component {
render() {
return (
<div className="shopping-list">
<Header />
<h1>Shopping List for {this.props.name}</h1>
<ul>
<li>Instagram</li>
<li>WhatsApp</li>
<li>Oculus</li>
</ul>
<Footer />
</div>
);
}
};
export default App;
Now I am trying to understand how webpack is finding out what are the other imports that file has? And then one of the imported files has other imported files?
Basically, Webpack is build tool and it is design to convert your app into optimized solution like compressing the js/scss/css and many more files.
Webpack can be configurable according to your choice and there are many loaders and plugins developed, you can use them to add support for that type of file.
It's like telling a system to take list of source files (input) and compiling them by using related webpack plugin or loader and giving optimized solution as output.
by webpack configuration, you tell it that load this type of file and generate output here and it normally convert your advanced source code to native source code so, it can work on any system.
for example,
we know that scss file is not supported by browsers, we need to convert it into css and then we can import it, but using scss loader plugin and by configuring it with webpack you can directly use scss file no need to manually convert scss to css and directly can import scss file into component and webpack will read the file, see the type and convert it for us.
configuring the webpack is the difficult part but there are pretty good pre-configured solution available to use like create-react-app where you don't need to worry about the configurations
for more info see the webpack documentation
Related
I have monorepo with a UI library inside packages which contains a lot of components. Every component also has a *.stories.tsx file. Under the apps folder is the storybook project, which loads the stories from #my-ui-library.
I have a decorator in the storybook config, so my ThemeContextProvider is wrapped around everything (ThemeContextProvider is also imported from #my-ui-library).
Does not work:
button.tsx
import { ThemeContext } from '../../ThemeContext'
Does work:
button.tsx
import { ThemeContext } from '#my-ui-library'
Using the relative import I get the error that theme, which is stored in ThemeContext, is undefined.
Now, that itself wouldn't be a problem if VS Code wouldn't auto import from the relative path and I didn't have to change it manually everywhere.
Background:
I am building a reusable carousel component using react-multi-carousel library which requires a direct css import into my React component so the carousel component can render specific styles, ie import 'react-multi-carousel/lib/styles.css';. I am currently using tsc to bundle/compile my ts code, but when looking at the bundle, the css import/styles doesn't get resolved. Below is the compiled code (just the imports) in which you can see the css import is imported like so:
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { useRef } from 'react';
import ScrollingCarousel from 'react-multi-carousel';
import 'react-multi-carousel/lib/styles.css';
import styled from 'styled-components';
The issue I have is this forces the consuming app of this reusable component to have to use specific compiler to know how to handle css imports into a jsx file (such as css-loader and style-loader for webpack). Is there a way that I can compile this CSS file down to styles within the js file rather than an import so I can avoid css compiling in the consuming app?
Thanks in advance
I create my react npm package using webpack but when i install my npm package to my react project, package styles are not apply on classes. Why this happens
Here is the link of npm package. You can install 0.0.5 version. In my webpack i used style-loader but it shows me document is not defined errors but if enable following line
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
Document not defined error resolved but styles not apply on classes in react project
Here is webpack file image
Here is package.json file image
Here is Test.jsx file image
Here is the main.css build file image which webpacks generates
Here is the test.js build file image which webpacks generates
Here is test.scss file image
Your webpack is working fine. You just need to import your styles manually from your build. This usually has to be done for all packages which define styles.
For ReactStrap you have to add this for styles
import 'bootstrap/dist/css/bootstrap.min.css';
For AntDesign you need this
import 'antd/dist/antd.css';
Same way you need to take import your styles from your build. i.e
import "#afiniti/test/build/main.css";
And your styles would start working.
Example code
import Test from "#afiniti/test";
import "#afiniti/test/build/main.css";
export default function App() {
return (
<Test />
}
Here is a link to a simplified working codesandbox. Good Luck!
Right now I pull in all my own es6 modules and create a bundle using Rollup.
Recently I started using VueJS, which now has an ES6 Module which can be pulled in just like my own modules. Rollup does some treeshaking on it, but I don't know if that is a very good idea? I don't know what it is doing, so I would rather it does nothing!
Instead I just add vue at the end of my HTML:
<script src="dist/bundle.js"></script>
I love the convenience of having everything as one bundled file, but should I really treeshake the entire Vue app, is there a command in Rollup that I can not treeshake just this one module?
EDIT
I have found the --external option, which seems good as it would just keep the import for vue and bundle the rest, but it does not seem to work!
When I use rollup --format=iife --external=../node_modules/vue/dist/vue.esm.browser.js --file=dist/bundle.js -- src/main.js it says Error: Could not resolve '../node_modules/vue/dist/vue.esm.browser.js' from src/app.js.
In my main.js it has import Vue from '../node_modules/vue/dist/vue.esm.browser.js; which works fine for the app. I want to make Vue an external, but it won't work!
To prevent Rollup from treeshaking a particular module, you can simply import it blindly (instead of a part of it), so that Rollup thinks the module performs some side effect:
import 'vue'
Of course you can still import some bits in parallel, so that you can rename the default export for example:
import 'vue'
import Vue from 'vue'
As for your --external option, you probably just need to wrap the path value with quotes:
--external='../node_modules/vue/dist/vue.esm.browser.js'
Note that you should probably switch to Rollup configuration file (instead of CLI options) to make your life easier. You will also be able to use rollup plugins, e.g. rollup-plugin-alias to manage the exact location of the Vue file you want to use.
I've around 20 jsx files with the few repeated imports like :
import React from 'react';
import { Form } from 'formsy-react';
import AppActions from '../../utils/actions/app-actions';
import store, {formStore} from '../../utils/stores/stores';
import AppConstants from '../../utils/constants/app-constants';
which cause my bundle.js weight more than 1.7 Mb even after minification.
Is there any possiblity to import these modules from any where else so that I don't need to import these again and again.
I think there is a misunderstanding here between Webpack, ES6 and a module.
Webpack is going to analyse your javascript code and detect the dependencies, based on that it will include the modules you need in your bundle, there is no duplicate there, every module is added only once in the proper order to resolve the dependencies while avoiding duplicates of code.
ES6 import export syntax convention requires to define the imports you need in every file that requires them, so browsers or tools like Webpack can properly detect dependencies and only use files they need.
1.7 Mb can be considered as a big file for a web page, but with a proper caching/minification it can be loaded instantly