Even more modular

[lionel-bijaoui]

A very modularized version of the app would be a plus.
My goal is:

• a simple, all in one (except for CSS of course) bundled JS.
  The user only need to include the lib with a script tag and it work as expected (like today build).
• a commonjs version with dependency and the possibility to load individual fields or not (some fields have dependency that other don't so it could save some space in the end).
  This is close to Vue.js approach of the problem (vue.js vs vue.common.js)

[lionel-bijaoui]

Progress update: removing moment and lodash from bundle is working. Size drop from 1.2M to 308.4k for node_modules chunk.

[icebob]

Nice!

[icebob]

Could you show the webpack config?

[lionel-bijaoui]

The only real change is here

        externals: {
            "lodash": "lodash",
            "moment": "moment"
        },

Config so far

var webpack = require("webpack");
var version = require("./package.json").version;
var banner = "/**\n" + " * vue-form-generator v" + version + "\n" + " * https://github.com/icebob/vue-form-generator\n" + " * Released under the MIT License.\n" + " */\n";
var ExtractTextPlugin = require("extract-text-webpack-plugin");
var StatsPlugin = require("stats-webpack-plugin");

var loaders = [
    {
        "test": /\.js?$/,
        "exclude": /node_modules/,
        "loader": "babel"
    },
    {
        "test": /\.vue?$/,
        "loader": "vue"
    }
];

module.exports = [
    {
        entry: "./src/index",
        output: {
            path: "./dist",
            filename: "vue-form-generator.js",
            library: "VueFormGenerator",
            libraryTarget: "umd"
        },
        externals: {
            "lodash": "lodash",
            "moment": "moment"
        },

        plugins: [
            new webpack.DefinePlugin({
                "process.env" : {
                    NODE_ENV : JSON.stringify("production")
                }
            }),
            new webpack.optimize.UglifyJsPlugin({
                compress: {
                    warnings: false
                }
            }),
            new webpack.optimize.DedupePlugin(),
            new webpack.BannerPlugin(banner, {
                raw: true
            }),
            new ExtractTextPlugin("vue-form-generator.css", { allChunks: true }),
            new StatsPlugin("../stats.json", {
                chunkModules: true
                //exclude: [/node_modules[\\\/]react/]
            })
        ],

        module: {
            loaders: loaders
        },

        vue: {
            loaders: {
                css: ExtractTextPlugin.extract("css"),
                postcss: ExtractTextPlugin.extract("css"),
                sass: ExtractTextPlugin.extract("css!sass"),
            }
        },

        resolve: {
            packageAlias: "browser"
        }
    }

];

[icebob]

Similar issue: https://medium.freecodecamp.com/manually-tuning-webpack-builds-284923f47f44#.dp5u9clpe

[icebob]

I closed it. More discussion in #112