webpack的entry，output及CommonsChunkPlugin

在webpack中可以通过设置entry，output以及结合 CommonsChunkPlugin 来实现打包时，业务代码和第三方代码的分离

部分相关（黄色）webpack.config.js代码如下：

var webpack = require('webpack');
var path = require('path');
var buildPath = path.resolve(__dirname, 'build');
var ExtractTextPlugin = require('extract-text-webpack-plugin');
var Promise = require('es6-promise').Promise;

var webpack_config = {
    entry: {
        app : ['./src/js/app.js'],
        vendor: ['jquery','underscore','react','react-router','react-bootstrap','react-input-autosize','classnames','redux']
    },
    output: {
        path: buildPath,
        filename: 'js/[name]-bundle.js'
    },
    module: {
        loaders: [
            {
                test: /\.js$/,
                loader: 'babel',
                exclude: /(node_modules|libs_ie8)/,
                query: {
                    cacheDirectory: true,
                    presets: ['es2015', 'react']
                }
            },
            {
                test: /\.css$/,
                loader: ExtractTextPlugin.extract("style-loader", "css-loader", {publicPath: '../'})
            },
            {
                test: /\.less$/,
                loader: ExtractTextPlugin.extract("style-loader", "css-loader!less-loader", {publicPath: '../'})
            },
            {
                test: /\.(png|gif|jpg)/,
                loader: 'url-loader?limit=10000&mimetype=image/png&name=images/[name].[ext]'
            },
            {
                test: /\.(otf|eot|svg|ttf|woff|woff2)$/,
                loader: "url-loader?limit=8192&name=fonts/[name].[ext]"
            }
        ]
    },
    plugins: [
        new ExtractTextPlugin("css/[name]-bundle.css", {publicPath: '../'}),
        new webpack.optimize.CommonsChunkPlugin('vendor', 'js/vendor-bundle.js')
    ]
};

module.exports = {
    webpack_config: webpack_config,
    html_webpack_plugin_config : {
        inject: 'body',
        template: './src/index.ejs',
        hash: true,
        title: "Toolkit",
        filename: "./index.html",
        env: {
            PROD: false
        }
    },
    html_standalone_webpack_plugin_config : {
        inject: 'body',
        template: './src/standalone.ejs',
        hash: true,
        title: "Toolkit",
        filename: "./standalone.html",
        env: {
            PROD: false
        }
    }
};

 

用webpack的CommonsChunkPlugin提取公共代码的3种方式：https://blog.csdn.net/github_26672553/article/details/52280655