Get Webpack not to bundle files

Question

So right now I'm working with a prototype where we're using a combination between webpack (for building .tsx files and copying .html files) and webpack-dev-server for development serving. As you can assume we are also using React and ReactDOM as a couple of library dependencies as well. Our current build output is the following structure:

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

This places ALL of the modules (including library dependencies into on big bundled file). I want the end result to look like this:

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

I have references to each of the libraries in index.html and in import statements in the .tsx files. So my question is this... How do I go from webpack producing this gigantic bundled .js file to individual .js files (libraries included, without having to specify each individually)? **Bonus: I know how to do prod/dev environment flags, so how do I just minify those individual files (again without bundling them)?

current 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"     // } }; 

Answer 1

Change the output setting to be name driven e.g.

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

Answer 2

To expand upon @basarat's answer, you can use the glob package from node's standard library to build the "entry" config:

const glob = require("glob");  module.exports = [   {     target: "node",     entry: glob.sync("./src/**/*.test.{ts,tsx}").reduce((acc, file) => {       acc[file.replace(/^\.\/src\//, "")] = file;       return acc;     }, {}),     output: {       filename: "[name].js",       chunkFilename: "[name]-[id].js",       path: __dirname + "/dist"     },     //...   } ]; 

This builds files with the same name as their source, replacing .ts and .tsx with .js.