Skip to content
This repository was archived by the owner on Jul 10, 2024. It is now read-only.

Commit 740e392

Browse files
jimmyhchenjimmyhchen
authored
Merge pull request #24 from Esri/jchen/update-webpack-script
chore: update webpack templates for all components
2 parents 83d82e5 + 7a37d33 commit 740e392

File tree

12 files changed

+169
-226
lines changed

12 files changed

+169
-226
lines changed

‎packages/charts-components/templates/webpack/README.md‎

Lines changed: 16 additions & 49 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
# Charts components ESM Webpack template
1+
# Charts components Webpack template
22

33
📁 **[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)** 📁
44

@@ -50,77 +50,42 @@ npm run build
5050
yarn build
5151
```
5252

53-
## Bundling details
54-
5553
#### JS
5654

57-
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).
55+
Imported the components using [Stencil's pattern for integrating components without a JavaScript framework](https://stenciljs.com/docs/javascript).
5856

5957
```js
6058
import { defineCustomElements as defineChartsElements } from "@arcgis/charts-components/dist/loader";
6159

62-
defineChartsElements(window, {
63-
resourcesUrl: "../arcgis-charts/"
64-
});
60+
// define custom elements in the browser, and load the assets from the CDN
61+
defineChartsElements(window, { resourcesUrl: "https://js.arcgis.com/charts-components/4.29/t9n" });
6562
```
6663

67-
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.
64+
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.
6865

6966
#### CSS
7067

7168
You can find all the necessary styling in [`src/index.css`](./src/index.css).
7269

7370
#### HTML
7471

75-
The generation of our `index.html` was simplified by using the HtmlWebpackPlugin in the webpack configuration file.
72+
Parsing the `index.html` was simplified by using the HtmlWebpackPlugin in the webpack configuration file.
7673

7774
```js
7875
// webpack.config.js
7976
const HtmlWebPackPlugin = require("html-webpack-plugin");
8077

