Как добавить отображение подстановочных знаков при входе в webpack

Мне нужно webpack все js файл в папке script. Я пробовал это

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, как это. Помогите мне, что я пропустил

Ответ 1

Значение entry должно быть разрешено для определенного файла или списка определенных файлов.

Из webpack docs:

Если вы передаете строку: строка разрешена к модулю, который загружается при запуске.

Если вы передаете массив: все модули загружаются при запуске. Последний один экспортируется.

Если вы просто пытаетесь определить один модуль, отредактируйте значение entry, чтобы указать на ваш основной файл приложения, а затем потребовать от него другие модули.

Если вы действительно хотите связать все файлы из каталога, см. ответ arseniews

Ответ 2

Для большинства случаев использования достаточно одной или нескольких точек входа, но если вы действительно хотите собрать все файлы из каталога, вы можете использовать следующее:

Как описано здесь: https://github.com/webpack/webpack/issues/370

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

Ответ 3

Webpack ожидает список файлов для конфигурации entry, а не шаблон шара.

Вам нужно будет перечислить файлы вручную или автоматически с помощью этого фрагмента кода

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

а затем передайте его в конфигурацию webpack.

Ответ 4

У меня возникли проблемы с файловыми путями в Webpack 2.4.1, поэтому сделал это.

const HtmlWebpackPlugin = require('html-webpack-plugin');
const fs = require('fs');

function getEntries (){
    return fs.readdirSync('./src/pages/')
        .filter(
            (file) => file.match(/.*\.js$/)
        )
        .map((file) => {
            return {
                name: file.substring(0, file.length - 3),
                path: './pages/' + file
            }
        }).reduce((memo, file) => {
            memo[file.name] = file.path
            return memo;
        }, {})
}

const config = {
    entry: getEntries, 
    output: {
        path: resolve('./public'),
        filename: '[name].js'
    },
    plugins: [
        new HtmlWebpackPlugin({
            title: 'My App',
            filename: '[name].html',
            template: './pages/_template.html'
        })
    ]
}

Ответ 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' ]
}