0

I have a webpack configuration:

var path = require("path");

module.exports = {
  entry: {
    app: [
      './src/index.js'
    ]
  },

  output: {
    path: path.resolve(__dirname + '/dist'),
    filename: '[name].js',
  },

  module: {
    rules: [
      {
        test: /\.(css|scss)$/,
        use: [
          'style-loader',
          'css-loader',
        ]
      },
      {
        test:    /\.js$/,
        exclude: /node_modules/,
      },
      {
        test:    /\.html$/,
        exclude: /node_modules/,
        loader:  'file-loader?name=[name].[ext]',
      },
      {
        test:    /\.elm$/,
        exclude: [/elm-stuff/, /node_modules/],
        loader:  'elm-webpack-loader?verbose=true&warn=true',
          options: {debug: true, warn: true},
      },
      {
        test: /\.woff(2)?(\?v=[0-9]\.[0-9]\.[0-9])?$/,
        loader: 'url-loader?limit=10000&mimetype=application/font-woff',
      },
      {
        test: /\.(ttf|eot|svg)(\?v=[0-9]\.[0-9]\.[0-9])?$/,
        loader: 'file-loader',
      },
    ],

    noParse: /\.elm$/,
  },

  devServer: {
    inline: true,
    stats: { colors: true },
  },

};

I have a few questions:

  1. According to me the above config says that it should not be looking for js files in node_modules. However it is still bundling ./node_modules/dexie/dist/dexie.es.js when I call require ("dexie"). (I am just doing this to experiment and understand webpack).
  2. I would rather like to call dexie.js instead of dexie.es.js. How do I make this happen. I know I can set the mainFields property. However how do I do this on a prelibrary basis instead of globally.
Murdock
  • 4,352
  • 3
  • 34
  • 63

2 Answers2

0

Not sure if I understand your requirement fully, but an option is to set up aliases in the webpack resolve

module.exports = {
  entry: {
    ...
  },

  output: {
    ...
  },

  module: {
    rules: [
      ...
    ],

    noParse: /\.elm$/,
  },

  resolve: {
    alias: {
      dixie: 'node_modules/dexie/dist/dexie.js'
    }
  },

  devServer: {
    ...
  },

};
Gearoid
  • 173
  • 2
  • 7
0

To your first question please see here. It has already been answered. No matter what you exclude in your loaders config, the file will be bundled unless you define it as external in your config.

To your second question, you can just require the other file with

require('dexie/dexie.js')

When you just write require('dexie'), webpack will look in your node_modules folder for a folder named 'dexie', read the package.json and resolve the file described by the module property. This is described here.

For more info, please read the webpack docs. They are excellent.

Daniel
  • 1,933
  • 12
  • 17