Webpack配置 - 添加另一個條目文件

好吧，所以我遇到了React問題。所以我創建了一個NavBar組件，並將它以'home.js'的形式保存爲JSX形式，並且它完全在我的index.html中呈現。現在，我想創建一個「Login」組件，但是在創建新的'login.js'文件後不久，我意識到Webpack無法「看見」這個文件，因此它沒有被編譯。我發現這是因爲我沒有告訴Webpack配置來編譯這個新文件，我嘗試了很多不同的方法，但我無法讓Webpack編譯這兩個文件。任何幫助將不勝感激。Webpack配置 - 添加另一個條目文件

見我的WebPack配置如下圖：

var path = require('path'); 
var srcPath = path.join(__dirname, 'src'); 
var buildPath = path.join(__dirname, 'dist'); 

module.exports = { 
    context: srcPath, 
    entry: path.join(srcPath, 'js', 'home.js'), 
    output: { 
     path: buildPath, 
     filename: "bundle.js" 
    }, 
    module: { 
     loaders: [ 
      { 
      test: /\.jsx?$/, 
      exclude: /(node_modules|bower_components)/, 
      loader: 'babel', 
      query: { 
       presets: ['react', 'es2015'] 
      } 
      } 
     ] 
    } 
};

來源

2016-11-16 Manus Gallagher

我沒有你的代碼示例，但我希望這個解釋有效。使用導出和導入來定義文件的依賴關係。

如

navbar.js 

export class Navbar{ 
    // Write your component here 
} 

login.js 

var Navbar = require('./navbar'); 

export class Login{ 
    // Write your Login component here 
    // You can also use your navbar component here since it is imported 
}

你的WebPack切入點應該是登錄。導入將確保您的導航欄被拉入。

我希望能給你這個想法。我沒有你的代碼，所以我不能幫助超越此

來源

2016-11-16 11:31:42

對不起，現在就回到你身邊。非常感謝，這完全解決了我的問題。 :) –

很高興我能幫上忙 –

您可以設置條目對象，然後傳遞您need.I做這樣

module.exports = { 

    resolve: { 
    modulesDirectories: ['./node_modules', './resources/assets/scripts'] 
    }, 

    entry: { 
    main: './resources/js/main.js', 
    component: './resources/js/component.js' 
    // etc, etc 
    }, 

    output: { 
    path: path.join(__dirname, 'public/assets/js'), 
    filename: '[name].min.js' 
    }, 

}

如果你的文件中的所有文件入口點需要一些依賴於例如jQuery，你可以這樣做。

withDeps: ['jquery', './resources/js/withDeps.js']

來源

2016-11-16 11:20:42

Webpack配置 - 添加另一個條目文件

回答

相關問題