├── .gitignore ├── LICENSE ├── NOTICE ├── README.md ├── js ├── LazyContentPane.js ├── bootstrap.js └── loaderConfig.js ├── package.json ├── serve.config.js ├── test.html ├── theme ├── colors.less ├── sample.css └── sample.less └── webpack.config.js /.gitignore: -------------------------------------------------------------------------------- 1 | /release/ 2 | /node_modules/ 3 | package-lock.json 4 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | This project is an OpenNTF project, and is available under the Apache License V2.0. 2 | All other aspects of the project, including contributions, defect reports, discussions, 3 | feature requests and reviews are subject to the OpenNTF Terms of Use - available at 4 | http://openntf.org/Internal/home.nsf/dx/Terms_of_Use. 5 | -------------------------------------------------------------------------------- /NOTICE: -------------------------------------------------------------------------------- 1 | OpenNTF dojo-webpack-plugin-sample 2 | Copyright IBM Corp. 2017 All Rights Reserved. 3 | 4 | This product includes software contributed to 5 | OpenNTF Alliance (http://www.OpenNTF.org/) 6 | 7 | This product is licensed under the terms of the Apache 2.0 license. 8 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # dojo-webpack-plugin-sample 2 | 3 | [Sample application](https://openntf.github.io/dojo-webpack-plugin-sample/test.html) demonstrating the use of [dojo-webpack-plugin](https://github.com/OpenNTF/dojo-webpack-plugin) with [webpack](https://webpack.github.io/). The sample can be run as a webpack application (the default) or as an [unpacked application](https://openntf.github.io/dojo-webpack-plugin-sample/test.html?nopack=1) that uses the native Dojo loader by specifying the ?nopack=1 query arg in the URL. It demonstrates how to construct a [Dojo loader config](https://github.com/OpenNTF/dojo-webpack-plugin-sample/blob/master/js/loaderConfig.js) that can be used in both weback and non-webpack versions of a Dojo application. You may want to support non-webpack versions during the development phase of your application in order to avoid build overhead during development. 4 | 5 | ``` 6 | npm install 7 | npm run [build|serve] 8 | ``` 9 | 10 | The `build` script builds the sample application, placing the deployable artifacts in the `release` directory. The `serve` script builds the sample application and uses [webpack-serve](https://www.npmjs.com/package/webpack-serve) to host the application locally at http://localhost:8080/test.html. It automatically launches a browser to load and run the application. 11 | 12 | [@GordonSmith](https://github.com/GordonSmith) provides a fork of the sample app with some variations in [here](https://github.com/OpenNTF/dojo-webpack-plugin-sample/issues/40). 13 | -------------------------------------------------------------------------------- /js/LazyContentPane.js: -------------------------------------------------------------------------------- 1 | /* 2 | * (C) Copyright IBM Corp. 2012, 2016 All Rights Reserved. 3 | * 4 | * Licensed under the Apache License, Version 2.0 (the "License"); 5 | * you may not use this file except in compliance with the License. 6 | * You may obtain a copy of the License at 7 | * 8 | * http://www.apache.org/licenses/LICENSE-2.0 9 | * 10 | * Unless required by applicable law or agreed to in writing, software 11 | * distributed under the License is distributed on an "AS IS" BASIS, 12 | * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. 13 | * See the License for the specific language governing permissions and 14 | * limitations under the License. 15 | */ 16 | define([ 17 | "dojo/_base/lang", // lang 18 | "dojo/_base/declare", // declare 19 | "dijit/layout/ContentPane", // parent 20 | "dojo/dom-construct", 21 | "dijit/a11yclick" // template requirement 22 | ], function(lang, declare, ContentPane, dconst){ 23 | 24 | // module: 25 | // js/LazyContentPane 26 | // summary: 27 | // A demo container that sets its contents based on its title. 28 | 29 | 30 | return declare("dijit.layout.LazyContentPane", [ContentPane], { 31 | onShow: function() { 32 | if (this.get('content') == '') { 33 | this.set('content', this.onDownloadStart()); 34 | 35 | var title = this.get('title'); 36 | if (title == 'Calendar') { 37 | require(['dijit/Calendar'], lang.hitch(this, function(calendar) { 38 | this.set('content', new calendar({})); 39 | })); 40 | } else if (title == 'Color Palette') { 41 | require(['dijit/ColorPalette'], lang.hitch(this, function(colorPallete) { 42 | this.set('content', '
'); 43 | new colorPallete({}, this.containerNode.firstChild); 44 | })); 45 | } else if (title == 'Editor') { 46 | require(['dijit/Editor'], lang.hitch(this, function(editor) { 47 | dconst.empty(this.domNode); 48 | (new editor({ 49 | plugins: ["bold","italic","|","cut","copy","paste","|","insertUnorderedList"] 50 | })).placeAt(this.domNode); 51 | })); 52 | } else if (title == 'Chart') { 53 | // Chained requires for gfx are internal to the gfx module. 54 | require([ 55 | 'dojox/charting/Chart2D', 56 | 'dojox/charting/themes/Wetland', 57 | 'dojox/charting/axis2d/Default', 58 | 'dojox/charting/plot2d/Default' 59 | ], lang.hitch(this, function(chart, wetland) { 60 | dconst.empty(this.domNode); 61 | var node = dconst.place('
', this.domNode); 62 | var c = new chart(node); 63 | c.addPlot("default", {type: "StackedAreas", tension:3}) 64 | .addAxis("x", {fixLower: "major", fixUpper: "major"}) 65 | .addAxis("y", {vertical: true, fixLower: "major", fixUpper: "major", min: 0}) 66 | .setTheme(wetland) 67 | .addSeries("Series A", [1, 2, 0.5, 1.5, 1, 2.8, 0.4]) 68 | .addSeries("Series B", [2.6, 1.8, 2, 1, 1.4, 0.7, 2]) 69 | .addSeries("Series C", [6.3, 1.8, 3, 0.5, 4.4, 2.7, 2]) 70 | .render(); 71 | })); 72 | } 73 | } 74 | } 75 | }); 76 | }); 77 | -------------------------------------------------------------------------------- /js/bootstrap.js: -------------------------------------------------------------------------------- 1 | /* 2 | * (C) Copyright IBM Corp. 2012, 2016 All Rights Reserved. 3 | * 4 | * Licensed under the Apache License, Version 2.0 (the "License"); 5 | * you may not use this file except in compliance with the License. 6 | * You may obtain a copy of the License at 7 | * 8 | * http://www.apache.org/licenses/LICENSE-2.0 9 | * 10 | * Unless required by applicable law or agreed to in writing, software 11 | * distributed under the License is distributed on an "AS IS" BASIS, 12 | * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. 13 | * See the License for the specific language governing permissions and 14 | * limitations under the License. 15 | */ 16 | define([ 17 | "dojo/ready", 18 | "dojo/parser", 19 | "dijit/layout/TabContainer", 20 | "js/LazyContentPane", 21 | "dojo/has!webpack?dojo-webpack-plugin/amd/dojoES6Promise", 22 | "css!dijit/themes/claro/claro.css", 23 | "css!theme/sample.less" 24 | ], function(ready, parser) { 25 | ready(function() { 26 | parser.parse(); 27 | }); 28 | return {}; 29 | }); 30 | -------------------------------------------------------------------------------- /js/loaderConfig.js: -------------------------------------------------------------------------------- 1 | /* 2 | * (C) Copyright IBM Corp. 2012, 2016 All Rights Reserved. 3 | * 4 | * Licensed under the Apache License, Version 2.0 (the "License"); 5 | * you may not use this file except in compliance with the License. 6 | * You may obtain a copy of the License at 7 | * 8 | * http://www.apache.org/licenses/LICENSE-2.0 9 | * 10 | * Unless required by applicable law or agreed to in writing, software 11 | * distributed under the License is distributed on an "AS IS" BASIS, 12 | * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. 13 | * See the License for the specific language governing permissions and 14 | * limitations under the License. 15 | */ 16 | function getConfig(env) { 17 | // env is set by the 'buildEnvronment' and/or 'environment' plugin options (see webpack.config.js), 18 | // or by the code at the end of this file if using without webpack 19 | dojoConfig = { 20 | baseUrl: '.', 21 | packages: [ 22 | { 23 | name: 'dojo', 24 | location: env.dojoRoot + '/dojo', 25 | lib: '.' 26 | }, 27 | { 28 | name: 'dijit', 29 | location: env.dojoRoot + '/dijit', 30 | lib: '.' 31 | }, 32 | { 33 | name: 'dojox', 34 | location: env.dojoRoot + '/dojox', 35 | lib: '.' 36 | } 37 | ], 38 | 39 | paths: { 40 | js: "js", 41 | theme: "theme", 42 | // With the webpack build, the css loader plugin is replaced by a webpack loader 43 | // via webpack.config.js, so the following are used only by the unpacked app. 44 | css: "//chuckdumont.github.io/dojo-css-plugin/1.0.0/css", 45 | // lesspp is used by the css loader plugin when loading LESS modules 46 | lesspp: "//cdnjs.cloudflare.com/ajax/libs/less.js/1.7.3/less.min", 47 | }, 48 | 49 | deps: ["js/bootstrap"], 50 | 51 | async: true, 52 | 53 | has: {'dojo-config-api': 0}, // We don't need the config API code in the embedded Dojo loader, 54 | // however, don't do this if you use window.dojoConfig or 55 | // require.rawConfig. 56 | 57 | fixupUrl: function(url) { 58 | // Load the uncompressed versions of dojo/dijit/dojox javascript files when using the dojo loader. 59 | // When using a webpack build, the dojo loader is not used for loading javascript files so this 60 | // property has no effect. This is only needed because we're loading Dojo from a CDN for this 61 | // demo. In a normal development envorinment, Dojo would be installed locally and this wouldn't 62 | // be needed. 63 | if (/\/(dojo|dijit|dojox)\/.*\.js$/.test(url)) { 64 | url += ".uncompressed.js"; 65 | } 66 | return url; 67 | } 68 | }; 69 | return dojoConfig; 70 | } 71 | // For Webpack, export the config. This is needed both at build time and on the client at runtime 72 | // for the packed application. 73 | if (typeof module !== 'undefined' && module) { 74 | module.exports = getConfig; 75 | } else { 76 | // No webpack. This script was loaded by page via script tag, so load Dojo from CDN 77 | getConfig({dojoRoot: '//ajax.googleapis.com/ajax/libs/dojo/1.14.0'}); 78 | } 79 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "dojo-webpack-plugin-sample", 3 | "version": "3.0.7", 4 | "dependencies": { 5 | "dijit": "1.16.3", 6 | "dojo": "1.16.3", 7 | "dojox": "1.16.3" 8 | }, 9 | "devDependencies": { 10 | "copy-webpack-plugin": "9.0.0", 11 | "css-loader": "5.2.6", 12 | "dojo-util": "1.16.3", 13 | "dojo-webpack-plugin": "3.0.7", 14 | "less": "4.1.1", 15 | "less-loader": "9.0.0", 16 | "style-loader": "2.0.0", 17 | "url-loader": "4.1.1", 18 | "webpack": "5.99.6", 19 | "webpack-cli": "^5.1.4", 20 | "webpack-dev-server": "^5.2.1" 21 | }, 22 | "license": "Apache-2.0", 23 | "repository": { 24 | "type": "git", 25 | "url": "git+https://github.com/OpenNTF/dojo-webpack-plugin-sample.git" 26 | }, 27 | "scripts": { 28 | "build": "webpack", 29 | "build:dev": "webpack --env dev", 30 | "build:debug": "node --inspect-brk node_modules/webpack/bin/webpack.js", 31 | "build:loader": "node node_modules/dojo-webpack-plugin/buildDojo/build.js node_modules/dojo/dojo.js ./release", 32 | "build:withLoader": "webpack --env withLoader", 33 | "serve": "webpack server --env dev" 34 | } 35 | } 36 | -------------------------------------------------------------------------------- /serve.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | devMiddleware: { 3 | publicPath: "/release/" 4 | } 5 | } 6 | -------------------------------------------------------------------------------- /test.html: -------------------------------------------------------------------------------- 1 | 2 | 17 | 18 | 19 | Test 20 | 26 | 34 | 35 | 36 |
37 |
38 |
39 |
40 |
41 |
42 | 43 | 44 | -------------------------------------------------------------------------------- /theme/colors.less: -------------------------------------------------------------------------------- 1 | /* 2 | * (C) Copyright IBM Corp. 2012, 2016 All Rights Reserved. 3 | * 4 | * Licensed under the Apache License, Version 2.0 (the "License"); 5 | * you may not use this file except in compliance with the License. 6 | * You may obtain a copy of the License at 7 | * 8 | * http://www.apache.org/licenses/LICENSE-2.0 9 | * 10 | * Unless required by applicable law or agreed to in writing, software 11 | * distributed under the License is distributed on an "AS IS" BASIS, 12 | * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. 13 | * See the License for the specific language governing permissions and 14 | * limitations under the License. 15 | */ 16 | 17 | @back: lightblue; -------------------------------------------------------------------------------- /theme/sample.css: -------------------------------------------------------------------------------- 1 | body { 2 | background: lightblue; 3 | } 4 | -------------------------------------------------------------------------------- /theme/sample.less: -------------------------------------------------------------------------------- 1 | /* 2 | * (C) Copyright IBM Corp. 2012, 2016 All Rights Reserved. 3 | * 4 | * Licensed under the Apache License, Version 2.0 (the "License"); 5 | * you may not use this file except in compliance with the License. 6 | * You may obtain a copy of the License at 7 | * 8 | * http://www.apache.org/licenses/LICENSE-2.0 9 | * 10 | * Unless required by applicable law or agreed to in writing, software 11 | * distributed under the License is distributed on an "AS IS" BASIS, 12 | * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. 13 | * See the License for the specific language governing permissions and 14 | * limitations under the License. 15 | */ 16 | 17 | @import "colors.less"; 18 | 19 | body { 20 | background: @back; 21 | } 22 | -------------------------------------------------------------------------------- /webpack.config.js: -------------------------------------------------------------------------------- 1 | /* 2 | * (C) Copyright IBM Corp. 2012, 2016 All Rights Reserved. 3 | * 4 | * Licensed under the Apache License, Version 2.0 (the "License"); 5 | * you may not use this file except in compliance with the License. 6 | * You may obtain a copy of the License at 7 | * 8 | * http://www.apache.org/licenses/LICENSE-2.0 9 | * 10 | * Unless required by applicable law or agreed to in writing, software 11 | * distributed under the License is distributed on an "AS IS" BASIS, 12 | * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. 13 | * See the License for the specific language governing permissions and 14 | * limitations under the License. 15 | */ 16 | const DojoWebpackPlugin = require("dojo-webpack-plugin"); 17 | const CopyWebpackPlugin = require("copy-webpack-plugin"); 18 | const TerserPlugin = require('terser-webpack-plugin'); 19 | 20 | var path = require("path"); 21 | var webpack = require("webpack"); 22 | 23 | module.exports = env => { 24 | const devmode = !!(env||{}).dev; 25 | console.log("devmode = " + devmode); 26 | return { 27 | context: __dirname, 28 | entry: "js/bootstrap", 29 | output: { 30 | path: path.join(__dirname, "release"), 31 | publicPath: "release/", 32 | pathinfo: true, 33 | filename: "bundle.js", 34 | }, 35 | module: { 36 | rules: [{ 37 | test: /\.(png)|(gif)$/, 38 | use: [ 39 | { 40 | loader: 'url-loader', 41 | options: { 42 | limit: 100000 43 | } 44 | } 45 | ] 46 | }] 47 | }, 48 | plugins: [ 49 | new DojoWebpackPlugin({ 50 | loaderConfig: require("./js/loaderConfig"), 51 | environment: {dojoRoot: "release"}, // used at run time for non-packed resources (e.g. blank.gif) 52 | buildEnvironment: {dojoRoot: "node_modules"}, // used at build time 53 | locales: ["en"], 54 | noConsole: true 55 | }), 56 | 57 | // Copy non-packed resources needed by the app to the release directory 58 | new CopyWebpackPlugin({ 59 | patterns: [ 60 | { 61 | context: "node_modules", 62 | from: "dojo/resources/blank.gif", 63 | to: "dojo/resources" 64 | } 65 | ] 66 | }), 67 | 68 | // For plugins registered after the dojo-webpack-plugin, data.request has been normalized and 69 | // resolved to an absMid and loader-config maps and aliases have been applied 70 | new webpack.NormalModuleReplacementPlugin(/^dojox\/gfx\/renderer!/, "dojox/gfx/canvas"), 71 | new webpack.NormalModuleReplacementPlugin( 72 | /^css!/, function(data) { 73 | data.request = data.request.replace(/^css!/, "!style-loader!css-loader!less-loader!") 74 | } 75 | ) 76 | ], 77 | resolveLoader: { 78 | modules: ["node_modules"] 79 | }, 80 | mode: devmode ? 'development' : 'production', 81 | optimization: { 82 | moduleIds: 'natural', 83 | splitChunks: false, 84 | minimize: !devmode, 85 | minimizer: devmode ? [] : [new TerserPlugin({ 86 | terserOptions: { 87 | format: { 88 | comments: false, 89 | }, 90 | }, 91 | extractComments: false, 92 | })] 93 | }, 94 | performance: { hints: false }, 95 | devtool: "hidden-source-map", 96 | devServer: { 97 | static: { 98 | directory: __dirname, 99 | }, 100 | open: ['/test.html'], 101 | }, 102 | }; 103 | }; 104 | --------------------------------------------------------------------------------