Question

我需要webpack所有js文件在脚本文件夹中。我试过这个

module.exports = {
  module: {
    loaders: [
      {
        test: /\.js$/,
        exclude: /node_modules/,
        loaders: ["babel-loader"],
      }
    ],
  },
  entry: "./src/scripts/*.js",
  output: {
    path: './src/build',
    filename: '[name].js'
  }
};

我收到这样的错误，

ERROR in Entry module not found: Error: Cannot resolve 'file' or 'directory' ./s
rc/scripts/* in E:\Web project\ReactJS\react-tutorial
resolve file
  E:\Web project\ReactJS\react-tutorial\src\scripts\* doesn't exist
  E:\Web project\ReactJS\react-tutorial\src\scripts\*.webpack.js doesn't exist
  E:\Web project\ReactJS\react-tutorial\src\scripts\*.web.js doesn't exist
  E:\Web project\ReactJS\react-tutorial\src\scripts\*.js doesn't exist
  E:\Web project\ReactJS\react-tutorial\src\scripts\*.json doesn't exist
resolve directory
  E:\Web project\ReactJS\react-tutorial\src\scripts\* doesn't exist (directory d
efault file)
  E:\Web project\ReactJS\react-tutorial\src\scripts\*\package.json doesn't exist
 (directory description file)

它没有搜索所有的js文件，而是搜索那样的* .js。帮助我找出我错过的文件

Answer 1

对于大多数用例而言，只有一个或几个入口点就足够了，但如果您真的想要从目录中捆绑所有文件，则可以使用以下内容：

如此处所述：https://github.com/webpack/webpack/issues/370

var glob = require("glob");
// ...
entry: glob.sync("./src/scripts/*.js")

Answer 2

Webpack期望entry配置为list of files，而不是glob pattern。

您必须手动列出文件，或使用此代码段自动列出文件

var fs = require('fs'),
    entries = fs.readdirSync('./src/scripts/').filter(function(file) {
        return file.match(/.*\.js$/);
    });

然后将其传递给webpack的配置。

Answer 3

entry值应解析为特定文件或特定文件列表。

来自webpack docs：

如果传递字符串：字符串被解析为一个模块   在启动时加载。

如果传递数组：启动时加载所有模块。最后   一个出口。

如果您只是尝试定义一个模块，请编辑entry值以指向主应用程序文件，然后需要其他模块。

如果您真的想要捆绑目录中的所有文件，请参阅arseniews answer

Answer 4

我在Webpack 2.4.1中遇到了一些文件路径问题，所以这样做了。除了多个条目外，还会创建多个.html文件。

==7035== Memcheck, a memory error detector
==7035== Copyright (C) 2002-2012, and GNU GPL'd, by Julian Seward et al.
==7035== Using Valgrind-3.8.1 and LibVEX; rerun with -h for copyright info
==7035== Command: /tmp/e3event-daemon -c /etc/e3event-daemon/config.json
==7035== 
==7035== 
==7035== HEAP SUMMARY:
==7035==     in use at exit: 4 bytes in 1 blocks
==7035==   total heap usage: 421 allocs, 420 frees, 148,246 bytes allocated
==7035== 
==7035== 4 bytes in 1 blocks are definitely lost in loss record 1 of 1
==7035==    at 0x4834558: operator new(unsigned int) (in /usr/lib/valgrind/vgpreload_memcheck-arm-linux.so)
==7035== 
==7035== LEAK SUMMARY:
==7035==    definitely lost: 4 bytes in 1 blocks
==7035==    indirectly lost: 0 bytes in 0 blocks
==7035==      possibly lost: 0 bytes in 0 blocks
==7035==    still reachable: 0 bytes in 0 blocks
==7035==         suppressed: 0 bytes in 0 blocks
==7035== 
==7035== For counts of detected and suppressed errors, rerun with: -v
==7035== ERROR SUMMARY: 1 errors from 1 contexts (suppressed: 0 from 0)

Answer 5

只使用glob.sync会产生顺序文件名，例如0.[hash].js和1.[hash].js，因为entry需要一个对象，其中包含密钥中文件的名称，它在值中的位置，但glob.sync返回一个数组。

以下方法的好处是可以根据文件名生成包含键和值的对象，还可以添加其他条目，例如vendor和common。需要lodash。

const glob = require("glob");
const _ = require('lodash');

module.exports = {
  entry: Object.assign({},
    _.reduce(glob.sync("./src/*.js"),
      (obj, val) => {
        const filenameRegex = /([\w\d_-]*)\.?[^\\\/]*$/i;
        obj[val.match(filenameRegex)[1]] = val;
        return obj;
      },
    {}),
    {
      vendor: [
        'lodash'
      ]
    }
  ),
  output: {
    filename: '[name].[chunkhash].bundle.js',
    path: path.resolve(__dirname, 'dist')
  }
}

后者将生成以下对象并将其传递给entry，前提是index.js目录中有app.js和./src：

{
    index: './src/index.js',
    app: './src/app.js',
    vendor: [ 'lodash' ]
}

如何在webpack的入口中添加通配符映射

5 个答案: