ribbon image search rewind fast-forward speech-bubble pie-graph star

使用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
        })
    ]
};

扩展阅读

You Can Speak "Hi" to Me in Those Ways