使用wbepack CLI 迁移到webpack2
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
})
]
};