Skip to content
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.

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

enhancements: update docs and fix bin #122

Merged
merged 5 commits into from
May 8, 2017
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
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
36 changes: 36 additions & 0 deletions INIT.md
Original file line number Diff line number Diff line change
@@ -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`.
6 changes: 2 additions & 4 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -13,20 +13,18 @@

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 <config>`
`webpack-cli migrate <config>`

[Read more about migrating](MIGRATE.md)

## Creating new webpack projects

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-<package>]`
`webpack-cli init webpack-addons-<package>`

[Read more about scaffolding](SCAFFOLDING.md)
2 changes: 0 additions & 2 deletions SCAFFOLDING.md
Original file line number Diff line number Diff line change
Expand Up @@ -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.
Expand Down
12 changes: 8 additions & 4 deletions bin/webpack.js
Original file line number Diff line number Diff line change
Expand Up @@ -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);
}

Expand Down
8 changes: 7 additions & 1 deletion lib/creator/yeoman/webpack-generator.js
Original file line number Diff line number Diff line change
@@ -1,4 +1,5 @@
const Generator = require('yeoman-generator');
const chalk = require('chalk');

const createCommonsChunkPlugin = require('webpack-addons').createCommonsChunkPlugin;

Expand Down Expand Up @@ -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: []
};
Expand Down
2 changes: 1 addition & 1 deletion package.json
Original file line number Diff line number Diff line change
Expand Up @@ -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",
Expand Down