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

migrate documentation #175

Merged
Changes from 4 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
160 changes: 160 additions & 0 deletions MIGRATE.md
Original file line number Diff line number Diff line change
@@ -1 +1,161 @@
## webpack-migrate

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/).

### Usage
To use `migrate`, run the following command, with the value of `<config>` being a path to an existing webpack configuration file

```bash
webpack-cli migrate <config>
```

Given a basic configuration file like so:

```javascript
Copy link
Member

Choose a reason for hiding this comment

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

Code samples are nice, maybe link to the migration guide at webpack.js.org too?

Copy link
Contributor Author

@thescientist13 thescientist13 Aug 3, 2017

Choose a reason for hiding this comment

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

The link is provided at the start of this doc, which is essentially lifted right from the README

The migrate feature eases the transition from version 1 to version 2. migrate
also allows users to switch to the new version of webpack without having to extensively refactor.

It's the link applied to refactor

Let me know if you feel it would be helpful to add it elsewhere as well or maybe instead explicitly call it out in the beginning as a link to the migration guide?

Copy link
Member

Choose a reason for hiding this comment

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

Oh, right! Nice 👍

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

module.exports = {

entry: {
index: './src/index.js',
vendor: './src/vendor.js'
},

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

module: {
loaders: [
{
test: /\.js$/,
exclude: /node_modules/,
loader: 'babel',
query: {
presets: ['es2015']
}
},
{
test: /\.(scss|css)$/,
loader: ExtractTextPlugin.extract('style', 'css!sass')
}
]
},

plugins: [
new UglifyJSPlugin(),

new ExtractTextPlugin('styles-[contentHash].css'),

new webpack.optimize.CommonsChunkPlugin({
name: 'common',
filename: 'common-[hash].min.js'
}),

new HtmlWebpackPlugin()
]

};
```

The `migrate` command, when run, will show the proposed changes to the config file in the terminal, prompting the user to
accept the changes or not:

```bash
$ webpack-cli migrate ./webpack.config.js
✔ Reading webpack config
✔ Migrating config from v1 to v2
- loaders: [
+ rules: [
- loader: 'babel',
query: {
+ use: [{
loader: 'babel-loader'
}],
options: {
- loader: ExtractTextPlugin.extract('style', 'css!sass')
+ use: ExtractTextPlugin.extract({
fallback: 'style',
use: 'css!sass'
})
? Are you sure these changes are fine? Yes

✔︎ New webpack v2 config file is at /Users/obuckley/Workspace/github/repos/webpack-migrate-sandbox/webpack.config.js
```


After it has run, we have our new webpack config file!

```javascript
const ExtractTextPlugin = require('extract-text-webpack-plugin');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const path = require('path');
const UglifyJSPlugin = require('uglifyjs-webpack-plugin');
const webpack = require('webpack');

module.exports = {

entry: {
index: './src/index.js',
vendor: './src/vendor.js'
},

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

module: {
rules: [
{
test: /\.js$/,
exclude: /node_modules/,
use: [{
loader: 'babel-loader'
}],
options: {
presets: ['es2015']
}
},
{
test: /\.(scss|css)$/,
use: ExtractTextPlugin.extract({
fallback: 'style',
use: 'css!sass'
})
}
]
},

plugins: [
new UglifyJSPlugin(),

new ExtractTextPlugin('styles-[contentHash].css'),

new webpack.optimize.CommonsChunkPlugin({
name: 'common',
filename: 'common-[hash].min.js'
}),

new HtmlWebpackPlugin()
]

};
```

In summary, we can see the follow changes were made
1. The webpack schema for using loaders has changed
- `loaders` is now `module.rules`
- `query` is now `options`
1. All loaders now have to have the *loader* suffix, e.g. `babel` -> `babel-loader`

**Note: This command does NOT handle updating dependencies in _package.json_, it is only a migration tool for the config
file itself. The user is expected to manage dependencies themselves.**
Copy link
Member

Choose a reason for hiding this comment

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

The users are?

Copy link
Contributor Author

@thescientist13 thescientist13 Aug 3, 2017

Choose a reason for hiding this comment

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

In this case it would be whomever is running migrate.

I took inspiration from the language used in the README and used at the start of this guide (emphasis mine)

migrate also allows users to switch to the new version of webpack without having to extensively refactor.

Happy to update it though if you think it could be better expressed another way.

Copy link
Member

Choose a reason for hiding this comment

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

Last line is mixing plural and singular, isn't it?

Copy link
Contributor Author

@thescientist13 thescientist13 Aug 3, 2017

Choose a reason for hiding this comment

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

Ah, I see what you mean. So something like:

Users are expected to manage dependencies themselves.

?

Copy link
Member

Choose a reason for hiding this comment

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

yeah :)

Copy link
Contributor Author

Choose a reason for hiding this comment

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

all set! 💥