minificado - comprimir zip javascript

Obtener Webpack no para empaquetar archivos

Question

Así que ahora mismo estoy trabajando con un prototipo en el que estamos utilizando una combinación entre webpack (para crear archivos .tsx y copiar archivos .html) y webpack-dev-server para el servicio de desarrollo. Como puede suponer, también estamos utilizando React y ReactDOM como un par de dependencias de la biblioteca. Nuestra salida de compilación actual es la siguiente estructura:

dist
    -favicon.ico
    -index.html
    -main.js
    -main.js.map // for source-mapping between tsx / js files

Esto coloca TODOS los módulos (incluidas las dependencias de la biblioteca en un archivo empaquetado grande). Quiero que el resultado final se vea así:

dist
    -favicon.ico
    -index.html
    -appName.js
    -appName.min.js
    -react.js
    -react.min.js
    -reactDOM.js
    -reactDOM.min.js

Tengo referencias a cada una de las bibliotecas en index.html y en las declaraciones de importación en los archivos .tsx. Entonces, mi pregunta es esta ... ¿Cómo puedo pasar del paquete web que produce este archivo .js agrupado gigantesco a archivos .js individuales (bibliotecas incluidas, sin tener que especificar cada uno individualmente)? ** Bonificación: Sé cómo hacer marcas de entorno prod / dev, así que, ¿cómo solo hago una pequeña clasificación de esos archivos individuales (de nuevo sin agruparlos)?

actual webpack.config:

var webpack = require("webpack"); // Assigning node package of webpack dependency to var for later utilization
var path = require("path"); // // Assigning node package of path dependency to var for later utilization

module.exports = {
    entry:  [
                "./wwwroot/app/appName.tsx", // Starting point of linking/compiling Typescript and dependencies, will need to add separate entry points in case of not deving SPA
                "./wwwroot/index.html", // Starting point of including HTML and dependencies, will need to add separate entry points in case of not deving SPA
                "./wwwroot/favicon.ico" // Input location for favicon
            ],
    output: {
        path: "./dist/", // Where we want to host files in local file directory structure
        publicPath: "/", // Where we want files to appear in hosting (eventual resolution to: https://localhost:4444/)
        filename: "appName.js" // What we want end compiled app JS file to be called
    },

    // Enable sourcemaps for debugging webpack''s output.
    devtool: "source-map",

    devServer: {
        contentBase: ''./dist'', // Copy and serve files from dist folder
        port: 4444, // Host on localhost port 4444
        // https: true, // Enable self-signed https/ssl cert debugging
        colors: true // Enable color-coding for debugging (VS Code does not currently emit colors, so none will be present there)
    },

    resolve: {
        // Add ''.ts'' and ''.tsx'' as resolvable extensions.
        extensions: [
            "",
            ".ico",
            ".js",
            ".ts",
            ".tsx",
            ".web.js",
            ".webpack.js"
        ]
    },

    module: {
        loaders: [
            // This loader copies the index.html file & favicon.ico to the output directory.
            {
                test: //.(html|ico)$/,
                loader: ''file?name=[name].[ext]''
            },
            // All files with a ''.ts'' or ''.tsx'' extension will be handled by ''ts-loader''.
            {
                test: //.tsx?$/,
                loaders: ["ts-loader"]
            }
        ],

        preLoaders: [
            // All output ''.js'' files will have any sourcemaps re-processed by ''source-map-loader''.
            {
                test: //.js$/,
                loader: "source-map-loader"
            }
        ]
    },

    // When importing a module whose path matches one of the following, just
    // assume a corresponding global variable exists and use that instead.
    // This is important because it allows us to avoid bundling all of our
    // dependencies, which allows browsers to cache those libraries between builds.
    // externals: {
    //     "react": "React",
    //     "react-dom": "ReactDOM",
    //     "redux": "Redux"
    // }
};

Actualización: Terminé encontrando una solución que se ajustaba a mis necesidades, aunque, nuevamente, de esa manera, el paquete web requiere una configuración adicional. Todavía me gustaría hacerlo un poco más dinámico, pero lo perfeccionaremos en un momento posterior. La resolución que estaba buscando era la capacidad de "fragmentar" módulos comunes, pero lo declaré como nombre de archivo dado los puntos de "entrada" que se proporcionan en el paquete web. No me importó que algunos archivos se combinaran, donde tenía sentido, pero quería que los archivos en general estuvieran a nivel de componente dado que el proyecto no era un SPA (aplicación de una sola página).

El código adicional terminó siendo:

plugins: [
    new webpack.optimize.CommonsChunkPlugin({ // This plugin is for extracting and created "chunks" (extracted parts of the code that are common and aren''t page specific)
        // One of these instances of plugins needs to be specified for EACH chunk file output desired
        filename: "common.js", // Filename for this particular set of chunks to be stored
        name: "common", // Entry point name given for where to pull all of the chunks
        minChunks: 3 // Minimum number of chunks to be created
    })
]

También tuve que parametrizar los puntos de entrada (ver a continuación, por ejemplo), por nombre de variable para poder asignar módulos de reacción, de reacción y de redux al archivo common.js.

entry:  {
    main:    "./wwwroot/app/appName.tsx", // Starting point of linking/compiling Typescript and dependencies, will need to add separate entry points in case of not deving SPA
    index:   "./wwwroot/index.html", // Starting point of including HTML and dependencies, will need to add separate entry points in case of not deving SPA
    favicon: "./wwwroot/favicon.ico", // Input location for favicon
    common:  [ "react", "react-dom", "redux" ] // All of the "chunks" to extract and place in common file for faster loading of common libraries between pages
},

Answer 1

Cambie la configuración de output para que sea dirigida por nombre, por ejemplo

    entry: {
        dash: ''app/dash.ts'',
        home: ''app/home.ts'',
    },
    output: {
        path: ''./public'',
        filename: ''build/[name].js'',
        sourceMapFilename: ''build/[name].js.map''
    },

Answer 2

Un paquete de módulos reemplaza un cargador de módulos.

Pero, a diferencia de un cargador de módulos, un paquete de módulos se ejecuta en tiempo de compilación

¡Así que puede usar el cargador de módulos en lugar del agrupador de módulos en el momento del desarrollo :)!