From 87e22cc8b09686a80865a6619f6b017d2b44d7f7 Mon Sep 17 00:00:00 2001 From: Carlos Sanz Garcia Date: Thu, 11 Aug 2016 01:11:49 +0200 Subject: [PATCH 1/3] This should fix the missing option '--output-path' on webpack. --- addon/ng2/models/webpack-build-common.ts | 9 ++++++--- addon/ng2/models/webpack-build-development.ts | 5 +++-- addon/ng2/models/webpack-build-mobile.ts | 7 ++++--- addon/ng2/models/webpack-build-production.ts | 5 +++-- addon/ng2/models/webpack-config.ts | 10 +++++----- addon/ng2/tasks/build-webpack-watch.ts | 2 +- addon/ng2/tasks/build-webpack.ts | 3 ++- addon/ng2/tasks/serve-webpack.ts | 3 ++- 8 files changed, 26 insertions(+), 18 deletions(-) diff --git a/addon/ng2/models/webpack-build-common.ts b/addon/ng2/models/webpack-build-common.ts index 2e888f72b429..e27b2cecdb45 100644 --- a/addon/ng2/models/webpack-build-common.ts +++ b/addon/ng2/models/webpack-build-common.ts @@ -5,7 +5,10 @@ import * as webpack from 'webpack'; import { ForkCheckerPlugin } from 'awesome-typescript-loader'; import { CliConfig } from './config'; -export function getWebpackCommonConfig(projectRoot: string, sourceDir: string) { +export function getWebpackCommonConfig(projectRoot: string, sourceDir: string, outputDir: string) { + + let outputPath: string = path.resolve(projectRoot, outputDir); + return { devtool: 'source-map', resolve: { @@ -18,7 +21,7 @@ export function getWebpackCommonConfig(projectRoot: string, sourceDir: string) { polyfills: path.resolve(projectRoot, `./${sourceDir}/polyfills.ts`) }, output: { - path: path.resolve(projectRoot, './dist'), + path: outputPath, filename: '[name].bundle.js' }, module: { @@ -66,7 +69,7 @@ export function getWebpackCommonConfig(projectRoot: string, sourceDir: string) { new CopyWebpackPlugin([{ context: path.resolve(projectRoot, './public'), from: '**/*', - to: path.resolve(projectRoot, './dist') + to: path.resolve(projectRoot, outputPath) }]) ], node: { diff --git a/addon/ng2/models/webpack-build-development.ts b/addon/ng2/models/webpack-build-development.ts index 15feea54287b..e1ffa729bfa7 100644 --- a/addon/ng2/models/webpack-build-development.ts +++ b/addon/ng2/models/webpack-build-development.ts @@ -1,12 +1,13 @@ import { CliConfig } from './config'; const path = require('path') -export const getWebpackDevConfigPartial = function(projectRoot: string, sourceDir: string) { +export const getWebpackDevConfigPartial = function(projectRoot: string, sourceDir: string, outputDir: string) { + return { debug: true, devtool: 'source-map', output: { - path: path.resolve(projectRoot, './dist'), + path: path.resolve(projectRoot, outputDir), filename: '[name].bundle.js', sourceMapFilename: '[name].map', chunkFilename: '[id].chunk.js' diff --git a/addon/ng2/models/webpack-build-mobile.ts b/addon/ng2/models/webpack-build-mobile.ts index 0eb18933ddcb..8930f52f391f 100644 --- a/addon/ng2/models/webpack-build-mobile.ts +++ b/addon/ng2/models/webpack-build-mobile.ts @@ -5,12 +5,13 @@ import * as CopyWebpackPlugin from 'copy-webpack-plugin'; import { PrerenderWebpackPlugin } from '../utilities/prerender-webpack-plugin.ts'; import { CliConfig } from './config'; -export const getWebpackMobileConfigPartial = function (projectRoot: string, sourceDir: string) { +export const getWebpackMobileConfigPartial = function (projectRoot: string, sourceDir: string, outputDir: string) { + let outputPath: string = path.resolve(projectRoot, outputDir); return { plugins: [ new CopyWebpackPlugin([ - {from: path.resolve(projectRoot, `./${sourceDir}/icons`), to: path.resolve(projectRoot, './dist/icons')}, - {from: path.resolve(projectRoot, `./${sourceDir}/manifest.webapp`), to: path.resolve(projectRoot, './dist')} + {from: path.resolve(projectRoot, `./${sourceDir}/icons`), to: path.resolve(outputPath, './icons')}, + {from: path.resolve(projectRoot, `./${sourceDir}/manifest.webapp`), to: outputPath} ]), new PrerenderWebpackPlugin({ templatePath: 'index.html', diff --git a/addon/ng2/models/webpack-build-production.ts b/addon/ng2/models/webpack-build-production.ts index ba7b1ef4fcb6..db51c6b85b17 100644 --- a/addon/ng2/models/webpack-build-production.ts +++ b/addon/ng2/models/webpack-build-production.ts @@ -5,12 +5,13 @@ import * as CompressionPlugin from 'compression-webpack-plugin'; import * as webpack from 'webpack'; import { CliConfig } from './config'; -export const getWebpackProdConfigPartial = function(projectRoot: string, sourceDir: string) { +export const getWebpackProdConfigPartial = function(projectRoot: string, sourceDir: string, outputDir: string) { + return { debug: false, devtool: 'source-map', output: { - path: path.resolve(projectRoot, './dist'), + path: path.resolve(projectRoot, outputDir), filename: '[name].[chunkhash].bundle.js', sourceMapFilename: '[name].[chunkhash].bundle.map', chunkFilename: '[id].[chunkhash].chunk.js' diff --git a/addon/ng2/models/webpack-config.ts b/addon/ng2/models/webpack-config.ts index a215217c0afa..7dcd586d898f 100644 --- a/addon/ng2/models/webpack-config.ts +++ b/addon/ng2/models/webpack-config.ts @@ -23,17 +23,17 @@ export class NgCliWebpackConfig { private webpackMobileConfigPartial: any; private webpackMobileProdConfigPartial: any; - constructor(public ngCliProject: any, public target: string, public environment: string) { + constructor(public ngCliProject: any, public target: string, public environment: string, outputDir: string) { const sourceDir = CliConfig.fromProject().defaults.sourceDir; const environmentPath = `./${sourceDir}/app/environments/environment.${environment}.ts`; - this.webpackBaseConfig = getWebpackCommonConfig(this.ngCliProject.root, sourceDir); - this.webpackDevConfigPartial = getWebpackDevConfigPartial(this.ngCliProject.root, sourceDir); - this.webpackProdConfigPartial = getWebpackProdConfigPartial(this.ngCliProject.root, sourceDir); + this.webpackBaseConfig = getWebpackCommonConfig(this.ngCliProject.root, sourceDir, outputDir); + this.webpackDevConfigPartial = getWebpackDevConfigPartial(this.ngCliProject.root, sourceDir, outputDir); + this.webpackProdConfigPartial = getWebpackProdConfigPartial(this.ngCliProject.root, sourceDir, outputDir); if (CliConfig.fromProject().apps[0].mobile){ - this.webpackMobileConfigPartial = getWebpackMobileConfigPartial(this.ngCliProject.root, sourceDir); + this.webpackMobileConfigPartial = getWebpackMobileConfigPartial(this.ngCliProject.root, sourceDir, outputDir); this.webpackMobileProdConfigPartial = getWebpackMobileProdConfigPartial(this.ngCliProject.root, sourceDir); this.webpackBaseConfig = webpackMerge(this.webpackBaseConfig, this.webpackMobileConfigPartial); this.webpackProdConfigPartial = webpackMerge(this.webpackProdConfigPartial, this.webpackMobileProdConfigPartial); diff --git a/addon/ng2/tasks/build-webpack-watch.ts b/addon/ng2/tasks/build-webpack-watch.ts index 7e6514c6513f..911b6f3b0936 100644 --- a/addon/ng2/tasks/build-webpack-watch.ts +++ b/addon/ng2/tasks/build-webpack-watch.ts @@ -16,7 +16,7 @@ module.exports = Task.extend({ rimraf.sync(path.resolve(project.root, runTaskOptions.outputPath)); - const config = new NgCliWebpackConfig(project, runTaskOptions.target, runTaskOptions.environment).config; + const config = new NgCliWebpackConfig(project, runTaskOptions.target, runTaskOptions.environment, runTaskOptions.outputPath).config; const webpackCompiler = webpack(config); webpackCompiler.apply(new ProgressPlugin({ diff --git a/addon/ng2/tasks/build-webpack.ts b/addon/ng2/tasks/build-webpack.ts index 8d98d76a6812..fe0ec60fe59f 100644 --- a/addon/ng2/tasks/build-webpack.ts +++ b/addon/ng2/tasks/build-webpack.ts @@ -16,7 +16,8 @@ module.exports = Task.extend({ var project = this.cliProject; rimraf.sync(path.resolve(project.root, runTaskOptions.outputPath)); - var config = new NgCliWebpackConfig(project, runTaskOptions.target, runTaskOptions.environment).config; + var config = new NgCliWebpackConfig(project, runTaskOptions.target, runTaskOptions.environment, runTaskOptions.outputPath).config; + const webpackCompiler = webpack(config); const ProgressPlugin = require('webpack/lib/ProgressPlugin'); diff --git a/addon/ng2/tasks/serve-webpack.ts b/addon/ng2/tasks/serve-webpack.ts index 60589e48c011..52a188e9b049 100644 --- a/addon/ng2/tasks/serve-webpack.ts +++ b/addon/ng2/tasks/serve-webpack.ts @@ -15,7 +15,8 @@ module.exports = Task.extend({ let lastHash = null; let webpackCompiler: any; - var config: NgCliWebpackConfig = new NgCliWebpackConfig(this.project, commandOptions.target, commandOptions.environment).config; + var config: NgCliWebpackConfig = new NgCliWebpackConfig(this.project, commandOptions.target, commandOptions.environment, commandOptions.outputPath).config; + // This allows for live reload of page when changes are made to repo. // https://webpack.github.io/docs/webpack-dev-server.html#inline-mode config.entry.main.unshift(`webpack-dev-server/client?http://${commandOptions.host}:${commandOptions.port}/`); From 7e1ff3a59fe21fcefb92c16ffe4aef640c81e74d Mon Sep 17 00:00:00 2001 From: Carlos Sanz Garcia Date: Wed, 17 Aug 2016 01:37:58 +0200 Subject: [PATCH 2/3] Updated 'contentBase' in 'webpackDevServerConfiguration' at serve task. --- addon/ng2/models/webpack-build-common.ts | 2 +- addon/ng2/tasks/serve-webpack.ts | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/addon/ng2/models/webpack-build-common.ts b/addon/ng2/models/webpack-build-common.ts index e27b2cecdb45..3e56c9b58ead 100644 --- a/addon/ng2/models/webpack-build-common.ts +++ b/addon/ng2/models/webpack-build-common.ts @@ -69,7 +69,7 @@ export function getWebpackCommonConfig(projectRoot: string, sourceDir: string, o new CopyWebpackPlugin([{ context: path.resolve(projectRoot, './public'), from: '**/*', - to: path.resolve(projectRoot, outputPath) + to: outputPath }]) ], node: { diff --git a/addon/ng2/tasks/serve-webpack.ts b/addon/ng2/tasks/serve-webpack.ts index 52a188e9b049..f8e74662d785 100644 --- a/addon/ng2/tasks/serve-webpack.ts +++ b/addon/ng2/tasks/serve-webpack.ts @@ -28,7 +28,7 @@ module.exports = Task.extend({ })); const webpackDevServerConfiguration: IWebpackDevServerConfigurationOptions = { - contentBase: path.resolve(this.project.root, `./${CliConfig.fromProject().defaults.sourceDir}`), + contentBase: config.output.path, historyApiFallback: true, stats: webpackDevServerOutputOptions, inline: true From 2af0551e9a153731a7eadcdeca39372a97bfc98f Mon Sep 17 00:00:00 2001 From: Carlos Sanz Garcia Date: Wed, 17 Aug 2016 01:37:51 +0200 Subject: [PATCH 3/3] e2e test that checks if 'build --output-path' works properly --- tests/e2e/e2e_workflow.spec.js | 12 ++++++++++++ 1 file changed, 12 insertions(+) diff --git a/tests/e2e/e2e_workflow.spec.js b/tests/e2e/e2e_workflow.spec.js index d4522f6e4725..0ec50afe5d0f 100644 --- a/tests/e2e/e2e_workflow.spec.js +++ b/tests/e2e/e2e_workflow.spec.js @@ -144,6 +144,18 @@ describe('Basic end-to-end Workflow', function () { }); }); + it('Build pack output files into a different folder', function () { + this.timeout(420000); + + return ng(['build', '-o', './build-output']) + .catch(() => { + throw new Error('Build failed.'); + }) + .then(function () { + expect(existsSync(path.join(process.cwd(), './build-output'))).to.be.equal(true); + }); + }); + it_mobile('Does not include mobile prod features', () => { let index = fs.readFileSync(path.join(process.cwd(), 'dist/index.html'), 'utf-8'); // Service Worker