Merge pull request #715 from JeroenVinke/fix/webpack

Fix/webpack

lib/commands/new/buildsystems/webpack/index.js

@@ -36,7 +36,8 @@ module.exports = function(project, options) {
     ProjectItem.resource('build.ext', 'tasks/build-webpack.ext', project.model.transpiler),
     ProjectItem.resource('build.json', 'tasks/build.json'),
     ProjectItem.resource('run.ext', 'tasks/run-webpack.ext', project.model.transpiler),
-    ProjectItem.resource('run.json', 'tasks/run-webpack.json')
+    ProjectItem.resource('run.json', 'tasks/run-webpack.json'),
+    ProjectItem.resource('environment.ext', 'tasks/environment.ext', project.model.transpiler),
   ).addToContent(
     ProjectItem.resource('index.ejs', 'content/index-webpack.ejs'),
     ProjectItem.resource('package-scripts.js', 'content/package-scripts.template.js')
@@ -45,6 +46,7 @@ module.exports = function(project, options) {
     ProjectItem.resource('webpack.config.js', 'content/webpack.config.template.js')
       .asTemplate(model)
   ).addToDevDependencies(
+    'gulp-rename',
     'html-webpack-plugin',
     'copy-webpack-plugin',
     'extract-text-webpack-plugin',

lib/commands/new/new-application.json

@@ -201,7 +201,7 @@
           "options": {
             "server": "dev",
             "extractCss": "prod",
-            "coverage": "dev"
+            "coverage": false
           }
         },
         "unitTestRunner": [{

lib/resources/content/tsconfig.template.json

@@ -1,6 +1,7 @@
 {
   "compileOnSave": false,
   "compilerOptions": {
+    // @if bundler.id='cli'
     "sourceMap": true,
     "target": "es5",
     "module": "amd",
@@ -11,8 +12,22 @@
     "experimentalDecorators": true,
     "allowJs": true,
     "moduleResolution": "node",
-    "lib": ["es2017", "dom"],
-    "skipLibCheck": true
+    "lib": ["es2017", "dom"]
+    // @endif
+    // @if bundler.id='webpack'
+    "target": "es5",
+    "module": "esnext",
+    "emitDecoratorMetadata": true,
+    "experimentalDecorators": true,
+    "moduleResolution": "node",
+    "sourceRoot": "src",
+    "allowJs": true,
+    "baseUrl": "src",
+    "skipLibCheck": true,
+    "lib": [
+      "es2017", "dom"
+    ]
+    // @endif
   },
   "exclude": [
     "node_modules",

lib/resources/content/webpack.config.template.js

@@ -57,6 +57,7 @@ module.exports = ({production, server, extractCss, coverage} = {}) => ({
     // serve index.html for all 404 (required for push-state)
     historyApiFallback: true
   },
+  devtool: production ? 'nosources-source-map' : 'cheap-module-eval-source-map',
   module: {
     rules: [
       // CSS required in JS/TS files should use the style-loader that auto-injects it into the website

lib/resources/tasks/build-webpack.js

@@ -2,21 +2,27 @@ import webpackConfig from '../../webpack.config';
 import webpack from 'webpack';
 import project from '../aurelia.json';
 import {CLIOptions, Configuration} from 'aurelia-cli';
+import gulp from 'gulp';
+import configureEnvironment from './environment';
 
 const buildOptions = new Configuration(project.build.options);
-const isProd = CLIOptions.getEnvironment() === 'prod';
+const production = CLIOptions.getEnvironment() === 'prod';
 const server = buildOptions.isApplicable('server');
 const extractCss = buildOptions.isApplicable('extractCss');
 const coverage = buildOptions.isApplicable('coverage');
 
 const config = webpackConfig({
-  isProd, server, extractCss, coverage
+  production, server, extractCss, coverage
 });
 const compiler = webpack(config);
 
-function build(done) {
-  compiler.run(onBuild);
-  compiler.plugin('done', () => done());
+function buildWebpack(done) {
+  if (CLIOptions.hasFlag('watch')) {
+    compiler.watch({}, onBuild);
+  } else {
+    compiler.run(onBuild);
+    compiler.plugin('done', () => done());
+  }
 }
 
 function onBuild(err, stats) {
@@ -29,7 +35,13 @@ function onBuild(err, stats) {
   }
 }
 
+const build = gulp.series(
+  configureEnvironment,
+  buildWebpack
+);
+
 export {
   config,
+  buildWebpack,
   build as default
 };

lib/resources/tasks/build-webpack.ts

@@ -2,21 +2,27 @@ import * as webpackConfig from '../../webpack.config';
 import * as webpack from 'webpack';
 import * as project from '../aurelia.json';
 import {CLIOptions, Configuration} from 'aurelia-cli';
+import * as gulp from 'gulp';
+import configureEnvironment from './environment';
 
 const buildOptions = new Configuration(project.build.options);
-const isProd = CLIOptions.getEnvironment() === 'prod';
+const production = CLIOptions.getEnvironment() === 'prod';
 const server = buildOptions.isApplicable('server');
 const extractCss = buildOptions.isApplicable('extractCss');
 const coverage = buildOptions.isApplicable('coverage');
 
 const config = webpackConfig({
-  isProd, server, extractCss, coverage
+  production, server, extractCss, coverage
 });
-const compiler = webpack(config);
+const compiler = webpack(<any>config);
 
-function build(done) {
-  compiler.run(onBuild);
-  compiler.plugin('done', () => done());
+function buildWebpack(done) {
+  if (CLIOptions.hasFlag('watch')) {
+    compiler.watch({}, onBuild);
+  } else {
+    compiler.run(onBuild);
+    compiler.plugin('done', () => done());
+  }
 }
 
 function onBuild(err, stats) {
@@ -29,7 +35,13 @@ function onBuild(err, stats) {
   }
 }
 
+const build = gulp.series(
+  configureEnvironment,
+  buildWebpack
+);
+
 export {
   config,
+  buildWebpack,
   build as default
 };

lib/resources/tasks/environment.js

@@ -0,0 +1,24 @@
+import project from '../aurelia.json';
+import rename from 'gulp-rename';
+import {CLIOptions} from 'aurelia-cli';
+import gulp from 'gulp';
+import fs from 'fs';
+import path from 'path';
+import through from 'through2';
+
+function configureEnvironment() {
+  let env = CLIOptions.getEnvironment();
+
+  return gulp.src(`aurelia_project/environments/${env}${project.transpiler.fileExtension}`)
+    .pipe(rename(`environment${project.transpiler.fileExtension}`))
+    .pipe(gulp.dest(project.paths.root))
+    .pipe(through.obj(function (file, enc,  cb) {
+      // https://github.com/webpack/watchpack/issues/25#issuecomment-287789288
+      var now = Date.now() / 1000;
+      var then = now - 10;
+      fs.utimes(file.path, then, then, function (err) { if (err) throw err });
+      cb(null, file);
+    }));
+}
+
+export default configureEnvironment;

lib/resources/tasks/environment.ts

@@ -0,0 +1,24 @@
+import * as project from '../aurelia.json';
+import * as rename from 'gulp-rename';
+import {CLIOptions} from 'aurelia-cli';
+import * as gulp from 'gulp';
+import * as fs from 'fs';
+import path from 'path';
+import * as through from 'through2';
+
+function configureEnvironment() {
+  let env = CLIOptions.getEnvironment();
+
+  return gulp.src(`aurelia_project/environments/${env}${project.transpiler.fileExtension}`)
+    .pipe(rename(`environment${project.transpiler.fileExtension}`))
+    .pipe(gulp.dest(project.paths.root))
+    .pipe(through.obj(function (file, enc,  cb) {
+      // https://github.com/webpack/watchpack/issues/25#issuecomment-287789288
+      var now = Date.now() / 1000;
+      var then = now - 10;
+      fs.utimes(file.path, then, then, function (err) { if (err) throw err });
+      cb(null, file);
+    }));
+}
+
+export default configureEnvironment;

lib/resources/tasks/run-webpack.js

@@ -1,11 +1,13 @@
 import {config} from './build';
+import configureEnvironment from './environment';
 import webpack from 'webpack';
 import Server from 'webpack-dev-server';
 import project from '../aurelia.json';
 import {CLIOptions, reportWebpackReadiness} from 'aurelia-cli';
-import build from './build';
+import gulp from 'gulp';
+import {buildWebpack} from './build';
 
-function run(done) {
+function runWebpack(done) {
   // https://webpack.github.io/docs/webpack-dev-server.html
   let opts = {
     host: 'localhost',
@@ -37,7 +39,7 @@ function run(done) {
     if (err) throw err;
 
     if (opts.lazy) {
-      build(() => {
+      buildWebpack(() => {
         reportWebpackReadiness(opts);
         done();
       });
@@ -48,4 +50,9 @@ function run(done) {
   });
 }
 
+const run = gulp.series(
+  configureEnvironment,
+  runWebpack
+);
+
 export { run as default };

lib/resources/tasks/run-webpack.ts

@@ -1,11 +1,13 @@
 import {config} from './build';
+import configureEnvironment from './environment';
 import * as webpack from 'webpack';
 import * as Server from 'webpack-dev-server';
 import * as project from '../aurelia.json';
 import {CLIOptions, reportWebpackReadiness} from 'aurelia-cli';
-import build from './build';
+import * as gulp from 'gulp';
+import {buildWebpack} from './build';
 
-function run(done) {
+function runWebpack(done) {
   // https://webpack.github.io/docs/webpack-dev-server.html
   let opts = {
     host: 'localhost',
@@ -37,7 +39,7 @@ function run(done) {
     if (err) throw err;
 
     if (opts.lazy) {
-      build(() => {
+      buildWebpack(() => {
         reportWebpackReadiness(opts);
         done();
       });
@@ -48,4 +50,9 @@ function run(done) {
   });
 }
 
+const run = gulp.series(
+  configureEnvironment,
+  runWebpack
+);
+
 export { run as default };