Question

我有一个webpack配置：

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 },
  },

};

我有几个问题：

据我说，上面的配置说不应该看对于node_modules中的js文件。但它仍在捆绑 ./node_modules/dexie/dist/dexie.es.js当我打电话给需要时（＆＃34; dexie＆＃34;）。（我这样做是为了试验和理解webpack）。
我宁愿打电话给dexie.js而不是dexie.es.js。怎么做我做到了这一点。我知道我可以设置mainFields属性。但是，我如何在前库存而非全局的基础上执行此操作。

Answer 1

不确定我是否完全理解您的要求，但选项是在webpack resolve中设置别名

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

  output: {
    ...
  },

  module: {
    rules: [
      ...
    ],

    noParse: /\.elm$/,
  },

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

  devServer: {
    ...
  },

};

Answer 2

到第一个问题，请参阅here。它已经得到了解答。无论您在加载器配置中排除什么，该文件都将被捆绑，除非您在配置中将其定义为外部。

对于第二个问题，您只需要

另一个文件即可

require('dexie/dexie.js')

当你刚写require('dexie')时，webpack将在你的node_modules文件夹中查找名为'dexie'的文件夹，读取package.json并解析module属性描述的文件。这被描述为here。

有关详细信息，请阅读the webpack docs。他们很棒。

Webpack：包含指定的特定文件而不是package.json？

2 个答案: