From ec1b84cb5afcd2b6a8733043cf60819ca28311e2 Mon Sep 17 00:00:00 2001 From: Even Stensberg Date: Fri, 14 Apr 2017 21:06:36 +0200 Subject: [PATCH 01/14] chore: init --- README.md | 7 ++----- 1 file changed, 2 insertions(+), 5 deletions(-) diff --git a/README.md b/README.md index cfe291bcb49..0690e98b702 100644 --- a/README.md +++ b/README.md @@ -15,9 +15,6 @@ This project intends to be the main cli package of webpack. Here we will encapsu **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. +# Table of Content -# Roadmap to the first release - -- Migrate to webpack-cli all the current cli options available in webpack -- Create a `webpack-cli init` command that serves to set a configuration of webpack to the user -- create a `webpack-cli migrate` command that serves to migrate an existing configuration from webpack 1 to webpack 2. +1. [Introduction](#introduction) From 0e438aa3cc7455f4b6301eb7350a6ce88ebb5636 Mon Sep 17 00:00:00 2001 From: Even Stensberg Date: Fri, 14 Apr 2017 23:35:56 +0200 Subject: [PATCH 02/14] chore: add section about init and migrate --- README.md | 18 +++++++++++++++--- 1 file changed, 15 insertions(+), 3 deletions(-) diff --git a/README.md b/README.md index 0690e98b702..d168d5001fb 100644 --- a/README.md +++ b/README.md @@ -11,10 +11,22 @@ # Webpack CLI -This project intends to be the main cli package of webpack. Here we will encapsulate all the features and code related to the command line. From sending options to the compiler, to initialize and migrate from version to version. +This project intends to be the main cli package of webpack. Here we will encapsulate all the features and code related to the command line. From sending options to the compiler, to initialize and migrate from version to version. To avoid breaking changes and making people unhappy, we are keeping the old features. While we keep the old features, we've added some other, `init`and `migrate`. **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. -# Table of Content +## Migration from webpack v1 to v2 -1. [Introduction](#introduction) +The `migrate` feature aims to ease the transition version 1, to version 2 of webpack. This feature will allow users to switch to the new version of webpack, without having to refactor themselves. + +`webpack --migrate ` + +[Read more about migrating]() + +## 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 --init [webpack-addons-]` + +[Read more about scaffolding]() From 80f165fc5da60a20c560f0952ae4c679971ef9be Mon Sep 17 00:00:00 2001 From: Even Stensberg Date: Fri, 14 Apr 2017 23:39:56 +0200 Subject: [PATCH 03/14] chore: add migrate and scaffold link --- README.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/README.md b/README.md index d168d5001fb..a0a1175a509 100644 --- a/README.md +++ b/README.md @@ -21,7 +21,7 @@ The `migrate` feature aims to ease the transition version 1, to version 2 of web `webpack --migrate ` -[Read more about migrating]() +[Read more about migrating](MIGRATE.md) ## Creating new webpack projects @@ -29,4 +29,4 @@ The `init` feature allows users to get started with webpack, fast. Through scaff `webpack --init [webpack-addons-]` -[Read more about scaffolding]() +[Read more about scaffolding](SCAFFOLDING.md) From e50e604d1e3306bbe1439a4188c7d60b826f9dbf Mon Sep 17 00:00:00 2001 From: Even Stensberg Date: Fri, 14 Apr 2017 23:40:18 +0200 Subject: [PATCH 04/14] Create SCAFFOLDING.md --- SCAFFOLDING.md | 1 + 1 file changed, 1 insertion(+) create mode 100644 SCAFFOLDING.md diff --git a/SCAFFOLDING.md b/SCAFFOLDING.md new file mode 100644 index 00000000000..8b137891791 --- /dev/null +++ b/SCAFFOLDING.md @@ -0,0 +1 @@ + From 61e3676d121f9c876121cda0fde072639c8ab82b Mon Sep 17 00:00:00 2001 From: Even Stensberg Date: Fri, 14 Apr 2017 23:40:49 +0200 Subject: [PATCH 05/14] Create MIGRATE.md --- MIGRATE.md | 1 + 1 file changed, 1 insertion(+) create mode 100644 MIGRATE.md diff --git a/MIGRATE.md b/MIGRATE.md new file mode 100644 index 00000000000..8b137891791 --- /dev/null +++ b/MIGRATE.md @@ -0,0 +1 @@ + From 6b78d84340b641c2b7eecd4401e9a5984d6fa575 Mon Sep 17 00:00:00 2001 From: Even Stensberg Date: Sat, 15 Apr 2017 00:06:08 +0200 Subject: [PATCH 06/14] chore: add docs on scaffolding --- SCAFFOLDING.md | 16 ++++++++++++++++ 1 file changed, 16 insertions(+) diff --git a/SCAFFOLDING.md b/SCAFFOLDING.md index 8b137891791..7e87437e1e9 100644 --- a/SCAFFOLDING.md +++ b/SCAFFOLDING.md @@ -1 +1,17 @@ +# Introduction +Let's face it. Setting up webpack for the first time is hard. Writing advanced configurations like support for [PWA](https://developers.google.com/web/progressive-web-apps/)'s are even harder. The `init` feature is designed to support people to create their own configuration or initializing other projects people have created. + +Through yeoman, the `webpack --init` feature allows people to create scaffolds and generate new projects quickly, or to integrate a scaffold with other tools. A dependency with an scaffold, is what we refer to as an **addon**. + +## Writing a good scaffold + +Before writing any code, you should analyze your purpose for the scaffold. Should it be generalistic? Should it be targeted for a library, such as [react](https://facebook.github.io/react/)? Furthermore, you should decide if you want to ask users for your scaffold such as **"What is your entry point?"**. Through yeoman, we support building up a configuration based on user interactions. You can also avoid any input from the user if you simply want to create a configuration to start working with. + +## API + +To build a great scaffold, you got to know the API. As we are running the scaffolding through yeoman, we support [their API](http://yeoman.io/learning/). + +To create an addon, you create a [`yeoman-generator`](http://yeoman.io/authoring/). In the generator, you can create all the properties webpack has, as well as custom logic on top. + +[How do I compose a webpack-addon?]() From 92f1b988542b5c841b1c9e550865fb6d132cb016 Mon Sep 17 00:00:00 2001 From: Even Stensberg Date: Sat, 15 Apr 2017 00:12:30 +0200 Subject: [PATCH 07/14] chore: add initial on addons --- SCAFFOLDING.md | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/SCAFFOLDING.md b/SCAFFOLDING.md index 7e87437e1e9..747c285780b 100644 --- a/SCAFFOLDING.md +++ b/SCAFFOLDING.md @@ -14,4 +14,6 @@ To build a great scaffold, you got to know the API. As we are running the scaffo To create an addon, you create a [`yeoman-generator`](http://yeoman.io/authoring/). In the generator, you can create all the properties webpack has, as well as custom logic on top. -[How do I compose a webpack-addon?]() +Before going forward, please read [How do I compose a webpack-addon?]() + +## webpack-addons From bcbf6806afc26fa12f87ad7b0fc3661308ff2828 Mon Sep 17 00:00:00 2001 From: Even Stensberg Date: Thu, 27 Apr 2017 19:27:15 +0200 Subject: [PATCH 08/14] chore: fix initial documentation MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Also fixes some text at «Scaffolding» --- README.md | 4 ++-- SCAFFOLDING.md | 25 +++++++++++++++++-------- 2 files changed, 19 insertions(+), 10 deletions(-) diff --git a/README.md b/README.md index a0a1175a509..00dcf63b1f7 100644 --- a/README.md +++ b/README.md @@ -11,13 +11,13 @@ # Webpack CLI -This project intends to be the main cli package of webpack. Here we will encapsulate all the features and code related to the command line. From sending options to the compiler, to initialize and migrate from version to version. To avoid breaking changes and making people unhappy, we are keeping the old features. While we keep the old features, we've added some other, `init`and `migrate`. +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 aims to ease the transition version 1, to version 2 of webpack. This feature will allow users to switch to the new version of webpack, without having to refactor themselves. +The `migrate` feature eases the transition from version 1, to version 2 of webpack. This feature allows users to switch to the new version of webpack, without having to refactor themselves. `webpack --migrate ` diff --git a/SCAFFOLDING.md b/SCAFFOLDING.md index 747c285780b..6e6f35784ad 100644 --- a/SCAFFOLDING.md +++ b/SCAFFOLDING.md @@ -1,19 +1,28 @@ # Introduction -Let's face it. Setting up webpack for the first time is hard. Writing advanced configurations like support for [PWA](https://developers.google.com/web/progressive-web-apps/)'s are even harder. The `init` feature is designed to support people to create their own configuration or initializing other projects people have created. +Setting up webpack for the first time is hard. Writing advanced configurations like offline support for [PWA](https://developers.google.com/web/progressive-web-apps/)'s are 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, the `webpack --init` feature allows people to create scaffolds and generate new projects quickly, or to integrate a scaffold with other tools. A dependency with an scaffold, is what we refer to as an **addon**. +Through yeoman, the `webpack --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 any code, you should analyze your purpose for the scaffold. Should it be generalistic? Should it be targeted for a library, such as [react](https://facebook.github.io/react/)? Furthermore, you should decide if you want to ask users for your scaffold such as **"What is your entry point?"**. Through yeoman, we support building up a configuration based on user interactions. You can also avoid any input from the user if you simply want to create a configuration to start working with. +Before writing any code, you should analyze your purpose for the scaffold. Should it be generalistic? Should it be targeted for a library, such as [react](https://facebook.github.io/react/)? Furthermore, you should decide if you want to ask users for your scaffold such as **"What is your entry point?"**, or scaffold a boilerplate. -## API +## webpack-addons -To build a great scaffold, you got to know the API. As we are running the scaffolding through yeoman, we support [their API](http://yeoman.io/learning/). +[`webpack-addons`](https://github.com/webpack-contrib/webpack-addons) is a utility suite for creating addons. It contains functions that could be of use for creating an addon yourself. -To create an addon, you create a [`yeoman-generator`](http://yeoman.io/authoring/). In the generator, you can create all the properties webpack has, as well as custom logic on top. +## webpack-addons-yourpackage -Before going forward, please read [How do I compose a webpack-addon?]() +In order for `webpack-cli` to compile your package, it relies on a prefix of `webpack-addons`. The package must also be published on npm. If you are curious on how to create your very own `addon`, please read [How do I compose a webpack-addon?](https://github.com/ev1stensberg/webpack-addons-demo). -## webpack-addons +## API + +To build a great scaffold, you got to know the API. As we are running the scaffolding through yeoman, we support [their API](http://yeoman.io/learning/). To create an addon, you must create a [`yeoman-generator`](http://yeoman.io/authoring/). In the generator, you can create all the properties webpack has, as well as custom logic on top. + +- `opts.env.configuration` +- `opts.env.configuration.myObj` +- `myObj.webpackOptions` + - `merge` +- `myObj.topScope` +- `myObj.configName` From c5e04afb479ceceb2c20b8328fe12330248bbe53 Mon Sep 17 00:00:00 2001 From: Even Stensberg Date: Thu, 27 Apr 2017 19:40:56 +0200 Subject: [PATCH 09/14] chore: revise section on good scaffold --- SCAFFOLDING.md | 21 ++++++++++++--------- 1 file changed, 12 insertions(+), 9 deletions(-) diff --git a/SCAFFOLDING.md b/SCAFFOLDING.md index 6e6f35784ad..e4d14f2ad2b 100644 --- a/SCAFFOLDING.md +++ b/SCAFFOLDING.md @@ -6,7 +6,7 @@ Through yeoman, the `webpack --init` feature allows people to create scaffolds a ## Writing a good scaffold -Before writing any code, you should analyze your purpose for the scaffold. Should it be generalistic? Should it be targeted for a library, such as [react](https://facebook.github.io/react/)? Furthermore, you should decide if you want to ask users for your scaffold such as **"What is your entry point?"**, or scaffold a boilerplate. +Before writing any code, you should analyze your purpose for the scaffold. Should it be generalistic? Should it be targeted for a library, such as [react](https://facebook.github.io/react/)? Furthermore, you should decide if you want to make user interactions in your `addon`, or just scaffold an boilerplate with preconfigured settings. ## webpack-addons @@ -14,15 +14,18 @@ Before writing any code, you should analyze your purpose for the scaffold. Shoul ## webpack-addons-yourpackage -In order for `webpack-cli` to compile your package, it relies on a prefix of `webpack-addons`. The package must also be published on npm. If you are curious on how to create your very own `addon`, please read [How do I compose a webpack-addon?](https://github.com/ev1stensberg/webpack-addons-demo). +In order for `webpack-cli` to compile your package, it relies on a prefix of `webpack-addons`. The package must also be published on npm. If you are curious about how you can create your very own `addon`, please read [How do I compose a webpack-addon?](https://github.com/ev1stensberg/webpack-addons-demo). ## API -To build a great scaffold, you got to know the API. As we are running the scaffolding through yeoman, we support [their API](http://yeoman.io/learning/). To create an addon, you must create a [`yeoman-generator`](http://yeoman.io/authoring/). In the generator, you can create all the properties webpack has, as well as custom logic on top. +To create an `addon`, you must create a [`yeoman-generator`](http://yeoman.io/authoring/). Because of that, you can optionally extend your generator to include methods from the [Yeoman API](http://yeoman.io/learning/). Its worth noting that we support all the properties of a regular webpack configuration. In order for us to do this, there's a thing you need to remember. -- `opts.env.configuration` -- `opts.env.configuration.myObj` -- `myObj.webpackOptions` - - `merge` -- `myObj.topScope` -- `myObj.configName` +Objects are made using strings, while strings are made using double strings. This means that in order for you to create an string, you have to wrap it inside another string for us to validate it correctly. + + +### `opts.env.configuration` +### `opts.env.configuration.myObj` +### `myObj.webpackOptions` +### `merge` +### `myObj.topScope` +### `myObj.configName` From d2b7c9b58c6d8c0958548d7056e760171dfe53ea Mon Sep 17 00:00:00 2001 From: Even Stensberg Date: Thu, 27 Apr 2017 19:56:23 +0200 Subject: [PATCH 10/14] chore: add some API docs --- SCAFFOLDING.md | 62 +++++++++++++++++++++++++++++++++++++++++++++----- 1 file changed, 56 insertions(+), 6 deletions(-) diff --git a/SCAFFOLDING.md b/SCAFFOLDING.md index e4d14f2ad2b..bae94dd3c83 100644 --- a/SCAFFOLDING.md +++ b/SCAFFOLDING.md @@ -23,9 +23,59 @@ To create an `addon`, you must create a [`yeoman-generator`](http://yeoman.io/au Objects are made using strings, while strings are made using double strings. This means that in order for you to create an string, you have to wrap it inside another string for us to validate it correctly. -### `opts.env.configuration` -### `opts.env.configuration.myObj` -### `myObj.webpackOptions` -### `merge` -### `myObj.topScope` -### `myObj.configName` +### `opts.env.configuration`(Required) + +Initialized inside the constructor of your generator in order for the CLI to work. + +```js +constructor(args, opts) { + super(args, opts); + opts.env.configuration = {}; + } +``` +### `opts.env.configuration.myObj` (required) + +`myObj` is your scaffold. This is where you will add options for the CLI to transform into a configuration. You can name it anything, and you can also add more objects, that could represent a `dev.config` or `prod.config`. + +```js +constructor(args, opts) { + super(args, opts); + opts.env.configuration = { + dev: {}, + prod: {} + }; + } +``` + +### `myObj.webpackOptions` (required) + +As with a regular webpack configuration, this property behaves the same. Inside `webpackOptions` you can declare the properties you want to scaffold. You can for instance, scaffold `entry`, `output` and `context`. + +(Inside a yeoman method) +```js +this.options.env.configuration.dev.webpackOptions = { +entry: '\'app.js\'', +output: {....}, +merge: 'myConfig' +}; +``` +If you want to use `webpack-merge`, you can supply `webpackOptions` with the merge property, and the configuration you want to merge it with. + +### `myObj.topScope`(optional) + +The `topScope` property is a way for the authors to add special behaviours, like functions that could be called inside a configuration, or variable initializations and module imports. + +```js +this.options.env.configuration.dev.topScope = [ +'var webpack = require(\'webpack\');' +'var path = require(\'path\');' +]; +``` + +### `myObj.configName`(optional) + +If you want to name your `webpack.config.js` something special, you can do that. + +```js +this.options.env.configuration.dev.configName = 'base'; +``` From 8719cfbc06c93f894abf4388c8d8e75dda72b0c5 Mon Sep 17 00:00:00 2001 From: Even Stensberg Date: Fri, 28 Apr 2017 10:05:32 +0200 Subject: [PATCH 11/14] chore: rephrase docs --- README.md | 2 +- SCAFFOLDING.md | 8 +++++--- 2 files changed, 6 insertions(+), 4 deletions(-) diff --git a/README.md b/README.md index 00dcf63b1f7..e2be7fa7acd 100644 --- a/README.md +++ b/README.md @@ -17,7 +17,7 @@ Webpack CLI encapsulates all code related to CLI handling. It captures options a ## Migration from webpack v1 to v2 -The `migrate` feature eases the transition from version 1, to version 2 of webpack. This feature allows users to switch to the new version of webpack, without having to refactor themselves. +The `migrate` feature eases the transition from [version 1](http://webpack.github.io/docs/), to [version 2](https://gist.github.com/sokra/27b24881210b56bbaff7). This feature allows users to switch to the new version of webpack, without having to extensively [refactor](https://webpack.js.org/guides/migrating/). `webpack --migrate ` diff --git a/SCAFFOLDING.md b/SCAFFOLDING.md index bae94dd3c83..2ae3ca858b2 100644 --- a/SCAFFOLDING.md +++ b/SCAFFOLDING.md @@ -1,12 +1,14 @@ # Introduction -Setting up webpack for the first time is hard. Writing advanced configurations like offline support for [PWA](https://developers.google.com/web/progressive-web-apps/)'s are even harder. The `init` feature is designed to support people that want to create their own configuration or initializing other projects people create. +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, the `webpack --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**. +Through [yeoman](http://yeoman.io/), the `webpack --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 any code, you should analyze your purpose for the scaffold. Should it be generalistic? Should it be targeted for a library, such as [react](https://facebook.github.io/react/)? Furthermore, you should decide if you want to make user interactions in your `addon`, or just scaffold an boilerplate with preconfigured settings. +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 configuration file and your framework code? It's also useful to think about the user experience for your scaffold. + +`webpack-cli` offers an experience that is interactive and you can prompt users for questions (like, "What is your entry point?") to help customize the output accordingly. ## webpack-addons From 8684c449879a27cd1146177a6685f60d335b0a95 Mon Sep 17 00:00:00 2001 From: Even Stensberg Date: Fri, 28 Apr 2017 10:07:05 +0200 Subject: [PATCH 12/14] chore: syntax sugar --- README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/README.md b/README.md index e2be7fa7acd..937aa1b8e6c 100644 --- a/README.md +++ b/README.md @@ -17,7 +17,7 @@ Webpack CLI encapsulates all code related to CLI handling. It captures options a ## 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). This feature allows users to switch to the new version of webpack, without having to extensively [refactor](https://webpack.js.org/guides/migrating/). +The `migrate` feature eases the transition from [version 1](http://webpack.github.io/docs/), to [version 2](https://gist.github.com/sokra/27b24881210b56bbaff7) and allows users to switch to the new version of webpack without having to extensively [refactor](https://webpack.js.org/guides/migrating/). `webpack --migrate ` From a5ee74cf74fa71584a42804b943eb806404ccde7 Mon Sep 17 00:00:00 2001 From: Even Stensberg Date: Fri, 28 Apr 2017 10:08:26 +0200 Subject: [PATCH 13/14] chore: more syntax sugar --- README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/README.md b/README.md index 937aa1b8e6c..16b9b078b4b 100644 --- a/README.md +++ b/README.md @@ -17,7 +17,7 @@ Webpack CLI encapsulates all code related to CLI handling. It captures options a ## 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) and allows users to switch to the new version of webpack without having to extensively [refactor](https://webpack.js.org/guides/migrating/). +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 --migrate ` From b07ec536e56157303f54bc1e58f03a4e7f438a48 Mon Sep 17 00:00:00 2001 From: Even Stensberg Date: Fri, 28 Apr 2017 10:14:43 +0200 Subject: [PATCH 14/14] chore: lint webpack-cli properly --- SCAFFOLDING.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/SCAFFOLDING.md b/SCAFFOLDING.md index 2ae3ca858b2..de17fcd641a 100644 --- a/SCAFFOLDING.md +++ b/SCAFFOLDING.md @@ -6,7 +6,7 @@ Through [yeoman](http://yeoman.io/), the `webpack --init` feature allows people ## 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 configuration file and your framework code? It's also useful to think about the user experience for your 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. `webpack-cli` offers an experience that is interactive and you can prompt users for questions (like, "What is your entry point?") to help customize the output accordingly.