how to config a module bundler divide by folder with webpack? - javascript

I get the file structure like this
before build
I want to make it like this below with webpack
after build
BTW, I also want to use ES6 import and export for the module loader,
such as in nav.js
class Nav extends Component {
// react code here
}
export defalt Nav
and in header.js
import Nav from `nav/bundle`
// header react code
// .......
export defalt Header
also need the bundle the redux and react-route npm package within the node_module
is it possible for webpack to do this stuff? some suggestions?

Here's a rough idea you could try to adapt:
{
// generate these dynamically through JavaScript
entry: {
footer: <path to footer js>,
...
},
output: {
path: './demo',
filename: '[name]/bundle.js' // name maps to entry keys
},
...
}

Related

SVG Images not showing if Vue app is converted to Electron app

I built an Vue 3 app (+ Vite) which I want to also convert to an Electron app. Every time I start the Electron app via electron . it looks like the SVG isn't getting packaged: (Navigation Drawer with missing icons)
Upon further investigation this is the case, but in my dist folder all images are available. (SVGs are in the dist folder) But the Devtools show that they don't get into the Electron app. (Electron app asset folder)
I also implemented the workaround for changing the base path in the Vite config like this (The Electron ENV gets set before I run electron . via a npm script):
import { fileURLToPath, URL } from "url";
import { defineConfig } from "vite";
import vue from "#vitejs/plugin-vue";
import path from "path";
// https://vitejs.dev/config/
export default defineConfig({
base:
// eslint-disable-next-line no-undef
process.env.ELECTRON == "true" ? path.resolve(__dirname, "./dist/") : "./",
plugins: [vue()],
resolve: {
alias: {
"#": fileURLToPath(new URL("./src", import.meta.url)),
},
},
assetsInclude: ["**/*.svg"],
});
Does anyone have an idea what the problem might be? Thanks in advance!
UPDATE
I got it working after all by following this example: https://github.com/pengYYYYY/vite-electron. Also a base tag was missing in my index.html.
Like that: <base href="./" />

Use index file to export .tsx modules

It's a common thing to create a index.js file in an React application with the only purpose to export several modules, in order to avoid having too many import statements on other components. This can be done by:
index.js
export { Credits } from './Credits.js';
export { SocialMedia } from './SocialMedia.js';
any module that might use those exports:
import * as var_name from index.js
And this is very nice. It wraps exports into a single file. However, when I changed my project to React with typescript, I found that .tsx files cannot be exported like that. The image below is the error I got after changing the project to typescript and the extensions became .tsx
Is there a way of 'bundle' export React .tsx files with the structure shown above? If not, what is the simplest way of centralizing .tsx files export?
My webpack.config.js:
module.exports = {
module: {
rules: [{
test: /\.scss$/,
use: ["sass-loader"]
}]
}
};
You can definitely use the same style of having an index file to group up exports for a whole folder. The simplest way around your problem would be to omit the file extension (assuming you only have one "index" file in the folder).
For example, let's say you have a component in 'common/Example.tsx':
import React from 'react'
export const Example = () => (<div>I'm an example component</div>)
You can then export it in an index file 'common/index.tsx':
export { Example } from './Example'
And import it from somewhere else, e.g. 'App.tsx':
import { Example } from './common'

How to to change the default file from index to a custom in React Components?

Structure of the project generally looks like this:
components
- my-component
- - my-component.ts
- - index.ts
Where index.(ts/js) always consists of
import MyComponent from './my-component';
export default MyComponent;
I want to remove index.(js/ts) and still import/require my components using the path
import MyComponent from './components/my-component' // not having the index file!
// Please, do not suggest importing them like this
import MyComponent from './components/my-component/my-component'
I use Webpack 5. I know there was a module for Webpack 4, but it does not work with 5.
I want NodeJS/Webpack to look for a custom filename rather than index.
Some other solutions:
You could move components/my-component/my-component.ts to components/my-component.ts. I assume you have a reason not to do this (presumably, other files in that component directory).
You could use resolve.alias and list all mappings you want:
module.exports = {
//...
resolve: {
alias: {
"./components/my-component": path.resolve(__dirname, 'components/my-component/my-component.js'),
//...
},
},
};
You could set resolve.mainFiles to list all of your .js filenames. This seems pretty ugly though, as it's a global setting.
Are you sure that Webpack 5 doesn't support DirectoryNamedWebpackPlugin? It's explicitly mentioned in the documentation.

import single Vuetify component in Nuxt.js?

I use Vuetify in nuxt.js.
How to use this only in dashboard layout?
in nuxt.config.js
modules: [
//['nuxt-leaflet', { /* module options */}],
'bootstrap-vue/nuxt',
'#nuxtjs/axios',
'#nuxtjs/pwa',
'#nuxtjs/auth',
'#nuxtjs/toast',
['#nuxtjs/vuetify', {rtl: true}],
// 'nuxt-i18n',
],
Are you using vuetify-loader with tree-shaking? If so, you can just import specific vuetify component into specific .vue component:
import { VTextField } from 'vuetify/lib';
and add:
components: { VTextField }
According to the #nuxtjs/vuetify module documentation, if you using the treeShake option, by default your Nuxt.js app will use only the needed vuetify component, and the bundle size didn't increase.
Uses vuetify-loader to enable automatic tree-shaking. Enabled only for production by default.
Another thing, If you are using Nuxt >= 2.9.0, use buildModules section instead:
{
buildModules: [
// Simple usage
'#nuxtjs/vuetify',
// With options
['#nuxtjs/vuetify', { /* module options */ }]
]
}
If you are using NuxtJS Vuetify Module (It seems that you are), I assume that your package.json does not have vuetify listed there, because it is the #nuxtjs/vuetify that imports it. Thus, you can't import it using only the module name. I suggest you to import it with it's complete path like the following:
import { VCard } from '~/node_modules/vuetify/lib';
Then register the component, of course.

How to ignore raw loader for testing webpack

I have some components with svg's loaded inline using webpack raw loader e.g...
import React, { Component } from 'react'
import svg from '!raw!../assets/images/logo.svg'
export default class Logo extends Component {
render() {
return (<a href={this.props.url} dangerouslySetInnerHTML={{__html: svg}} />)
}
}
When trying to test these components server side using tape, they fall over. If I have css modules included, it is no problem, I can use css-modules-require-hook but svg's will not work. So I really need a raw loader require hook or something like that.
require('babel-register');
require('css-modules-require-hook/preset');
/* tests after this can import components with css includes */
I tried using isomorphic-ensure but this did not work.
require('babel-register');
require('css-modules-require-hook/preset');
require('isomorphic-ensure')({
loaders: {
raw: require('raw-loader'),
raw: require('react-svgdom-loader')
},
dirname: __dirname
})
I get the following error:
Cannot find module '!raw!../assets/images/
If you're not using webpack for your tests then you could use the ignore-styles module.
You may have to configure it if you plan to use it with css-modules-require-hook as it will also also ignore CSS files by default. e.g:
require('ignore-styles').register(['.svg'])

Categories