Skip to content
This repository has been archived by the owner on May 26, 2019. It is now read-only.

Commit

Permalink
Adding new npm scripts to have au-cli-less build
Browse files Browse the repository at this point in the history
Added details to the readme, on how to use the new stuffs
  • Loading branch information
Sayan751 committed May 14, 2019
1 parent 3ddd4fb commit af008ef
Show file tree
Hide file tree
Showing 6 changed files with 39 additions and 19 deletions.
24 changes: 17 additions & 7 deletions default-ts-webpack-app/README.md
Original file line number Diff line number Diff line change
@@ -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

Expand Down
6 changes: 4 additions & 2 deletions default-ts-webpack-app/package.json
Original file line number Diff line number Diff line change
Expand Up @@ -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": {
Expand Down
2 changes: 2 additions & 0 deletions default-ts-webpack-app/src/app.html
Original file line number Diff line number Diff line change
@@ -1,3 +1,5 @@
<template>
<require from="./my-el.html"></require>
<h1>${message}</h1>
<my-el></my-el>
</template>
3 changes: 3 additions & 0 deletions default-ts-webpack-app/src/my-el.html
Original file line number Diff line number Diff line change
@@ -0,0 +1,3 @@
<template>
This is a custom element for HMR POC. Change the content to see if the HMR is working.
</template>
5 changes: 3 additions & 2 deletions default-ts-webpack-app/tsconfig.json
Original file line number Diff line number Diff line change
Expand Up @@ -14,7 +14,8 @@
],
"moduleResolution": "node",
"allowJs": true,
"baseUrl": "src"
"baseUrl": "src",
"typeRoots": ["node_modules/@types"]
},
"include": [
"./src/**/*.ts",
Expand All @@ -24,4 +25,4 @@
"atom": {
"rewriteTsconfig": false
}
}
}
18 changes: 10 additions & 8 deletions default-ts-webpack-app/webpack.config.js
Original file line number Diff line number Diff line change
Expand Up @@ -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:
Expand All @@ -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'],
Expand Down Expand Up @@ -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: {
Expand Down Expand Up @@ -135,15 +136,15 @@ 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 },
})
]
},
plugins: [
...when(!karma, new DuplicatePackageCheckerPlugin()),
...when(!tests, new DuplicatePackageCheckerPlugin()),
new AureliaPlugin(),
new ProvidePlugin({
}),
Expand All @@ -154,16 +155,17 @@ 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/
...when(extractCss, new MiniCssExtractPlugin({ // updated to match the naming conventions for the js files
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()),
]
});

0 comments on commit af008ef

Please sign in to comment.