如何的WebPack

Question

我需要的條目添加通配符映射到的WebPack在腳本中的所有js文件folder.I試過這種

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

entry值應解析爲特定文件或特定文件的列表。

從webpack docs：

如果你傳遞一個字符串：字符串被解析爲一個模塊，這是 在啓動時加載。

如果您傳遞數組：所有模塊在啓動時加載。最後一個輸出爲 。

如果您只是試圖定義一個模塊，請編輯entry值以指向您的主應用程序文件，然後需要其他模塊。

如果你真的想捆綁從一個目錄下的所有文件，請參閱arseniews answer

Answer 2

Webpack期待list of files爲entry配置，而不是glob pattern。

你必須手動列出文件，或自動與該代碼段

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

，然後把它傳遞給的WebPack的配置。

Answer 3

具有一個或幾個入口點應爲大多數的使用情況是足夠了，但如果你真的想從捆綁的所有文件目錄可以使用下列內容：

如這裏解釋：https://github.com/webpack/webpack/issues/370

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

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

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，只要我們在./src目錄index.js和app.js：

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