From af008efc6330a03bf73aab3ffcd8174247d57f1b Mon Sep 17 00:00:00 2001 From: Sayan751 Date: Tue, 14 May 2019 19:24:36 +0200 Subject: [PATCH] Adding new npm scripts to have au-cli-less build Added details to the readme, on how to use the new stuffs --- default-ts-webpack-app/README.md | 24 +++++++++++++++++------- default-ts-webpack-app/package.json | 6 ++++-- default-ts-webpack-app/src/app.html | 2 ++ default-ts-webpack-app/src/my-el.html | 3 +++ default-ts-webpack-app/tsconfig.json | 5 +++-- default-ts-webpack-app/webpack.config.js | 18 ++++++++++-------- 6 files changed, 39 insertions(+), 19 deletions(-) create mode 100644 default-ts-webpack-app/src/my-el.html diff --git a/default-ts-webpack-app/README.md b/default-ts-webpack-app/README.md index d588d38..970cc67 100644 --- a/default-ts-webpack-app/README.md +++ b/default-ts-webpack-app/README.md @@ -1,24 +1,34 @@ # `default-ts-webpack-app` +#### Disclaimer: For this project the usual `au build` and `au run` may not produce desired results due to the change in `webpack.config.js` + This project is bootstrapped by [aurelia-cli](https://github.com/aurelia/cli). For more information, go to https://aurelia.io/docs/cli/webpack ## Run dev app -Run `au run`, then open `http://localhost:8080` +Run ~~`au run`~~ `npm start`, then open `http://localhost:8080` + +~~To open browser automatically, do `au run --open`.~~ + +~~To change dev server port, do `au run --port 8888`.~~ + +You can still change the standard webpack configurations from CLI easily with something like this: `npm start -- --open --port 8888`. If you have settled from your fling, change the `npm start` script with the new arguments, and you are back to the comfort of `npm start`. + +To enable Webpack Bundle Analyzer, do ~~`au run --analyze`~~ `npm run analyze` (for development build) or `npm run analyze -- --env.production` (for production build). -To open browser automatically, do `au run --open`. +~~To enable hot module reload, do `au run --hmr`.~~ HMR is enabled by default by `npm start`, if that does not float your boat or your elements are not reloaded correctly, then remove `--env.hmr` flag from `npm start` script. -To change dev server port, do `au run --port 8888`. +## Build for... -To enable Webpack Bundle Analyzer, do `au run --analyze`. +### ... production ... -To enable hot module reload, do `au run --hmr`. +Run ~~`au build --env prod`~~ `npm run build`. -## Build for production +### ... or development -Run `au build --env prod`. +Run `npm run build:dev` ## Unit tests diff --git a/default-ts-webpack-app/package.json b/default-ts-webpack-app/package.json index f251a54..d4d0c3b 100644 --- a/default-ts-webpack-app/package.json +++ b/default-ts-webpack-app/package.json @@ -53,8 +53,10 @@ "@types/jest": "^24.0.9" }, "scripts": { - "build": "au build", - "start": "au run", + "build": "webpack --env.production --env.extractCss", + "build:dev": "webpack --env.extractCss", + "analyze": "webpack --env.analyze", + "start": "webpack-dev-server --env.extractCss --env.hmr", "test": "au test" }, "engines": { diff --git a/default-ts-webpack-app/src/app.html b/default-ts-webpack-app/src/app.html index dfa5fbf..8543262 100644 --- a/default-ts-webpack-app/src/app.html +++ b/default-ts-webpack-app/src/app.html @@ -1,3 +1,5 @@ diff --git a/default-ts-webpack-app/src/my-el.html b/default-ts-webpack-app/src/my-el.html new file mode 100644 index 0000000..bc9b38d --- /dev/null +++ b/default-ts-webpack-app/src/my-el.html @@ -0,0 +1,3 @@ + \ No newline at end of file diff --git a/default-ts-webpack-app/tsconfig.json b/default-ts-webpack-app/tsconfig.json index 16dbe25..7178826 100644 --- a/default-ts-webpack-app/tsconfig.json +++ b/default-ts-webpack-app/tsconfig.json @@ -14,7 +14,8 @@ ], "moduleResolution": "node", "allowJs": true, - "baseUrl": "src" + "baseUrl": "src", + "typeRoots": ["node_modules/@types"] }, "include": [ "./src/**/*.ts", @@ -24,4 +25,4 @@ "atom": { "rewriteTsconfig": false } -} \ No newline at end of file +} diff --git a/default-ts-webpack-app/webpack.config.js b/default-ts-webpack-app/webpack.config.js index d6d6f79..8d69b4f 100644 --- a/default-ts-webpack-app/webpack.config.js +++ b/default-ts-webpack-app/webpack.config.js @@ -5,7 +5,7 @@ const MiniCssExtractPlugin = require('mini-css-extract-plugin'); const DuplicatePackageCheckerPlugin = require('duplicate-package-checker-webpack-plugin'); const project = require('./aurelia_project/aurelia.json'); const { AureliaPlugin, ModuleDependenciesPlugin } = require('aurelia-webpack-plugin'); -const { ProvidePlugin } = require('webpack'); +const { HotModuleReplacementPlugin, ProvidePlugin } = require('webpack'); const { BundleAnalyzerPlugin } = require('webpack-bundle-analyzer'); // config helpers: @@ -24,7 +24,7 @@ const cssRules = [ { loader: 'css-loader' }, ]; -module.exports = ({ production, server, extractCss, coverage, analyze, karma } = {}) => ({ +module.exports = ({ production, extractCss, analyze, tests, hmr } = {}) => ({ resolve: { extensions: ['.ts', '.js'], modules: [srcDir, 'node_modules'], @@ -104,7 +104,8 @@ module.exports = ({ production, server, extractCss, coverage, analyze, karma } = devServer: { contentBase: outDir, // serve index.html for all 404 (required for push-state) - historyApiFallback: true + historyApiFallback: true, + hot: hmr }, devtool: production ? 'nosources-source-map' : 'cheap-module-eval-source-map', module: { @@ -135,7 +136,7 @@ module.exports = ({ production, server, extractCss, coverage, analyze, karma } = { test: /\.woff(\?v=[0-9]\.[0-9]\.[0-9])?$/i, loader: 'url-loader', options: { limit: 10000, mimetype: 'application/font-woff' } }, // load these fonts normally, as files: { test: /\.(ttf|eot|svg|otf)(\?v=[0-9]\.[0-9]\.[0-9])?$/i, loader: 'file-loader' }, - ...when(coverage, { + ...when(tests, { test: /\.[jt]s$/i, loader: 'istanbul-instrumenter-loader', include: srcDir, exclude: [/\.(spec|test)\.[jt]s$/i], enforce: 'post', options: { esModules: true }, @@ -143,7 +144,7 @@ module.exports = ({ production, server, extractCss, coverage, analyze, karma } = ] }, plugins: [ - ...when(!karma, new DuplicatePackageCheckerPlugin()), + ...when(!tests, new DuplicatePackageCheckerPlugin()), new AureliaPlugin(), new ProvidePlugin({ }), @@ -154,7 +155,7 @@ module.exports = ({ production, server, extractCss, coverage, analyze, karma } = template: 'index.ejs', metadata: { // available in index.ejs // - title, server, baseUrl + title, baseUrl } }), // ref: https://webpack.js.org/plugins/mini-css-extract-plugin/ @@ -162,8 +163,9 @@ module.exports = ({ production, server, extractCss, coverage, analyze, karma } = filename: production ? 'css/[name].[contenthash].bundle.css' : 'css/[name].[hash].bundle.css', chunkFilename: production ? 'css/[name].[contenthash].chunk.css' : 'css/[name].[hash].chunk.css' })), - ...when(production || server, new CopyWebpackPlugin([ + ...when(!tests, new CopyWebpackPlugin([ { from: 'static', to: outDir, ignore: ['.*'] }])), // ignore dot (hidden) files - ...when(analyze, new BundleAnalyzerPlugin()) + ...when(analyze, new BundleAnalyzerPlugin()), + ...when(hmr, new HotModuleReplacementPlugin()), ] });