webpack - IntelliSense not working for function imported from javascript package inside bundle - Stack Overflow

admin管理员组

文章数量:1124028

I'm using VSCode to maintain an npmjs package.
In my test code in the same project as the package, intelliSense works fine for exported functions, showing parameter descriptions from comment blocks.
The problem is when I use webpack to create a bundle, and I import that bundle (locally or from npmjs). The intelliSense documentation does not appear.
This is not a showstopper but a great feature is missing.
Please advise.
The full (fully working) project is at

The webpack_config.js for creating the package follows :

// Function: pack all js files into a single minified .js file.
// pardon the extensive comments. I am a hobbyist.
const path = require('path');

module.exports = 
{
  entry: '../src/PackageTreeEntry.tsx',

  optimization: {
    minimize: true //false //true // human readable if minimize if false
    // NOT ME >>    minimize: false
    // This option enables tree shaking, which removes unused code from the bundle-> 
    // ,usedExports: true,
  },
  mode: 'production', //'development',  // development or production
  // resolve is a fancy way of saying "look here for files to build graph". Extensions says use .js .jsx 
  resolve: { 
    extensions: ['.js', '.jsx', '.ts', '.tsx']
  },
  // setup where to put minified output file "the bundle", and any assets like jpegs. 
  output: {
    // specify bundle location.
    // ../xyz is necessary if client uses local import of bundle; if node_modules is in
    // parent folder, it causes React to mess up due to duplicate react's etc.
    path: path.resolve(__dirname, '../../publicProj/npmjs_com/bundle-publish-public'), 
    filename: 'bundle.js', // name of combined file, the "bundle"
    // 
    // library type 'window' will not create a bundle file. It's for running as a server, or clicking on index.html.
    // I think it means "make library available via the DOM window object"
    // NOT ME >>  library: { name: 'MyLibrary' , type: 'window' } 
    // type: 'commonjs2' works on client but not local serve or clicking on index.html
    library: { type: 'commonjs2' } 
  },
   
  externals: {        
    react: {          
        commonjs: 'react',          
        commonjs2: 'react',          
        amd: 'React',          
        root: 'React',      
    },      
    'react-dom': {          
        commonjs: 'react-dom',          
        commonjs2: 'react-dom',          
        amd: 'ReactDOM',          
        root: 'ReactDOM',      
    },  

    'react-router-dom': {          
      commonjs: 'react-router-dom',          
      commonjs2: 'react-router-dom',           
      // TODO: what are entries for amd and root??  
    },  
  },

  // modules appears to be chunks of processing to do. 
  // In this case, there's 1 module which calls babel to convert jsx in React source to plain js
  module: {
    // jan 2025 typescript added. START of the babel rule
    rules: [  // here's the first rule in the array of rules
      { // START of the babel rule
        test: /\.(js|jsx|ts|tsx)$/,   // feed files *.js and *.js to babel. ref:

        exclude: /node_modules/, // dont send these hundreds of files to babel! Client will download these itself upon "npm i"
        use: {  // ref: 
          loader: 'babel-loader', 

          options: { "presets": ["@babel/preset-typescript", "@babel/preset-env", "@babel/preset-react"] }
        }, 
      },  

      {  // this rule includes .css files
        test: /\.css$/,
        use: [
            { loader: 'style-loader' },
            { loader: 'css-loader' }
        ]
      }

    ]
  },

};

本文标签： webpackIntelliSense not working for function imported from javascript package inside bundleStack Overflow