Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

let webpack output individual compiled files besides bundle

I'm using the webpack loader ts-loader to compile typescript sourcefiles into a javascript bundle. Now I would like the individualy compiled javascript files also to be saved, as well as the bundle! I'm familliar with writing a very simple webpack plugin, but I'm not sure as to how to go about implementing this. That is: I don't know which events triggered by webpack to listen to and where to find the relevant data. Any help?

like image 957
Flion Avatar asked Dec 22 '16 04:12

Flion


People also ask

What is chunking in webpack?

Chunk: This webpack-specific term is used internally to manage the bundling process. Bundles are composed out of chunks, of which there are several types (e.g. entry and child).

How do you get multiple entry points on webpack?

webpack.config.js module. exports = { entry: { main: './path/to/my/entry/file. js', }, }; We can also pass an array of file paths to the entry property which creates what is known as a "multi-main entry".

What is output in webpack config?

Configuring the output configuration options tells webpack how to write the compiled files to disk. Note that, while there can be multiple entry points, only one output configuration is specified.

What is libraryTarget in webpack?

This is according to their documentation: "libraryTarget: "umd" - This exposes your library under all the module definitions, allowing it to work with CommonJS, AMD and as global variable." Also, I built the exact same code with Webpack 3 and it produced a proper bundle.


1 Answers

As I commented, you can't use webpack compiled individual files. It might break with Uncaught ReferenceError: __webpack_require__ is not defined.

It's better write your own loader or ask the ts-loader to provide the option to retain the transpiled source.

Or i have written a loader which can save the typescript compiled files as individual files.

you can use this loader second loader or post-loader as shown below

as a second loader:

module: {
    loaders: [{
      test: /\.ts?$/,
      loaders: ['scatter-loader', 'ts-loader']
    }]
}

or as a post-loader

module: {
    loaders: [{
      test: /\.ts?$/,
      loaders: ['ts-loader']
    }],
    postLoader: [{
      test: /\.ts?$/,
      loaders: ['scatter-loader']
    }]
}

Note: scatter-loader work is in progress.

like image 196
Thaadikkaaran Avatar answered Oct 23 '22 02:10

Thaadikkaaran