Skip to content

This should fix the missing option '--output-path' on webpack. #1627

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
TheLarkInn merged 3 commits into from
Aug 17, 2016
Merged

This should fix the missing option '--output-path' on webpack. #1627

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
87e22cc
This should fix the missing option '--output-path' on webpack.
Aug 10, 2016
7e1ff3a
Updated 'contentBase' in 'webpackDevServerConfiguration' at serve task.
Aug 16, 2016
2af0551
e2e test that checks if 'build --output-path' works properly
Aug 16, 2016
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
9 changes: 6 additions & 3 deletions addon/ng2/models/webpack-build-common.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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: {
Expand All @@ -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: {
Expand Down Expand Up @@ -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: outputPath
}])
],
node: {
Expand Down
5 changes: 3 additions & 2 deletions addon/ng2/models/webpack-build-development.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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'
Expand Down
7 changes: 4 additions & 3 deletions addon/ng2/models/webpack-build-mobile.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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',
Expand Down
5 changes: 3 additions & 2 deletions addon/ng2/models/webpack-build-production.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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'
Expand Down
10 changes: 5 additions & 5 deletions addon/ng2/models/webpack-config.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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);
Expand Down
2 changes: 1 addition & 1 deletion addon/ng2/tasks/build-webpack-watch.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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({
Expand Down
3 changes: 2 additions & 1 deletion addon/ng2/tasks/build-webpack.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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');
Expand Down
5 changes: 3 additions & 2 deletions addon/ng2/tasks/serve-webpack.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Copy link
Copy Markdown
Member

@TheLarkInn TheLarkInn Aug 15, 2016 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Content base property for webpack dev server needs to be set also. This I believe is pulled in from webpack-build-utils or is set when that object is pulled into the serve task.

Copy link
Copy Markdown
Contributor Author

@not-only-code not-only-code Aug 16, 2016 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

After some research, I saw that setting up contentBase in 'webpack-dev-server' configuration does not bundle the files into the desired folder. So i did use this plugin write-file-webpack-plugin which forces 'webpack-dev-server' to write a bundle folder.

Now ng serve will always output a bundle files (dist/ by default) as system.js did in previous versions.


// 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}/`);
Expand All @@ -27,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
Expand Down
12 changes: 12 additions & 0 deletions tests/e2e/e2e_workflow.spec.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down