Merge pull request #232 from pro-vision/feature/webpack-update

feat(pv-scripts): webpack config update
pro-vision · Apr 26, 2024 · 0c4304f · 0c4304f
2 parents a35c060 + 92da961
commit 0c4304f
Show file tree

Hide file tree

Showing 41 changed files with 5,650 additions and 4,690 deletions.
diff --git a/examples/react-tsx/.eslintrc.json b/examples/react-tsx/.eslintrc.json
@@ -14,11 +14,11 @@
     "global-require": 0,
     "no-console": "off",
     // note you must disable the base rule as it can report incorrect errors
-    "no-use-before-define": "off",
+    "no-use-before-define": "off"
   },
   "settings":  {
     "react":  {
-      "version":  "detect"
+      "version": "detect"
     }
   }
 }
diff --git a/examples/react-tsx/pv.config.js b/examples/react-tsx/pv.config.js
@@ -1,7 +1,6 @@
 module.exports = {
   "namespace": "react-tsx-sample",
   "jsEntry": "src/js/index.tsx",
-  "jsLegacyEntry": "src/js/legacyIndex.tsx",
   "useReact": true,
   "copyStaticFiles": true,
   "cleanDest": true

diff --git a/examples/react-tsx/src/js/legacyIndex.tsx b/examples/react-tsx/src/js/legacyIndex.tsx
diff --git a/examples/react-tsx/static/index.html b/examples/react-tsx/static/index.html
@@ -7,7 +7,6 @@
 <body>
   <div id="main">Foo</div>
   <script type="module" src="/js/react-tsx-sample.app.js"></script>
-  <script nomodule src="/js/react-tsx-sample.app.legacy.js"></script>
 </body>
 
 </html>
diff --git a/packages/pv-scripts/README.md b/packages/pv-scripts/README.md
@@ -11,7 +11,7 @@ npm i @pro-vision/pv-scripts -D
 ## Usage
 
 ### Requirements
-To use the CLI, you need to create at least the two entry-files (`jsEntry`, `jsLegacyEntry`), see [Basic Configuration](#basic-configuration).
+To use the CLI, you need to create at least the entry-file (`jsEntry`), see [Basic Configuration](#basic-configuration).
 
 ### Command Line Interface
 
@@ -36,7 +36,7 @@ npx pv-scripts prod
 #### CLI flags
 
 ##### `--stats` or `--statsJson`
-Webpack build will use [webpack-bundle-analyzer](https://github.com/webpack-contrib/webpack-bundle-analyzer) to generate an html report or json output regarding the bundle sizes and its composition. Which will be stored under `target/report_module.html | target/report_legacy.html` and `target/report_module.json | target/report_legacy.json`.
+Webpack build will use [webpack-bundle-analyzer](https://github.com/webpack-contrib/webpack-bundle-analyzer) to generate an html report or json output regarding the bundle sizes and its composition. Which will be stored under `target/report.html` and `target/report.json`.
 
 This flag should only be used in combination with `prod` build to have a realistic information from the optimized bundles.
 
@@ -51,10 +51,8 @@ Basic Configuration can be done in a `pv.config.js` file in the npm project root
 | devServerPort             | number  | 8616                 | set `webpack-dev-server` port                                                                                   |
 | srcPath                   | string  | "src"                | defines the working directory                                                                                   |
 | destPath                  | string  | "target"             | defines where to put bundled files                                                                              |
-| namespace                 | string  | ""                   | this controls the name-prefix on your bundled files following this pattern `[namespace].app.[?legacy].(js|css)` |
+| namespace                 | string  | ""                   | this controls the name-prefix on your bundled files following this pattern `[namespace].app.(js|css)`           |
 | jsEntry                   | string  | "src/index.ts"       | defines path of your (JS\|TS\|JSX\|TSX) entry file                                                              |
-| jsLegacyEntry             | string  | "src/legacyIndex.ts" | defines path of your (JS\|TS\|JSX\|TSX) legacy entry file                                                       |
-| disableLegacyBuild        | boolean  | false               | disables legacy build                                                     |
 | cssEntry                  | string  | "src/index.scss"     | defines path of your SCSS entry file. If `src/index.scss` does not exist, no error is thrown but the css generation is simply skipped|
 | useTS                     | boolean | true                 | defines whether you want to use Typescript                                                                      |
 | useReact                  | boolean | false                | defines whether you want to use React                                                                           |
@@ -67,15 +65,16 @@ Basic Configuration can be done in a `pv.config.js` file in the npm project root
 | resourcesSrc    | string  | "resources"           | defines resources folder which is copied to target/resources                                                   |
 | autoConsoleClear | boolean  | false              | defines whether the console should be cleared automatically in dev-mode                                        |
 | enableContentHash | boolean  | false              | defines whether generated js and css files should contain a content hash in their names                                         |
-##### Example:
+| babelDecorator  | string  | "legacy"             | @babel/plugin-proposal-decorators' `version` property                                                           |
+
+##### Example
 
 ```js
 // pv.config.js
 module.exports = {
   devServerPort: 8616,
   destPath: "target",
   jsEntry: "src/index.js",
-  jsLegacyEntry: "src/legacyIndex.js",
   cssEntry: "src/index.scss",
   useTS: false,
   useReact: false,
@@ -90,37 +89,39 @@ For further customization of the webpack-config, specific config-files can be ad
 **webpack.config.js:**
 Valid webpack.config file which will be merged with both (dev/prod) default configs.
 
-**webpack.config.module.js:**
-Valid webpack.config file which will be merged with the module build of both (dev/prod) default configs.
-
-**webpack.config.legacy.js:**
-Valid webpack.config file which will be merged with the legacy build of both (dev/prod) default configs.
-
 **webpack.config.dev.js:**
 Valid webpack.config file which will be merged with the dev default config.
 
-**webpack.config.dev.module.js:**
-Valid webpack.config file which will be merged with the module build of the dev default config.
-
-**webpack.config.dev.legacy.js:**
-Valid webpack.config file which will be merged with the legacy build of the dev default config.
-
 **webpack.config.prod.js:**
 Valid webpack.config file which will be merged with the prod default config.
 
-**webpack.config.prod.module.js:**
-Valid webpack.config file which will be merged with the module build of the prod default config.
+**.babelrc.json**
+Will add additional babel plugins to the existing [webpack config](https://github.com/pro-vision/fe-tools/tree/master/packages/pv-scripts/webpack/base/tasks/compileJS.js)
+
+#### SVG loading
 
-**webpack.config.prod.legacy.js:**
-Valid webpack.config file which will be merged with the legacy build of the prod default config.
+svg files will be automatically loaded when imported/referenced by js/ts/scss files.
+
+Default behavior would be to extract the svg content when requested from js (this would allow to use the svg content easily to render markup), for css the svg will be emitted as a .svg file to the target folder and its url used in the output css. These can be overwritten by webpacks resource queries:
+
+| query | behavior | example |
+|-------|----------|---------|
+| `resource` or `external`  |  resource will be emitted to target folder and its url added to the import  |  `import svgUrl from("./icon.svg?resource"); fetch(svgUrl);` |
+|  `inline` |  svg content will be base64 encoded an used inline  |  `background-image: url("./img.svg?inline"); // => background-image: url(data:image/svg+xml;base64,PHN...` |
+| `auto`  | webpack will automatically choose between `resource` and `inline` based on the file size see [webpack's documentation](https://webpack.js.org/guides/asset-modules/).  |   |
+| `source` or `raw`  |  the svg files content will be used  | `import svgContent from("./icon.svg?raw");  el.innerHTML = svgContent;`  |
+| `/*! webpackIgnore: true */`  |  will ignore the file/url   |  `/* webpackIgnore: true */ background-image: url("http//some-url.svg");` |
+
+#### SASS compilation
+
+Per default the new (dart-)`sass` package will be installed and used. You can also install the `sass-embedded` package as an npm dependency which will then be automatically used and is twice as fast as the default sass. If you need to use the legacy [sass syntax](https://sass-lang.com/documentation/breaking-changes/) (e.g. `/` instead of `math.div`) then you need to install `node-sass` as an npm dependency, and it will automatically be used when sass code is compiled.
 
 #### Browserslist
 
-A default browser query is used for compiling javascript and css. i.e. IE11 for the "legacy" bundle and latest 2 versions of evergreen browsers (chrome, firefox, safari, edge) for the "modern" bundle. And all combined for the css output. You can define your own [browserslist](https://github.com/browserslist/browserslist) to override any of these target groups. Don't forget to define default browsers, browser for `[modern]` or `[legacy]` environment. See default [.browserslistrc](https://github.com/pro-vision/fe-tools/tree/master/packages/pv-scripts/config/.browserslistrc) file for an example.
+A default browser query is used for compiling javascript and css. i.e. latest 2 versions of evergreen browsers (chrome, firefox, safari, edge). You can define your own [browserslist](https://github.com/browserslist/browserslist). See default [.browserslistrc](https://github.com/pro-vision/fe-tools/tree/master/packages/pv-scripts/config/.browserslistrc) file for an example.
 
 ## Examples
 
 You can find example projects in the `examples` folder:
 
 * React with TypeScript: [react-tsx](https://github.com/pro-vision/fe-tools/tree/master/examples/react-tsx)
-
diff --git a/packages/pv-scripts/config/.browserslistrc b/packages/pv-scripts/config/.browserslistrc
@@ -1,24 +1,9 @@
 # pv-scripts default target browsers,
-# will be overridden with project browserslist
+# can be overridden with project's browserslist
 
-# default, (modern+legacy) used for PostCSS
 last 2 firefox versions
 last 2 chrome versions
 last 2 and_chr versions
 last 2 safari versions
 last 2 ios_saf versions
 last 2 edge versions
-IE >= 11
-
-# will be used for modern bundle
-[modern]
-last 2 firefox versions
-last 2 chrome versions
-last 2 and_chr versions
-last 2 safari versions
-last 2 ios_saf versions
-last 2 edge versions
-
-# will be used for legacy bundle
-[legacy]
-IE >= 11
diff --git a/packages/pv-scripts/config/default.config.js b/packages/pv-scripts/config/default.config.js
@@ -4,8 +4,6 @@ module.exports = {
   destPath: "target",
   namespace: "",
   jsEntry: "src/index.ts",
-  jsLegacyEntry: "src/legacyIndex.ts",
-  disableLegacyBuild: false,
   cssEntry: "src/index.scss",
   useTS: true,
   useReact: false,
@@ -17,4 +15,5 @@ module.exports = {
   autoConsoleClear: false,
   handlebarsLoaderOptions: {},
   enableContentHash: false,
+  babelDecorator: "legacy", // babel-plugin-proposal-decorators' `version` property
 };
diff --git a/packages/pv-scripts/helpers/buildConfigHelpers.js b/packages/pv-scripts/helpers/buildConfigHelpers.js
@@ -90,10 +90,6 @@ const getHandlebarsLoaderOptions = () => {
   return handlebarsLoaderOptions;
 };
 
-const legacyBuildDisabled = () => {
-  return getBuildConfig().disableLegacyBuild;
-};
-
 module.exports = {
   getBuildConfig,
   getJSExtName,
@@ -103,6 +99,5 @@ module.exports = {
   shouldAddCssEntry,
   shouldUseHtmlCompiler,
   getHandlebarsLoaderOptions,
-  legacyBuildDisabled,
   shouldAddContentHash,
 };
diff --git a/packages/pv-scripts/helpers/paths.js b/packages/pv-scripts/helpers/paths.js
@@ -32,24 +32,6 @@ const jsEntry = () => {
   return resolveApp(config.jsEntry.replace(extname, getJSExtName(config)));
 };
 
-const jsLegacyEntry = () => {
-  if (config.jsLegacyEntry !== defaultConfig.jsLegacyEntry) {
-    return resolveApp(config.jsLegacyEntry);
-  }
-
-  const extname = path.extname(config.jsLegacyEntry);
-
-  const jsLegacyEntryPath = resolveApp(
-    config.jsLegacyEntry.replace(extname, getJSExtName(config))
-  );
-
-  const jsLegacyEntryExists = existsSync(jsLegacyEntryPath);
-
-  if (jsLegacyEntryExists) return jsLegacyEntryPath;
-
-  return jsEntry();
-};
-
 const cssEntry = resolveApp(config.cssEntry);
 const appTarget = resolveApp(config.destPath);
 
@@ -75,7 +57,6 @@ module.exports = {
   appPath,
   appSrc,
   jsEntry,
-  jsLegacyEntry,
   cssEntry,
   appTarget,
   join,

diff --git a/packages/pv-scripts/helpers/prepareWebpackConfig.js b/packages/pv-scripts/helpers/prepareWebpackConfig.js
@@ -1,53 +1,24 @@
 const { merge } = require("webpack-merge");
 
 const { getCustomWebpackConfig } = require("../helpers/webpackConfigHelpers");
-const { legacyBuildDisabled } = require("../helpers/buildConfigHelpers");
 const { getConfig } = require("../webpack/getConfig");
 
 async function prepareWebpackConfig(mode) {
   const customModeConfigName =
     mode === "development" ? "webpack.config.dev" : "webpack.config.prod";
   const customWebpackConfig = await getCustomWebpackConfig("webpack.config.js");
-  const customWebpackModuleConfig = await getCustomWebpackConfig(
-    "webpack.config.module.js"
-  );
-  const customWebpackLegacyConfig = await getCustomWebpackConfig(
-    "webpack.config.legacy.js"
-  );
   const customWebpackModeConfig = await getCustomWebpackConfig(
     `${customModeConfigName}.js`
   );
-  const customWebpackModeModuleConfig = await getCustomWebpackConfig(
-    `${customModeConfigName}.module.js`
-  );
-  const customWebpackModeLegacyConfig = await getCustomWebpackConfig(
-    `${customModeConfigName}.legacy.js`
-  );
 
   const customModuleConfig = merge(
     customWebpackConfig,
-    customWebpackModuleConfig,
-    customWebpackModeConfig,
-    customWebpackModeModuleConfig
+    customWebpackModeConfig
   );
 
-  const customLegacyConfig = merge(
-    customWebpackConfig,
-    customWebpackLegacyConfig,
-    customWebpackModeConfig,
-    customWebpackModeLegacyConfig
-  );
-
-  const [defaultModuleConfig, defaultLegacyConfig] = getConfig(mode);
-
-  if (legacyBuildDisabled()) {
-    return merge(defaultModuleConfig, customModuleConfig);
-  }
+  const defaultModuleConfig = getConfig(mode);
 
-  return [
-    merge(defaultModuleConfig, customModuleConfig),
-    merge(defaultLegacyConfig, customLegacyConfig),
-  ];
+  return merge(defaultModuleConfig, customModuleConfig);
 }
 
 module.exports = {

diff --git a/packages/pv-scripts/helpers/webpackConfigHelpers.js b/packages/pv-scripts/helpers/webpackConfigHelpers.js
@@ -25,6 +25,20 @@ const getCustomWebpackConfig = (configName) => {
   });
 };
 
+function getBuildDependencies() {
+  return [
+    "./pv.config.js",
+    "./webpack.config.js",
+    "./webpack.config.dev.js",
+    "./.browserslistrc",
+    "./.babelrc.json",
+    "./postcss.config.js",
+  ]
+    .map((configFile) => resolveApp(configFile))
+    .filter((filePath) => existsSync(filePath));
+}
+
 module.exports = {
   getCustomWebpackConfig,
+  getBuildDependencies,
 };