diff --git a/packages/charts-components/templates/webpack/README.md b/packages/charts-components/templates/webpack/README.md index 0381b3e..941d204 100644 --- a/packages/charts-components/templates/webpack/README.md +++ b/packages/charts-components/templates/webpack/README.md @@ -1,4 +1,4 @@ -# Charts components ESM Webpack template +# Charts components Webpack template 📁 **[Click here to download this directory as a ZIP file](https://download-directory.github.io?url=https://github.com/Esri/arcgis-maps-sdk-javascript-samples-beta/tree/main/packages/charts-components/templates/webpack)** 📁 @@ -50,21 +50,18 @@ npm run build yarn build ``` -## Bundling details - #### JS -We imported the components we need for the coding components by following [Stencil's pattern for integrating components without a JavaScript framework](https://stenciljs.com/docs/javascript). +Imported the components using [Stencil's pattern for integrating components without a JavaScript framework](https://stenciljs.com/docs/javascript). ```js import { defineCustomElements as defineChartsElements } from "@arcgis/charts-components/dist/loader"; -defineChartsElements(window, { - resourcesUrl: "../arcgis-charts/" -}); +// define custom elements in the browser, and load the assets from the CDN +defineChartsElements(window, { resourcesUrl: "https://js.arcgis.com/charts-components/4.29/t9n" }); ``` -We use [`src/index.js`](./src/index.js) to load our data, define our custom elements, and utilize various kinds of properties in the editor. It is a must to define both the Charts elements. +Use [`src/index.js`](./src/index.js) to load the data, define custom elements, and utilize various kinds of properties in the editor. Both the Calcite and Charts elements must be defined. #### CSS @@ -72,7 +69,7 @@ You can find all the necessary styling in [`src/index.css`](./src/index.css). #### HTML -The generation of our `index.html` was simplified by using the HtmlWebpackPlugin in the webpack configuration file. +Parsing the `index.html` was simplified by using the HtmlWebpackPlugin in the webpack configuration file. ```js // webpack.config.js @@ -80,47 +77,15 @@ const HtmlWebPackPlugin = require("html-webpack-plugin"); module.exports = { plugins: [ - new HtmlWebPackPlugin({ - title: "Charts components", + new HtmlWebPackPlugin({ + title: "Charts components Webpack template", + template: "./public/index.html", + filename: "./index.html", chunksSortMode: "none", - meta: { - viewport: - "width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=5.0, user-scalable=no", - }, - templateContent: ` - - - - - - -
-
- -
-
- -
-
- -
-
- -
-
- -
-
- -
-
- -
-
- - `, + inlineSource: ".(css)$" }), - ], + ... + ] }; ``` @@ -136,4 +101,6 @@ For the webpack configuration file ([`webpack.config.js`](webpack.config.js)) [html-webpack-plugin](https://webpack.js.org/plugins/html-webpack-plugin/) -[copy-webpack-plugin](https://webpack.js.org/plugins/copy-webpack-plugin/) +[mini-css-extract-plugin](https://webpack.js.org/plugins/mini-css-extract-plugin/) + +[terser-webpack-plugin](https://webpack.js.org/plugins/terser-webpack-plugin/) diff --git a/packages/charts-components/templates/webpack/package.json b/packages/charts-components/templates/webpack/package.json index 067bb7e..aa59c42 100644 --- a/packages/charts-components/templates/webpack/package.json +++ b/packages/charts-components/templates/webpack/package.json @@ -3,7 +3,7 @@ "private": true, "scripts": { "build": "webpack --mode production", - "start": "webpack-dev-server --mode development --open" + "start": "webpack serve --mode development" }, "dependencies": { "@arcgis/charts-components": "~4.29.6", @@ -13,9 +13,11 @@ }, "devDependencies": { "css-loader": "^6.10.0", - "html-loader": "^5.0.0", "html-webpack-plugin": "^5.6.0", + "mini-css-extract-plugin": "^2.7.6", + "source-map-loader": "5.0.0", "style-loader": "3.3.4", + "terser-webpack-plugin": "^5.3.9", "webpack": "^5.90.1", "webpack-cli": "^5.1.4", "webpack-dev-server": "^5.0.1" diff --git a/packages/charts-components/templates/webpack/public/index.html b/packages/charts-components/templates/webpack/public/index.html new file mode 100644 index 0000000..13d2dc3 --- /dev/null +++ b/packages/charts-components/templates/webpack/public/index.html @@ -0,0 +1,15 @@ + + + + + + + + Charts components webpack template + + + + + + + \ No newline at end of file diff --git a/packages/charts-components/templates/webpack/webpack.config.js b/packages/charts-components/templates/webpack/webpack.config.js index 6855c53..40c8bb6 100644 --- a/packages/charts-components/templates/webpack/webpack.config.js +++ b/packages/charts-components/templates/webpack/webpack.config.js @@ -12,54 +12,57 @@ * See the License for the specific language governing permissions and * limitations under the License. */ +const path = require("path"); const HtmlWebpackPlugin = require("html-webpack-plugin"); -const path = require("path"); +const MiniCssExtractPlugin = require("mini-css-extract-plugin"); +const TerserPlugin = require("terser-webpack-plugin"); module.exports = { - entry: ["./src/index.css", "./src/index.js"], - + entry: { + index: ["./src/index.css", "./src/index.js"] + }, + node: false, + optimization: { + minimizer: [new TerserPlugin({ extractComments: false })] + }, output: { - filename: "[id][name].js", - chunkFilename: "[id][name].js", path: path.resolve(__dirname, "dist"), + chunkFilename: "chunks/[id].js", + publicPath: "", clean: true }, - - devtool: "source-map", - devServer: { static: { directory: path.join(__dirname, "dist") }, compress: true, - port: 9000 + port: 8080 }, module: { rules: [ + { + test: /\.js$/, + enforce: "pre", + use: ["source-map-loader"] + }, { test: /\.css$/, - use: ["style-loader", "css-loader"] // Collect CSS and insert them into the page + use: [MiniCssExtractPlugin.loader, "css-loader"] } ] }, plugins: [ new HtmlWebpackPlugin({ title: "Charts components Webpack template", + template: "./public/index.html", + filename: "./index.html", chunksSortMode: "none", - meta: { - viewport: "width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=5.0, user-scalable=no" - }, - templateContent: ` - - - - - - - - - ` + inlineSource: ".(css)$" + }), + new MiniCssExtractPlugin({ + filename: "[name].[chunkhash].css", + chunkFilename: "[id].css" }) ] }; diff --git a/packages/coding-components/templates/webpack/package.json b/packages/coding-components/templates/webpack/package.json index ee0faf0..c3f6a16 100644 --- a/packages/coding-components/templates/webpack/package.json +++ b/packages/coding-components/templates/webpack/package.json @@ -3,7 +3,7 @@ "private": true, "scripts": { "build": "webpack --mode production", - "start": "webpack-dev-server --mode development --open" + "start": "webpack serve --mode development" }, "dependencies": { "@arcgis/coding-components": "~4.29.6", @@ -13,7 +13,10 @@ "devDependencies": { "css-loader": "^6.10.0", "html-webpack-plugin": "^5.6.0", + "mini-css-extract-plugin": "^2.7.6", + "source-map-loader": "5.0.0", "style-loader": "3.3.4", + "terser-webpack-plugin": "^5.3.9", "webpack": "^5.90.1", "webpack-cli": "^5.1.4", "webpack-dev-server": "^5.0.1" diff --git a/packages/coding-components/templates/webpack/public/index.html b/packages/coding-components/templates/webpack/public/index.html new file mode 100644 index 0000000..5efeafa --- /dev/null +++ b/packages/coding-components/templates/webpack/public/index.html @@ -0,0 +1,18 @@ + + + + + + + + Coding components webpack template + + + +
+ +
+ + + + \ No newline at end of file diff --git a/packages/coding-components/templates/webpack/readme.md b/packages/coding-components/templates/webpack/readme.md index d7ae55a..9db6993 100644 --- a/packages/coding-components/templates/webpack/readme.md +++ b/packages/coding-components/templates/webpack/readme.md @@ -1,4 +1,4 @@ -# Coding components ESM Webpack template +# Coding components Webpack template 📁 **[Click here to download this directory as a ZIP file](https://download-directory.github.io?url=https://github.com/Esri/arcgis-maps-sdk-javascript-samples-beta/tree/main/packages/coding-components/templates/webpack)** 📁 @@ -54,7 +54,7 @@ yarn build Imported the components using [Stencil's pattern for integrating components without a JavaScript framework](https://stenciljs.com/docs/javascript). -``` +```js import { defineCustomElements as defineCalciteElements } from "@esri/calcite-components/dist/loader"; import { defineCustomElements as defineCodingElements } from "@arcgis/coding-components/dist/loader"; @@ -76,37 +76,23 @@ You can find all the necessary styling in [`src/index.css`](./src/index.css). Im #### HTML -The generation of our `index.html` was simplified by using the HtmlWebpackPlugin in the webpack configuration file. +Parsing the `index.html` was simplified by using the HtmlWebpackPlugin in the webpack configuration file. -``` +```js // webpack.config.js const HtmlWebPackPlugin = require("html-webpack-plugin"); module.exports = { plugins: [ - new HtmlWebPackPlugin({ - title: "Coding components", - favicon: "./src/icons/favicon.png", + new HtmlWebPackPlugin({ + title: "Coding components Webpack template", + template: "./public/index.html", + filename: "./index.html", chunksSortMode: "none", - meta: { - viewport: - "width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=5.0, user-scalable=no", - }, - templateContent: ` - - - - - - -
- -
- - - `, + inlineSource: ".(css)$" }), - ], + ... + ] }; ``` @@ -124,4 +110,6 @@ For the webpack configuration file ([`webpack.config.js`](webpack.config.js)) [html-webpack-plugin](https://webpack.js.org/plugins/html-webpack-plugin/) -[copy-webpack-plugin](https://webpack.js.org/plugins/copy-webpack-plugin/) +[mini-css-extract-plugin](https://webpack.js.org/plugins/mini-css-extract-plugin/) + +[terser-webpack-plugin](https://webpack.js.org/plugins/terser-webpack-plugin/) diff --git a/packages/coding-components/templates/webpack/webpack.config.js b/packages/coding-components/templates/webpack/webpack.config.js index e52d2c0..46a7485 100644 --- a/packages/coding-components/templates/webpack/webpack.config.js +++ b/packages/coding-components/templates/webpack/webpack.config.js @@ -12,74 +12,67 @@ * See the License for the specific language governing permissions and * limitations under the License. */ +const path = require("path"); const HtmlWebPackPlugin = require("html-webpack-plugin"); - -const path = require("path"); +const MiniCssExtractPlugin = require("mini-css-extract-plugin"); +const TerserPlugin = require("terser-webpack-plugin"); module.exports = { - entry: ["./src/index.css", "./src/index.js"], - + entry: { + index: ["./src/index.css", "./src/index.js"] + }, + node: false, + optimization: { + minimizer: [new TerserPlugin({ extractComments: false })] + }, output: { - filename: "[id][name].js", - chunkFilename: "[id][name].js", - path: path.resolve(__dirname, "dist"), - clean: true, + path: path.join(__dirname, "dist"), + chunkFilename: "chunks/[id].js", + publicPath: "", + clean: true }, - - devtool: "source-map", - devServer: { static: { - directory: path.join(__dirname, "dist"), + directory: path.join(__dirname, "dist") }, compress: true, - port: 9000, + port: 8080 }, - experiments: { // Because we are using async/await in index.js - topLevelAwait: true, + topLevelAwait: true }, - module: { rules: [ { - test: /\.css$/, - use: ["style-loader", "css-loader"], // Collect CSS and insert them into the page + test: /\.js$/, + enforce: "pre", + use: ["source-map-loader"] }, - ], + { + test: /\.css$/, + use: [MiniCssExtractPlugin.loader, "css-loader"] + } + ] }, - plugins: [ // This plugin simplifies creation of HTML files to serve your webpack bundles. new HtmlWebPackPlugin({ title: "Coding components Webpack template", - favicon: "./src/icons/favicon.png", + template: "./public/index.html", + filename: "./index.html", chunksSortMode: "none", - meta: { - viewport: - "width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=5.0, user-scalable=no", - }, - templateContent: ` - - - - - - -
- -
- - - `, + inlineSource: ".(css)$" }), + new MiniCssExtractPlugin({ + filename: "[name].[chunkhash].css", + chunkFilename: "[id].css" + }) ], - // Resolve property for importing files resolve: { modules: [path.resolve(__dirname, "/src"), "node_modules/"], - extensions: [".js", ".css"], - }, + extensions: [".js", ".css"] + } }; diff --git a/packages/map-components/templates/webpack/README.md b/packages/map-components/templates/webpack/README.md index f4d0efa..b82cc9c 100644 --- a/packages/map-components/templates/webpack/README.md +++ b/packages/map-components/templates/webpack/README.md @@ -54,7 +54,7 @@ yarn build Imported the components using [Stencil's pattern for integrating components without a JavaScript framework](https://stenciljs.com/docs/javascript). -``` +```js import { defineCustomElements } from "@esri/map-components/dist/loader"; // define custom elements in the browser, and load the assets from the CDN @@ -73,7 +73,7 @@ You can find all the necessary styling in [`src/index.css`](./src/index.css). Im #### HTML -The parsing of our `index.html` was simplified by using the HtmlWebpackPlugin in the webpack configuration file. +Parsing the `index.html` was simplified by using the HtmlWebpackPlugin in the webpack configuration file. ```js // webpack.config.js @@ -82,7 +82,7 @@ const HtmlWebPackPlugin = require("html-webpack-plugin"); module.exports = { plugins: [ new HtmlWebPackPlugin({ - title: "ArcGIS Maps SDK for JavaScript", + title: "Map components Webpack template", template: "./public/index.html", filename: "./index.html", chunksSortMode: "none", @@ -107,4 +107,6 @@ For the webpack configuration file ([`webpack.config.js`](webpack.config.js)) [html-webpack-plugin](https://webpack.js.org/plugins/html-webpack-plugin/) -[copy-webpack-plugin](https://webpack.js.org/plugins/copy-webpack-plugin/) \ No newline at end of file +[mini-css-extract-plugin](https://webpack.js.org/plugins/mini-css-extract-plugin/) + +[terser-webpack-plugin](https://webpack.js.org/plugins/terser-webpack-plugin/) diff --git a/packages/map-components/templates/webpack/public/index.html b/packages/map-components/templates/webpack/public/index.html index f11b49d..742c816 100644 --- a/packages/map-components/templates/webpack/public/index.html +++ b/packages/map-components/templates/webpack/public/index.html @@ -1,14 +1,18 @@ - - - - Map components webpack template - - - - - - - - + + + + + + Map components webpack template + + + + + + + + + + \ No newline at end of file diff --git a/packages/map-components/templates/webpack/webpack.config.js b/packages/map-components/templates/webpack/webpack.config.js index fef6b46..57a65ec 100644 --- a/packages/map-components/templates/webpack/webpack.config.js +++ b/packages/map-components/templates/webpack/webpack.config.js @@ -24,10 +24,8 @@ module.exports = { }, node: false, optimization: { - minimizer: [ - new TerserPlugin({extractComments: false}), - ], - }, + minimizer: [new TerserPlugin({ extractComments: false })] + }, output: { path: path.join(__dirname, "dist"), chunkFilename: "chunks/[id].js", @@ -36,30 +34,27 @@ module.exports = { }, devServer: { static: { - directory: path.join(__dirname, "dist"), + directory: path.join(__dirname, "dist") }, compress: true, - port: 3001, + port: 8080 }, module: { rules: [ { test: /\.js$/, enforce: "pre", - use: ["source-map-loader"], + use: ["source-map-loader"] }, { test: /\.css$/, - use: [ - MiniCssExtractPlugin.loader, - "css-loader" - ] - }, + use: [MiniCssExtractPlugin.loader, "css-loader"] + } ] }, plugins: [ new HtmlWebPackPlugin({ - title: "ArcGIS Maps SDK for JavaScript", + title: "Map components Webpack template", template: "./public/index.html", filename: "./index.html", chunksSortMode: "none", diff --git a/yarn.lock b/yarn.lock index 71cee35..d47f36b 100644 --- a/yarn.lock +++ b/yarn.lock @@ -5034,9 +5034,11 @@ __metadata: "@arcgis/core": "npm:~4.29.6" "@esri/calcite-components": "npm:2.4.0" css-loader: "npm:^6.10.0" - html-loader: "npm:^5.0.0" html-webpack-plugin: "npm:^5.6.0" + mini-css-extract-plugin: "npm:^2.7.6" + source-map-loader: "npm:5.0.0" style-loader: "npm:3.3.4" + terser-webpack-plugin: "npm:^5.3.9" webpack: "npm:^5.90.1" webpack-cli: "npm:^5.1.4" webpack-dev-server: "npm:^5.0.1" @@ -5125,15 +5127,6 @@ __metadata: languageName: node linkType: hard -"clean-css@npm:~5.3.2": - version: 5.3.3 - resolution: "clean-css@npm:5.3.3" - dependencies: - source-map: "npm:~0.6.0" - checksum: 2db1ae37b384c8ff0a06a12bfa80f56cc02b4abcaaf340db98c0ae88a61dd67c856653fd8135ace6eb0ec13aeab3089c425d2e4238d2a2ad6b6917e6ccc74729 - languageName: node - linkType: hard - "clean-stack@npm:^2.0.0": version: 2.2.0 resolution: "clean-stack@npm:2.2.0" @@ -5287,7 +5280,10 @@ __metadata: "@esri/calcite-components": "npm:2.4.0" css-loader: "npm:^6.10.0" html-webpack-plugin: "npm:^5.6.0" + mini-css-extract-plugin: "npm:^2.7.6" + source-map-loader: "npm:5.0.0" style-loader: "npm:3.3.4" + terser-webpack-plugin: "npm:^5.3.9" webpack: "npm:^5.90.1" webpack-cli: "npm:^5.1.4" webpack-dev-server: "npm:^5.0.1" @@ -5369,7 +5365,7 @@ __metadata: languageName: node linkType: hard -"commander@npm:^10.0.0, commander@npm:^10.0.1": +"commander@npm:^10.0.1": version: 10.0.1 resolution: "commander@npm:10.0.1" checksum: 8799faa84a30da985802e661cc9856adfaee324d4b138413013ef7f087e8d7924b144c30a1f1405475f0909f467665cd9e1ce13270a2f41b141dab0b7a58f3fb @@ -7289,18 +7285,6 @@ __metadata: languageName: node linkType: hard -"html-loader@npm:^5.0.0": - version: 5.0.0 - resolution: "html-loader@npm:5.0.0" - dependencies: - html-minifier-terser: "npm:^7.2.0" - parse5: "npm:^7.1.2" - peerDependencies: - webpack: ^5.0.0 - checksum: 27db0ac562ba9ac3736f095435e08cc7844ed32029662ebabe7045cf8ba473978a8df6198be0166c0abf456cd8914830083c3f6847c828f51dc6fc13bbd85699 - languageName: node - linkType: hard - "html-minifier-terser@npm:^6.0.2": version: 6.1.0 resolution: "html-minifier-terser@npm:6.1.0" @@ -7318,23 +7302,6 @@ __metadata: languageName: node linkType: hard -"html-minifier-terser@npm:^7.2.0": - version: 7.2.0 - resolution: "html-minifier-terser@npm:7.2.0" - dependencies: - camel-case: "npm:^4.1.2" - clean-css: "npm:~5.3.2" - commander: "npm:^10.0.0" - entities: "npm:^4.4.0" - param-case: "npm:^3.0.4" - relateurl: "npm:^0.2.7" - terser: "npm:^5.15.1" - bin: - html-minifier-terser: cli.js - checksum: 7320095dbf08c361b45e855bd840d1d21fe86326afee775503594163532ebaaed9bb1c9dc98232b03c169dc24b56f30c294d559bca0cade59f9c950a1992db82 - languageName: node - linkType: hard - "html-webpack-plugin@npm:^5.6.0": version: 5.6.0 resolution: "html-webpack-plugin@npm:5.6.0" @@ -9823,7 +9790,7 @@ __metadata: languageName: node linkType: hard -"parse5@npm:^7.0.0, parse5@npm:^7.1.2": +"parse5@npm:^7.0.0": version: 7.1.2 resolution: "parse5@npm:7.1.2" dependencies: @@ -11583,20 +11550,6 @@ __metadata: languageName: node linkType: hard -"terser@npm:^5.15.1": - version: 5.28.1 - resolution: "terser@npm:5.28.1" - dependencies: - "@jridgewell/source-map": "npm:^0.3.3" - acorn: "npm:^8.8.2" - commander: "npm:^2.20.0" - source-map-support: "npm:~0.5.20" - bin: - terser: bin/terser - checksum: 922159f036a89a7d01b8b67e0eacb4425c20cf19067d2e82c1523153ed3bf66c36b945fd16c610b7ea41fedb867b189d2a350415fb566f4668a1701ab768728e - languageName: node - linkType: hard - "test-exclude@npm:^6.0.0": version: 6.0.0 resolution: "test-exclude@npm:6.0.0"