diff --git a/INIT.md b/INIT.md new file mode 100644 index 00000000000..38f480e6f3f --- /dev/null +++ b/INIT.md @@ -0,0 +1,36 @@ +## webpack init + +Through [yeoman](http://yeoman.io/), the `webpack-cli init` feature allows people to create scaffolds and generate new projects quickly. An npm dependency that scaffolds a `webpack.config.js` through `webpack-cli` is what we refer to as an **addon**. + +We ask several questions in the default generator to get you started. + +--- + +1. `Will you be creating multiple bundles? (Y/n)` + +What we are meaning here, is if you want to provide your bundle a single or multiple [entry points](https://webpack.js.org/configuration/entry-context/#entry). If you have only one entry to your app, answer yes. If you got more modules you want to bundle, answer no. + +2. `Which folder will your generated bundles be in? [default: dist]` + +This answers to the output directory of your application. The output directory is where servers or your `index.html` will read the generated bundle from. + +3. `Are you going to use this in production? (Y/n)` + +If you answer `Yes` to this, we add [`ExtractTextPlugin`](https://github.com/webpack-contrib/extract-text-webpack-plugin) to your project. This means that your style files will be separated in production from the bundles where they are used. If you answer `No`, we will not use the plugin, and `Question 6` will be ignored by default. + +4. `Will you be using ES2015? (Y/n)` + +If you answer `Yes` to this question, we will add [`ES2015`](https://babeljs.io/learn-es2015/) to your webpack configuration, which will allow you to use modern JavaScript in your project. + +5. `Will you use one of the below CSS solutions?` + +If you use any sort of style in your project, such as [`.less`](http://lesscss.org/), [`.scss`](http://sass-lang.com/), [`.css`](https://developer.mozilla.org/en-US/docs/Web/CSS) or [`postCSS`](http://postcss.org/) you will need to declare this here. If you don't use CSS, answer no. + +6. `If you want to bundle your CSS files, what will you name the bundle? (press +enter to skip)` + +If you answered `Yes` to `Question 3`, this will be enabled. The default value for your generated CSS file is `style.[contentHash].css`, which will collect all your `.less`, `.scss` or `.css` into one file. This will make your build faster in production. + +7. `Name your 'webpack.[name].js?' [default: 'prod/config']` + +If you answered `Yes` to `Question 3`, the default name of your configuration will be `webpack.prod.js`, otherwise it will be `webpack.config.js` if you don't answer. Other good options to answer to this question is: `dev`, `base`, `production` or `development`. diff --git a/README.md b/README.md index 7b93947cf2c..d15d1aa51d5 100644 --- a/README.md +++ b/README.md @@ -13,13 +13,11 @@ Webpack CLI encapsulates all code related to CLI handling. It captures options and sends them to webpack compiler. You can also find functionality for initializing a project and migrating between versions. For the time being, it is backwards-compatible with the CLI included in webpack itself. -**Note** The package is still in work in progress. In case you want to contribute, reach to us, so we can point you out how and when you can help us. - ## Migration from webpack v1 to v2 The `migrate` feature eases the transition from [version 1](http://webpack.github.io/docs/) to [version 2](https://gist.github.com/sokra/27b24881210b56bbaff7). `migrate` also allows users to switch to the new version of webpack without having to extensively [refactor](https://webpack.js.org/guides/migrating/). -`webpack-cli --migrate ` +`webpack-cli migrate ` [Read more about migrating](MIGRATE.md) @@ -27,6 +25,6 @@ The `migrate` feature eases the transition from [version 1](http://webpack.githu The `init` feature allows users to get started with webpack, fast. Through scaffolding, people can create their own configuration in order to faster initialize new projects for various of use cases. -`webpack-cli --init [webpack-addons-]` +`webpack-cli init webpack-addons-` [Read more about scaffolding](SCAFFOLDING.md) diff --git a/SCAFFOLDING.md b/SCAFFOLDING.md index f5d06e1734e..c428f5bea43 100644 --- a/SCAFFOLDING.md +++ b/SCAFFOLDING.md @@ -2,8 +2,6 @@ Setting up webpack for the first time is hard. Writing advanced configurations to optimize performance is even harder. The `init` feature is designed to support people that want to create their own configuration or initializing other projects people create. -Through [yeoman](http://yeoman.io/), the `webpack-cli --init` feature allows people to create scaffolds and generate new projects quickly. An npm dependency that scaffolds a `webpack.config.js` through `webpack-cli` is what we refer to as an **addon**. - ## Writing a good scaffold Before writing a `webpack-cli` scaffold, think about what you're trying to achieve. Do you want a "general" scaffold that could be used by any project or type of app? Do you want something very focused - like a scaffold that writes both your `webpack.config.js` and your framework code? It's also useful to think about the user experience for your scaffold. diff --git a/bin/webpack.js b/bin/webpack.js index 6cc71f70226..280744cb2cf 100755 --- a/bin/webpack.js +++ b/bin/webpack.js @@ -155,17 +155,21 @@ if(argv.verbose) { argv['display-cached'] = true; argv['display-cached-assets'] = true; } -if(argv.init) { - return require('../lib/initialize')(argv._); -} else if(argv.migrate) { - const filePaths = argv._; +if(argv._.includes('init')) { + const initPkgs = argv._.length === 1 ? [] : [argv._.pop()]; + + return require('../lib/initialize')(initPkgs); +} else if(argv._.includes('migrate')) { + const filePaths = argv._.length === 1 ? [] : [argv._.pop()]; if (!filePaths.length) { throw new Error('Please specify a path to your webpack config'); } const inputConfigPath = path.resolve(process.cwd(), filePaths[0]); + return require('../lib/migrate.js')(inputConfigPath, inputConfigPath); } else { var options = require('./convert-argv')(yargs, argv); + return processOptions(options); } diff --git a/lib/creator/yeoman/webpack-generator.js b/lib/creator/yeoman/webpack-generator.js index de4587356fc..8db4fd83eed 100644 --- a/lib/creator/yeoman/webpack-generator.js +++ b/lib/creator/yeoman/webpack-generator.js @@ -1,4 +1,5 @@ const Generator = require('yeoman-generator'); +const chalk = require('chalk'); const createCommonsChunkPlugin = require('webpack-addons').createCommonsChunkPlugin; @@ -30,7 +31,12 @@ module.exports = class WebpackGenerator extends Generator { let oneOrMoreEntries; let regExpForStyles; let ExtractUseProps; - + process.stdout.write( + '\n' + chalk.bold('Insecure about some of the questions?') + '\n' + ); + process.stdout.write( + `\n${chalk.bold.green('https://github.com/webpack/webpack-cli/blob/master/INIT.md')}\n\n` + ); this.configuration.config.webpackOptions.module = { rules: [] }; diff --git a/package.json b/package.json index 09eb408a60f..dc26f6094a9 100644 --- a/package.json +++ b/package.json @@ -48,7 +48,7 @@ "recast": "git://github.com/kalcifer/recast.git#bug/allowbreak", "resolve-cwd": "^2.0.0", "supports-color": "^3.1.2", - "webpack": "^2.2.0-rc.0", + "webpack": "^2.5.1", "webpack-addons": "^1.1.2", "yargs": "^6.5.0", "yeoman-environment": "^1.6.6",