From 8cd9b197ed057dba5da71dc31fe8d121adef9a3b Mon Sep 17 00:00:00 2001 From: Owen Buckley Date: Sun, 30 Jul 2017 18:42:05 -0400 Subject: [PATCH 1/5] initial draft of migrate documentation --- MIGRATE.md | 153 +++++++++++++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 153 insertions(+) diff --git a/MIGRATE.md b/MIGRATE.md index 8b137891791..f201f0e362c 100644 --- a/MIGRATE.md +++ b/MIGRATE.md @@ -1 +1,154 @@ +## 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 path being an existing webpack configuration file + +```bash + webpack-cli migrate +``` + +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 + ✔ 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() + ] + + }; +``` + +**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 themself.** From 50406cbc667fff4307f1351898cd3882e97b4706 Mon Sep 17 00:00:00 2001 From: Owen Buckley Date: Sun, 30 Jul 2017 19:09:19 -0400 Subject: [PATCH 2/5] formatting --- MIGRATE.md | 213 +++++++++++++++++++++++++++-------------------------- 1 file changed, 107 insertions(+), 106 deletions(-) diff --git a/MIGRATE.md b/MIGRATE.md index f201f0e362c..72370191e11 100644 --- a/MIGRATE.md +++ b/MIGRATE.md @@ -4,71 +4,72 @@ The `migrate` feature eases the transition from [version 1](http://webpack.githu 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 path being an existing webpack configuration file +To use `migrate`, run the following command, with the value of ` +webpack-cli migrate ``` 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') - } - ] +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'] + } }, - - plugins: [ - new UglifyJSPlugin(), - - new ExtractTextPlugin('styles-[contentHash].css'), - - new webpack.optimize.CommonsChunkPlugin({ - name: 'common', - filename: 'common-[hash].min.js' - }), - - new HtmlWebpackPlugin() - ] - - }; + { + 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: [ @@ -93,62 +94,62 @@ accept the changes or not: 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' - }) - } - ] +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'] + } }, - - plugins: [ - new UglifyJSPlugin(), - - new ExtractTextPlugin('styles-[contentHash].css'), - - new webpack.optimize.CommonsChunkPlugin({ - name: 'common', - filename: 'common-[hash].min.js' - }), - - new HtmlWebpackPlugin() - ] - - }; + { + 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() + ] + +}; ``` **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 themself.** +file itself. The user is expected to manage dependencies themselves.** From 0ffe6896487c906e54fd24d6a8bd597817739f0e Mon Sep 17 00:00:00 2001 From: Owen Buckley Date: Sun, 30 Jul 2017 19:13:04 -0400 Subject: [PATCH 3/5] formatting --- MIGRATE.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/MIGRATE.md b/MIGRATE.md index 72370191e11..42c61d7d8ed 100644 --- a/MIGRATE.md +++ b/MIGRATE.md @@ -4,7 +4,7 @@ The `migrate` feature eases the transition from [version 1](http://webpack.githu 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 `` being a path to an existing webpack configuration file ```bash webpack-cli migrate From 0c51e8dbd2f2a5cc8df421fd34af62c86c0ceb0d Mon Sep 17 00:00:00 2001 From: Owen Buckley Date: Wed, 2 Aug 2017 17:50:21 -0400 Subject: [PATCH 4/5] added summary of migrate changes --- MIGRATE.md | 6 ++++++ 1 file changed, 6 insertions(+) diff --git a/MIGRATE.md b/MIGRATE.md index 42c61d7d8ed..e34f90c1582 100644 --- a/MIGRATE.md +++ b/MIGRATE.md @@ -151,5 +151,11 @@ module.exports = { }; ``` +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.** From 026e15eef7f89b65b9d4ae86fa56531bd7b2d75f Mon Sep 17 00:00:00 2001 From: Owen Buckley Date: Thu, 3 Aug 2017 10:55:03 -0400 Subject: [PATCH 5/5] maintain consistent usage of user through documentation --- MIGRATE.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/MIGRATE.md b/MIGRATE.md index e34f90c1582..84803a84c17 100644 --- a/MIGRATE.md +++ b/MIGRATE.md @@ -158,4 +158,4 @@ In summary, we can see the follow changes were made 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.** +file itself. Users are expected to manage dependencies themselves.**