webpack-cli init creates invalid config w/ Webpack v3.5.4: configuration.output.path: The provided value "public" is not an absolute path!

[pdehaan]

$ npm ls webpack
# firefox-send@1.1.0 /Users/pdehaan/dev/github/mozilla/send
# └── webpack@3.5.4

$ npm info webpack-cli version
# 1.3.3

$ npm version
# { 'firefox-send': '1.1.0',
#   npm: '5.3.0',
#   ares: '1.10.1-DEV',
#   cldr: '31.0.1',
#   http_parser: '2.7.0',
#   icu: '59.1',
#   modules: '57',
#   node: '8.3.0',
#   openssl: '1.0.2l',
#   tz: '2017b',
#   unicode: '9.0',
#   uv: '1.13.1',
#   v8: '6.0.286.52',
#   zlib: '1.2.11' }

---

Do you want to request a feature or report a bug?
Feels like a bug.

What is the current behavior?
Throws an error when running webpack-cli init then webpack --config webpack.prod.js (see below)

If the current behavior is a bug, please provide the steps to reproduce.
Ran $ npx webpack-cli init from Terminal and it generates an error when I run $(npm bin)/webpack --config webpack.prod.js:

$ webpack --config webpack.prod.js
Invalid configuration object. Webpack has been initialised using a configuration object that does not match the API schema.
 - `configuration.output.path`: The provided value "public" is not an absolute path!

What is the expected behavior?
Code generated by webpack-cli init should compile and run successfully.

If this is a feature request, what is motivation or use case for changing the behavior?

Using Node 8.3.0 on macOS Sierra.

% npx webpack-cli init

Insecure about some of the questions?

https://github.com/webpack/webpack-cli/blob/master/INIT.md

? Will your application have multiple bundles? Yes
? Type the name you want for your modules (entry files), separated by comma upload,download
? What is the location of 'upload'? frontend/src/upload.js
? What is the location of 'download'? frontend/src/download.js
? Which folder will your generated bundles be in? [default: dist]: public
? Are you going to use this in production? Yes
? Will you be using ES2015? Yes
? Will you use one of the below CSS solutions? PostCSS
? If you want to bundle your CSS files, what will you name the bundle? (press enter to skip) main.css
? Name your 'webpack.[name].js?' [default: 'prod']:

> husky@0.14.3 install /Users/pdehaan/dev/github/mozilla/send/node_modules/husky
> node ./bin/install.js

husky
setting up Git hooks
done


> uglifyjs-webpack-plugin@0.4.6 postinstall /Users/pdehaan/dev/github/mozilla/send/node_modules/uglifyjs-webpack-plugin
> node lib/post_install.js

+ babel-loader@7.1.1
+ babel-core@6.25.0
+ babel-preset-es2015@6.24.1
+ autoprefixer@7.1.2
+ uglifyjs-webpack-plugin@0.4.6
+ style-loader@0.18.2
+ webpack@3.5.4
+ postcss-loader@2.0.6
+ css-loader@0.28.4
+ extract-text-webpack-plugin@3.0.0
+ precss@2.0.0
added 118 packages, removed 12 packages and updated 7 packages in 17.466s

Congratulations! Your new webpack configuration file has been created!

% $(npm bin)/webpack --config webpack.prod.js
Invalid configuration object. Webpack has been initialised using a configuration object that does not match the API schema.
 - configuration.output.path: The provided value "public" is not an absolute path!

And here is my generated Webpack config (minus comments for brevity):

const webpack = require('webpack');
const path = require('path');
const UglifyJSPlugin = require('uglifyjs-webpack-plugin');
const autoprefixer = require('autoprefixer');
const precss = require('precss');
const ExtractTextPlugin = require('extract-text-webpack-plugin');

