简体   繁体   English

Webpack:包括特定文件而不是指定的package.json?

[英]Webpack: include specific file instead of package.json specified?

I have a webpack configuration: 我有一个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 },
  },

};

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. 根据我的说法,上面的配置说它不应该在node_modules中寻找js文件。 However it is still bundling ./node_modules/dexie/dist/dexie.es.js when I call require ("dexie"). 但是,当我调用require(“ dexie”)时,它仍然捆绑./node_modules/dexie/dist/dexie.es.js。 (I am just doing this to experiment and understand webpack). (我只是在做实验和了解webpack)。
  2. I would rather like to call dexie.js instead of dexie.es.js. 我想调用dexie.js而不是dexie.es.js。 How do I make this happen. 我如何做到这一点。 I know I can set the mainFields property. 我知道我可以设置mainFields属性。 However how do I do this on a prelibrary basis instead of globally. 但是,我如何在预备基础上而不是在全球范围内这样做。

Not sure if I understand your requirement fully, but an option is to set up aliases in the webpack resolve 不确定我是否完全了解您的要求,但是可以选择在webpack解析中设置别名

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

  output: {
    ...
  },

  module: {
    rules: [
      ...
    ],

    noParse: /\.elm$/,
  },

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

  devServer: {
    ...
  },

};

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. 当您只编写require('dexie') ,webpack会在node_modules文件夹中查找名为'dexie'的文件夹,读取package.json并解析module属性描述的文件。 This is described here . 在这里描述。

For more info, please read the webpack docs . 有关更多信息,请阅读webpack文档 They are excellent. 他们很棒。

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM