Webpack打包ES6和CommonJs的方法

今天小编给大家分享一下Webpack打包ES6和CommonJs的方法的相关知识点，内容详细，逻辑清晰，相信大部分人都还太了解这方面的知识，所以分享这篇文章给大家参考一下，希望大家阅读完这篇文章后有所收获，下面我们一起来了解一下吧。

创新互联是一家专业提供墨竹工卡企业网站建设,专注与成都网站制作、成都做网站、html5、小程序制作等业务。10年已为墨竹工卡众多企业、政府机构等服务。创新互联专业网站制作公司优惠进行中。

最开始我们使用CommonJs语法时，只需使用最基本的配置即可：

# npm install babel-core babel-loader --save-dev

安装完成babel-core和babel-loader以后，下面是编写Webpack配置文件，默认文件名是webpack.config.js。当然也可以使用其他的文件名(例如wpconfig.js)，只是在使用webpack命令时加上 --config参数：

# webpack --config wpconfig.js

配置文件内容如下

module.exports = {
    entry: {
        module: './src',
    } ,
    output:{
        path: './builds',
        filename: 'onmpw.js',
    },
    module:{
        loaders:[
            {
                test: /\.jsx?$/,
                loader: 'babel',
             },
        ],
    }
};

如果你想在react代码中使用jsx，那么你必须安装babel-preset-react,然后修改webpack配置文件

# npm install babel-preset-react --save-dev

下面是配置文件部分内容

{
    test: /\.jsx?$/,
    loader: 'babel-loader',
    query:{
        presets:['react']
    }
}

接下来如果你想要在React中使用ES6语法，就要使你的环境支持ES6或者是ES2015

# npm install babel-preset-es2015 --save-dev

下面是配置文件部分内容

{
    test: /\.jsx?$/,
    loader: 'babel-loader',
    query:{
        presets:['react', 'es2015']
    }
}

最后，如果你想使你的环境支持一些ES7的试验特征，还可以继续如下的升级

# npm install babel-preset-stage-0 --save-dev

配置文件内容如下：

{
    test: /\.jsx?$/,
    loader: 'babel-loader',
    query:{
        presets:['react', 'es2015', 'stage-0']
    }
}

针对上面的几种情况，下面奉上一段代码，包含了这几种情况。

var FancyCheckbox = React.createClass({
    render: function() {
        var { checked, ...other } = this.props;
        var fancyClass = checked ? 'FancyChecked' : 'FancyUnchecked';
        // `other` 包含 { onClick: console.log } 但 checked 属性除外
        return (