如何防止在 webpack 构建期间丢弃未使用的代码？

Question

I am trying to use webpack (v 5.6.0) to bundle some JavaScript into an ESM (aka. ES6 module, ECMAScript Module) which doesn't run on its own, but rather can be used as a library for another app. I want the other app to have the option to include this library simply using <script src="..." type="module"> without having to have its own build step and worry about dependencies.

In the library's project I've added "type": "module" to my package.json to let it know it's an ESM , and I have a src folder with an index.js and a dist folder for the output of webpack.

My webpack.config.cjs file looks like:

const path = require('path');

module.exports = {
    entry: {
        index: './src/index.js',
        // plan to have more here for code spliting
    },
    output: {
        path: path.resolve(__dirname, './dist'),
        filename: '[name].bundle.min.js',
    },
    optimization: {
        // removeEmptyChunks: false, // Tried this, didn't seem to help
    },
};

And a simplified version of my index.js is:

const hello = () => { console.log('Hello world'); };
export default { hello };

Eventually there will be actual code here, many different files, dependencies, etc.

When I run webpack, a index.bundle.min.js file is created, but it is completely blank . For this simple example, I would expect it to look very much like the source file. It appears that Webpack is dropping code that isn't being run, which might be useful optimization in some cases, it is not what I want.

If I add hello(); to my index.js then I do get some code in my built file, but I don't want to run any code, and it's still not exposing the methods for later use like I'd like.

Answer 1

Pytth's solution solves the problem of the code not showing up, but doesn't solve the problem of creating a library file in ESM (ie, using export ). Sadly I think Webpack may just be missing the obvious option for libraryTarget: 'esm' .

I was reminded of a solution I (regrettably) used once: Creating one build file with config options that output the library onto the window :

entry: {
    'myLib': './src/index.js',
},
output: {
    library: '[name]',
    libraryExport: 'default',
    libraryTarget: 'window',
    path: path.resolve(__dirname, './dist'),
    filename: '[name].window.js',
},

Then including another (non-generated) file in the dist folder called, for example, myLib.esm.js that just has:

import './myLib.window.js';
const myLib = window.myLib;
delete window.myLib;
export default myLib;

It's ugly, but it does work.

Answer 2

Webpack actually has a setting for creating libraries ? Have you tried that?

module.exports = {
  //...
  output: {
    library: 'MyLibrary'
  }
};

Here is some additional info.