score:1
first of all: use that method if you doesn`t want create one more chunk. for example: for use different preview
files in you package in different projects and want have fallback without include to main package`s chunk.
for other cases create additional chunk is better way.
checking file for exist - not best idea. config file such better because:
- manipulate structure without remove files;
- easy detect changes;
for include to bundle only useful files i write theme-customize-loader. it`s webpack loader.
- add package
$ npm install theme-customize-loader --save-dev
add config file in your app
const data = { mymodule: { single : 'app/components/single/single.jsx', preview: 'my-theme/preview', }, othermodule: { preview: false, }, }; module.exports = data;
value can be path to file or false for fallback file.
add to webpack configuration to rules section
{ enforce: 'pre', test : /\.jsx$/, exclude: /node_modules/, use : [{ loader: 'theme-customize-loader', options: { config: customizeconfig } }], },
don`t forget import config file:
const customizeconfig = require('./app/configs/customize');
use in file. important: in one string
let loadcomponent; /* customize path: "mymodule.preview" var: "loadcomponent" name: "my-chunk-name" origin: "../components/originpreview.jsx" */
more info you can find here: https://www.npmjs.com/package/theme-customize-loader
score:0
a potential solution to your problem is to take advantage of the way that module resolution works.... no custom loader required!
if you leave off the extension and there is a file with the matching name then the file will be used, if the file is missing then it will check for a folder with the matching name and look for an index.js
file in the folder. i have only tested this for typescript projects, and using import
but it should work the same.
(see: https://webpack.js.org/concepts/module-resolution/#module-paths)
you could have something like this:
some-file.js:
const mymodule = require('./foo/myfile');
// ...
foo/myfile/index.ts: (note the ..
below is necessary)
module.exports = require('../bar/myfile.jsx')
now, if foo/myfile.jsx
doesn't exist then it would use the foo/myfile/index.js
file which re-exports from the bar/myfile.jsx
.
but, if foo/myfile.jsx
exists then it would use that file. problem solved!
score:1
this should help you. it just uses fs
package of node.
var fs = require('fs');
if (fs.existssync(path)) {
// do something
}
score:3
you can use require.context and a regular expression to match files in the current folder, see the code below.
const requirecustomfile = require.context(
'./', false, /custom.js$/
)
requirecustomfile.keys().foreach(filename => {
requirecustomfile(filename);
})
Source: stackoverflow.com
Related Query
- Webpack check file exist and import in condition
- How can I import a file using React.js, ES6 and Webpack based on the value of a prop?
- Webpack use both css module and import entire css file
- Import JavaScript file and call functions using webpack, ES6, ReactJS
- How to import CSS modules with Typescript, React and Webpack
- Webpack import bootstrap .js and .css
- import CSS and JS files using Webpack
- React: import csv file and parse
- how to import HTML file into React component and use it as a component?
- Import and read the contents of a CSS file as text (React/webpack)
- styled-components - putting styling in a separate file and import it in to component
- Import fonts to react project with webpack and styled components
- Electron and Webpack ENOENT: no such file or directory, open '/path.txt'
- How can I debug webpack bundle file error and find exact error in bundle that consists thousand no. of lines in reactJs
- react js how to import only the required function from a file and not the all functions
- Import all json files placed inside folder instead of import every file and export in Create React App?
- How to import csv file in reactjs and show the data on the screen?
- How to import CSS file on Isomorphic React - Webpack
- Rollup image import with only file copy and preserve import
- Using Grommet with ReactJS webpack and scss import Issue
- How can I build a React app with Webpack and import an assets folder?
- How to load a typings file as text with Webpack and React?
- How to import and render svg file based on given name from variable in React?
- Webpack and sass-loader files import order
- React check if css has loaded with Webpack and React
- Import a javascript file globally using webpack ProvidePlugin
- How to move react event handlers to separate file ,export and then import for reuse in multiple different functional components?
- import image , css and sass file in next js
- React with NodeJS and Webpack - bundled js big file size
- To check if an image file exists and load another default file if not
More Query from same tag
- "Maximum call stack size exceeded" after upgrading to alpha version of antd
- How do I convert TSX to JSX
- TypeError: Cannot read property 'getState' of undefined
- Using MemoryRouter inside of BrowserRouter
- Blank screen after deploying react app on Vercel
- How to use backgroundImage css in styled component having typescript
- Passing callback/promise to action creator from component
- trigger react-ace onChange via React Testing Library (RTL)
- Sort mapped list with Lodash on ReactJS
- How to pass variable when dispatching fetch function in react component?
- Passing variable to react component
- TypeError: Cannot read property 'length' of undefined array shuffle in react
- how do i adjust this slice and replace React
- How to pass a default params or state to the react router? any alternative approach?
- Download file from Express API using React and Axios
- How do I get SwitchTranition to work with CSSTransition with TypeScript
- dispatching actions on every render
- bad request on submission
- Property 'props' does not exist on type '{}' (trying to get access to props of children) - React Typescript
- Formik ErrorMessage not appearing on browser
- How to load self hosted mp3 files on click in React Player
- Using hooks with object or single value?
- fetch should not be in the action || reducer?
- How to update Event.target after props.function in child component is dispatched to redux-thunk onClick
- Material UI Checkbox not toggling on and off
- Align vertically checkboxes with the input fields and labels
- React Router - Path with :id is not working correctly for component wrapped by HOC
- React: Getting the value of text inside a contentEditable div
- How to change icon size on Alert in Material UI for React
- What Typescript type to set for setState passed to the component