module.exports = {
  entry: {
    upload: 'frontend/src/upload.js',
    download: 'frontend/src/download.js'
  },

  output: {
    filename: '[name].[chunkhash].js',
    chunkFilename: '[name].[chunkhash].js',
    path: 'public'
  },

  module: {
    rules: [
      {
        test: /\.js$/,
        exclude: /node_modules/,
        loader: 'babel-loader',
        options: { presets: ['es2015'] }
      },
      {
        test: /\.css$/,
        use: ExtractTextPlugin.extract({
          use: [
            { loader: 'style-loader' },
            {
              loader: 'css-loader',
              options: {
                sourceMap: true,
                importLoaders: 1
              }
            },
            {
              loader: 'postcss-loader',
              options: {
                plugins: function() {
                  return [precss, autoprefixer];
                }
              }
            }
          ],
          fallback: 'style-loader'
        })
      }
    ]
  },

  plugins: [
    new UglifyJSPlugin(),
    new ExtractTextPlugin('main.css.[contentHash].css'),
    new webpack.optimize.CommonsChunkPlugin({
      name: 'upload',
      filename: 'upload-[hash].min.js'
    }),
    new webpack.optimize.CommonsChunkPlugin({
      name: 'download',
      filename: 'download-[hash].min.js'
    })
  ]
};

[evenstensberg]

Hm, weird.. This should have been fixed in #125 . Maybe we've forgotten to publish to npm, though less likely.

[pdehaan]

OK, I think I get it. If I accept the default target directory of dist, then the config outputs a path.join(). If I give a custom target directory (ie: dist2) then it uses that literal value without a path.join().

webpack-cli/lib/creator/yeoman/webpack-generator.js

Lines 77 to 80 in a69c7a9

	if(outputTypeAnswer['outputType'].length) {
	this.configuration.config.webpackOptions.output.path = `'${outputTypeAnswer['outputType']}'`;
	} else {
	this.configuration.config.webpackOptions.output.path = '\path.resolve(__dirname, \'dist\')';

---

  % $(npm bin)/webpack-cli init

  Insecure about some of the questions?

  https://github.com/webpack/webpack-cli/blob/master/INIT.md

  ? Will your application have multiple bundles? Yes
  ? Type the name you want for your modules (entry files), separated by comma upload,download
  ? What is the location of 'upload'? ./frontend/src/upload
  ? What is the location of 'download'? ./frontend/src/download
+ ? Which folder will your generated bundles be in? [default: dist]:
  ? Are you going to use this in production? Yes
  ? Will you be using ES2015? Yes
  ? Will you use one of the below CSS solutions? CSS
  ? If you want to bundle your CSS files, what will you name the bundle? (press enter to skip)
  ? Name your 'webpack.[name].js?' [default: 'prod']:

  # ...

  Congratulations! Your new webpack configuration file has been created!

Output:

	output: {
		filename: '[name].[chunkhash].js',
		chunkFilename: '[name].[chunkhash].js',
+ 		path: path.resolve(__dirname, 'dist')
	},

---

But with a custom output directory:

  % $(npm bin)/webpack-cli init

  Insecure about some of the questions?

  https://github.com/webpack/webpack-cli/blob/master/INIT.md

  ? Will your application have multiple bundles? Yes
  ? Type the name you want for your modules (entry files), separated by comma upload,download
  ? What is the location of 'upload'? ./frontend/src/upload
  ? What is the location of 'download'? ./frontend/src/download
- ? Which folder will your generated bundles be in? [default: dist]: dist2
  ? Are you going to use this in production? Yes
  ? Will you be using ES2015? Yes
  ? Will you use one of the below CSS solutions? CSS
  ? If you want to bundle your CSS files, what will you name the bundle? (press enter to skip)
  ? Name your 'webpack.[name].js?' [default: 'prod']:

  # ...

  Congratulations! Your new webpack configuration file has been created!

Output:

	output: {
		filename: '[name].[chunkhash].js',
		chunkFilename: '[name].[chunkhash].js',
-		path: 'dist2'
	},

[evenstensberg]

Yep, that's correct. It's a quick change. If you wanna submit a PR, I'd happy to help you! -

[pdehaan]

See PR #178