-
-
Notifications
You must be signed in to change notification settings - Fork 611
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
Changes from 4 commits
File filter
Filter by extension
Conversations
Jump to
Diff view
Diff view
There are no files selected for viewing
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 | ||
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.** | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. The users are? There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. In this case it would be whomever is running I took inspiration from the language used in the README and used at the start of this guide (emphasis mine)
Happy to update it though if you think it could be better expressed another way. There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. Last line is mixing plural and singular, isn't it? There was a problem hiding this comment. Choose a reason for hiding this commentThe 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. ? There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. yeah :) There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. all set! 💥 |
There was a problem hiding this comment.
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?
There was a problem hiding this comment.
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
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?
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Oh, right! Nice 👍