Làm thế nào để thêm bản đồ ký tự đại diện trong entry của webpack

Question

tôi cần phải webpack tất cả các tập tin js trong kịch bản folder.I cố gắng này lỗi

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

Tôi nhận được như thế này,

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) 

Nó không tìm kiếm tất cả tệp js thay vì nó đang tìm kiếm * .js như thế. Giúp tôi hiểu những gì tôi đã bỏ lỡ

Answer 1

Giá trị entry phải giải quyết cho một tệp cụ thể hoặc danh sách tệp cụ thể.

Từ webpack docs:

Nếu bạn vượt qua một chuỗi: Chuỗi được giải quyết với một mô-đun đó là nạp khi khởi động.

Nếu bạn chuyển một mảng: Tất cả các mô-đun sẽ được tải khi khởi động. Lần xuất hiện cuối cùng là .

Nếu bạn chỉ đơn giản cố gắng xác định một mô-đun, hãy chỉnh sửa giá trị entry để trỏ đến tệp ứng dụng chính của bạn và sau đó yêu cầu các mô-đun khác từ đó.

Nếu bạn thực sự muốn bó tất cả các tập tin từ một thư mục, xem arseniews answer

Answer 2

Webpack đang chờ một cấu hình list of files cho cấu hình entry, chứ không phải là glob pattern.

Bạn sẽ phải liệt kê các tập tin bằng tay, hoặc tự động với mã này đoạn mã

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

và sau đó vượt qua nó để cấu hình webpack của.

Answer 3

Có một hoặc vài điểm vào nên là đủ cho hầu hết các trường hợp sử dụng, nhưng nếu bạn thực sự muốn bó lên tất cả các file từ thư mục mà bạn có thể sử dụng như sau:

Như đã giải thích ở đây: https://github.com/webpack/webpack/issues/370

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

Answer 4

tôi đã có một số vấn đề với đường dẫn tập tin trong Webpack 2.4.1, vì vậy làm này.

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' 
     }) 
    ] 
} 

Answer 5

Chỉ cần sử dụng glob.sync sẽ cho kết quả trong tên tập tin tuần tự, chẳng hạn như 0.[hash].js và 1.[hash].js, vì entry hy vọng một đối tượng với tên của tập tin trong khóa và vị trí của nó trong giá trị, nhưng glob.sync trả về một mảng.

Phương pháp sau có lợi ích khi tạo đối tượng có khóa và giá trị dựa trên tên tệp, bạn cũng có thể thêm mục nhập bổ sung, chẳng hạn như vendor và common. Yêu cầu 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') 
    } 
} 

Sau đó sẽ tạo ra các đối tượng sau đây và vượt qua nó để entry, với điều kiện chúng ta có index.js và app.js trong thư mục ./src:

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