| 1 min read

Webpack2 已经出来许久,但是由于配置写法的变化,很多人还没有迁移。关于 webpack2 的一些变化可以阅读这篇文章 What's new in webpack 2。 如果你计划从 webpack2 迁移到 webpack2 的话,关于配置如何进行更改可以从 这里 知道。但是今天主要是推荐另外一个命令行工具 webpack CLI
它可以快速的生成webapack 配置和 进行配置迁移。

快速开始

首先我们得全局安装 webpack-cli

npm install -g webpack-cli

安装完成后我们可以通过使用

webpack-cli init webpack-addons-demo

来初始化一个配置目录文件,文件内容可以看 这里。当然webpack的目录模板也是可以自己开发的。

webpack 迁移

使用 webpack-cli 可以方便的完成我们从 v1 迁移到 v2。

直接使用命令:

webpack-cli migrate webpack.config.js
webpack v1 的配置
var path = require('path');
var webpack = require('webpack');

module.exports = {
	devtool: 'eval',
	entry: [
		'./src/index'
	],
	output: {
		path: path.join(__dirname, 'dist'),
		filename: 'index.js'
	},
	module: {
		loaders: [{
			test: /\.js$/,
			loaders: ['babel'],
			include: path.join(__dirname, 'src')
		}]
	},
	resolve: {
		root: path.resolve('/src'),
		modules: ['node_modules']
	},
	plugins: [
		new webpack.optimize.UglifyJsPlugin(),
		new webpack.optimize.OccurrenceOrderPlugin()
	],
	debug: true
};
升级后的配置
var path = require('path');
var webpack = require('webpack');

module.exports = {
	devtool: 'eval',
	entry: [
		'./src/index'
	],
	output: {
		path: path.join(__dirname, 'dist'),
		filename: 'index.js'
	},
	module: {
		rules: [{
			test: /\.js$/,
			use: 'babel',
			include: path.join(__dirname, 'src')
		}]
	},
	resolve: {
		modules: ['node_modules', path.resolve('/src')]
	},
	plugins: [
		new webpack.optimize.UglifyJsPlugin({
			sourceMap: true
		}),
		new webpack.optimize.LoaderOptionsPlugin({
			'debug': true,
			'minimize': true
		})
	]
};

扩展阅读

You Can Speak "Hi" to Me in Those Ways