8178
module.exports = {
8279
plugins: [
83-
new HtmlWebPackPlugin({
84-
title: "Charts components",
80+
new HtmlWebPackPlugin({
81+
title: "Charts components Webpack template",
82+
template: "./public/index.html",
83+
filename: "./index.html",
8584
chunksSortMode: "none",
86-
meta: {
87-
viewport:
88-
"width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=5.0, user-scalable=no",
89-
},
90-
templateContent: `
91-
<!DOCTYPE html>
92-
<html dir="ltr" lang="en">
93-
<head>
94-
<meta charset="utf-8">
95-
</head>
96-
<body>
97-
<div class="flex-container">
98-
<div class="chart-container">
99-
<arcgis-charts-bar-chart class="half-screen-chart"></arcgis-charts-bar-chart>
100-
</div>
101-
<div class="chart-container">
102-
<arcgis-charts-bar-line-chart class="half-screen-chart"></arcgis-charts-bar-line-chart>
103-
</div>
104-
<div class="chart-container">
105-
<arcgis-charts-box-plot class="half-screen-chart"></arcgis-charts-box-plot>
106-
</div>
107-
<div class="chart-container">
108-
<arcgis-charts-histogram class="half-screen-chart"></arcgis-charts-histogram>
109-
</div>
110-
<div class="chart-container">
111-
<arcgis-charts-line-chart class="half-screen-chart"></arcgis-charts-line-chart>
112-
</div>
113-
<div class="chart-container">
114-
<arcgis-charts-pie-chart class="half-screen-chart"></arcgis-charts-pie-chart>
115-
</div>
116-
<div class="chart-container">
117-
<arcgis-charts-scatter-plot class="half-screen-chart"></arcgis-charts-scatter-plot>
118-
</div>
119-
</div>
120-
</body>
121-
</html>`,
85+
inlineSource: ".(css)$"
12286
}),
123-
],
87+
...
88+
]
12489
};
12590
```
12691

@@ -136,4 +101,6 @@ For the webpack configuration file ([`webpack.config.js`](webpack.config.js))
136101

137102
[html-webpack-plugin](https://webpack.js.org/plugins/html-webpack-plugin/)
138103

139-
[copy-webpack-plugin](https://webpack.js.org/plugins/copy-webpack-plugin/)
104+
[mini-css-extract-plugin](https://webpack.js.org/plugins/mini-css-extract-plugin/)
105+
106+
[terser-webpack-plugin](https://webpack.js.org/plugins/terser-webpack-plugin/)

‎packages/charts-components/templates/webpack/package.json‎

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@
33
"private": true,
44
"scripts": {
55
"build": "webpack --mode production",
6-
"start": "webpack-dev-server --mode development --open"
6+
"start": "webpack serve --mode development"
77
},
88
"dependencies": {
99
"@arcgis/charts-components": "~4.29.6",
@@ -13,9 +13,11 @@
1313
},
1414
"devDependencies": {
1515
"css-loader": "^6.10.0",
16-
"html-loader": "^5.0.0",
1716
"html-webpack-plugin": "^5.6.0",
17+
"mini-css-extract-plugin": "^2.7.6",
18+
"source-map-loader": "5.0.0",
1819
"style-loader": "3.3.4",
20+
"terser-webpack-plugin": "^5.3.9",
1921
"webpack": "^5.90.1",
2022
"webpack-cli": "^5.1.4",
2123
"webpack-dev-server": "^5.0.1"

‎packages/charts-components/templates/webpack/public/index.html‎

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
1+
<!DOCTYPE html>
2+
<html dir="ltr" lang="en">
3+
4+
<head>
5+
<meta charset="utf-8">
6+
<meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no">
7+
<link rel="icon" href="data:;base64,=" />
8+
<title>Charts components webpack template</title>
9+
</head>
10+
11+
<body>
12+
<arcgis-charts-scatter-plot class="chart-container"></arcgis-charts-scatter-plot>
13+
</body>
14+
15+
</html>

‎packages/charts-components/templates/webpack/webpack.config.js‎

Lines changed: 26 additions & 23 deletions
Original file line numberDiff line numberDiff line change
@@ -12,54 +12,57 @@
1212
* See the License for the specific language governing permissions and
1313
* limitations under the License.
1414
*/
15+
const path = require("path");
1516

1617
const HtmlWebpackPlugin = require("html-webpack-plugin");
17-
const path = require("path");
18+
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
19+
const TerserPlugin = require("terser-webpack-plugin");
1820

1921
module.exports = {
20-
entry: ["./src/index.css", "./src/index.js"],
21-
22+
entry: {
23+
index: ["./src/index.css", "./src/index.js"]
24+
},
25+
node: false,
26+
optimization: {
27+
minimizer: [new TerserPlugin({ extractComments: false })]
28+
},
2229
output: {
23-
filename: "[id][name].js",
24-
chunkFilename: "[id][name].js",
2530
path: path.resolve(__dirname, "dist"),
31+
chunkFilename: "chunks/[id].js",
32+
publicPath: "",
2633
clean: true
2734
},
28-
29-
devtool: "source-map",
30-
3135
devServer: {
3236
static: {
3337
directory: path.join(__dirname, "dist")
3438
},
3539
compress: true,
36-
port: 9000
40+
port: 8080
3741
},
3842
module: {
3943
rules: [
44+
{
45+
test: /\.js$/,
46+
enforce: "pre",
47+
use: ["source-map-loader"]
48+
},
4049
{
4150
test: /\.css$/,
42-
use: ["style-loader", "css-loader"] // Collect CSS and insert them into the page
51+
use: [MiniCssExtractPlugin.loader, "css-loader"]
4352
}
4453
]
4554
},
4655
plugins: [
4756
new HtmlWebpackPlugin({
4857
title: "Charts components Webpack template",
58+
template: "./public/index.html",
59+
filename: "./index.html",
4960
chunksSortMode: "none",
50-
meta: {
51-
viewport: "width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=5.0, user-scalable=no"
52-
},
53-
templateContent: `
54-
<!DOCTYPE html>
55-
<html dir="ltr" lang="en">
56-
<head>
57-
<meta charset="utf-8">
58-
</head>
59-
<body>
60-
<arcgis-charts-scatter-plot class="chart-container"></arcgis-charts-scatter-plot>
61-
</body>
62-
</html>`
61+
inlineSource: ".(css)$"
62+
}),
63+
new MiniCssExtractPlugin({
64+
filename: "[name].[chunkhash].css",
65+
chunkFilename: "[id].css"
6366
})
6467
]
6568
};

‎packages/coding-components/templates/webpack/package.json‎

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@
33
"private": true,
44
"scripts": {
55
"build": "webpack --mode production",
6-
"start": "webpack-dev-server --mode development --open"
6+
"start": "webpack serve --mode development"
77
},
88
"dependencies": {
99
"@arcgis/coding-components": "~4.29.6",
@@ -13,7 +13,10 @@
1313
"devDependencies": {
1414
"css-loader": "^6.10.0",
1515
"html-webpack-plugin": "^5.6.0",
16+
"mini-css-extract-plugin": "^2.7.6",
17+
"source-map-loader": "5.0.0",
1618
"style-loader": "3.3.4",
19+
"terser-webpack-plugin": "^5.3.9",
1720
"webpack": "^5.90.1",
1821
"webpack-cli": "^5.1.4",
1922
"webpack-dev-server": "^5.0.1"

‎packages/coding-components/templates/webpack/public/index.html‎

Lines changed: 18 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,18 @@
1+
<!DOCTYPE html>
2+
<html dir="ltr" lang="en">
3+
4+
<head>
5+
<meta charset="utf-8">
6+
<meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no">
7+
<link rel="icon" href="data:;base64,=" />
8+
<title>Coding components webpack template</title>
9+
</head>
10+
11+
<body>
12+
<div class="editor-wrapper">
13+
<arcgis-arcade-editor />
14+
</div>
15+
<calcite-scrim id="scrim" loading />
16+
</body>
17+
18+
</html>

‎packages/coding-components/templates/webpack/readme.md‎

Lines changed: 14 additions & 26 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
# Coding components ESM Webpack template
1+
# Coding components Webpack template
22

33
📁 **[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)** 📁
44

@@ -54,7 +54,7 @@ yarn build
5454

5555
Imported the components using [Stencil's pattern for integrating components without a JavaScript framework](https://stenciljs.com/docs/javascript).
5656

57-
```
57+
```js
5858
import { defineCustomElements as defineCalciteElements } from "@esri/calcite-components/dist/loader";
5959
import { defineCustomElements as defineCodingElements } from "@arcgis/coding-components/dist/loader";
6060

@@ -76,37 +76,23 @@ You can find all the necessary styling in [`src/index.css`](./src/index.css). Im
7676

7777
#### HTML
7878

79-
The generation of our `index.html` was simplified by using the HtmlWebpackPlugin in the webpack configuration file.
79+
Parsing the `index.html` was simplified by using the HtmlWebpackPlugin in the webpack configuration file.
8080

81-
```
81+
```js
8282
// webpack.config.js
8383
const HtmlWebPackPlugin = require("html-webpack-plugin");
8484

8585
module.exports = {
8686
plugins: [
87-
new HtmlWebPackPlugin({
88-
title: "Coding components",
89-
favicon: "./src/icons/favicon.png",
87+
new HtmlWebPackPlugin({
88+
title: "Coding components Webpack template",
89+
template: "./public/index.html",
90+
filename: "./index.html",
9091
chunksSortMode: "none",
91-
meta: {
92-
viewport:
93-
"width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=5.0, user-scalable=no",
94-
},
95-
templateContent: `
96-
<!DOCTYPE html>
97-
<html dir="ltr" lang="en">
98-
<head>
99-
<meta charset="utf-8">
100-
</head>
101-
<body>
102-
<div class="editor-wrapper">
103-
<arcgis-arcade-editor />
104-
</div>
105-
<calcite-scrim id="scrim" loading></calcite-scrim>
106-
</body>
107-
</html>`,
92+
inlineSource: ".(css)$"
10893
}),
109-
],
94+
...
95+
]
11096
};
11197
```
11298

@@ -124,4 +110,6 @@ For the webpack configuration file ([`webpack.config.js`](webpack.config.js))
124110

125111
[html-webpack-plugin](https://webpack.js.org/plugins/html-webpack-plugin/)
126112

127-
[copy-webpack-plugin](https://webpack.js.org/plugins/copy-webpack-plugin/)
113+
[mini-css-extract-plugin](https://webpack.js.org/plugins/mini-css-extract-plugin/)
114+
115+
[terser-webpack-plugin](https://webpack.js.org/plugins/terser-webpack-plugin/)

0 commit comments

Comments
 (0)