Regular Expression to Exclude folder and files in Webpack Dynamic Import

Question

Recently i came across web pack dynamic import here, and manage to import via Template literals using webpackChunkName, following an answer from this link.

Due to the js file that i'm importing is an app project itself, it contains the node_modules packages and some other source code files, thus webpack is packaging everything during build.

How should i only include the build folder only in my import using webpackInclude and regular expression?

Here is my import code

let entry = 'main.js'
let appName = 'app1'

import(
  /* webpackInclude : ./apps/*/dist */
  `./apps/${appName}/dist/${entry}`
)

Here is my folder structure in brief

|-- apps
  |-- app1
    |-- dist
      |-- main.js
    |-- node_modules
    |-- src
    |-- package.json
    |-- webpack.config.js
|-- app.js
|-- package.json
|-- webpack.config.js

The import code is at app.js, would need help to correct ./apps/*/dist to a correct regular expression

score 0 · Answer 1 · answered Jan 28 '20 at 14:12

Add slashes at the beginning and end of regex, and necessary character escapes. Your regex needs to care only about the variable portions (ie: starting from ${appName}, do not worry about ./apps/)

an example to match js files would be:

import(
  /* webpackInclude: /[^\/]+\/dist\/.+\.js/ */
  `./apps/${appName}/dist/${entry}`
)

explanation of regex here: https://regex101.com/r/F6XlIQ/1 (hover of parts of it)

learn more here: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Regular_Expressions

Regular Expression to Exclude folder and files in Webpack Dynamic Import

1 Answers1