Webpack 2：如何從Bootstrap預製模板生成bundle.js？

我想生成該-esxisting預引導模板bundle.js（它使用較少）https://github.com/BlackrockDigital/startbootstrap-sb-admin-2 Webpack 2：如何從Bootstrap預製模板生成bundle.js？

我試圖生成，但我失敗了，因爲從來沒有產生的樣式和bundle.js是空的，因爲你可以在「dist」文件夾中看到（這是預期的，因爲index.js是入口點也是空的。https://github.com/juanlet/webpack。我應該怎麼做才能使webpack2包含所有js，css和更少的文件模板，並把它放在一個bundle.js中？我應該在index.js入口文件中包含每個文件嗎？我沒有想法，任何文章，文檔或指令都會非常受歡迎，非常感謝。

來源

2017-02-16 Juan

此模板不使用webpack ...你是否試圖用webpack替換gulp實現？ - 如果是這樣，你可以顯示你迄今爲止所做的事嗎？ – thesublimeobject

我知道它沒有使用webpack，是的，我試圖用webpack替換gulp，到目前爲止我所做的是在我的文章的第二個鏈接上，webpack項目，我只是把所有內容放在一個文件夾中，並把app.js文件作爲入口點，但我不知道如何將每個單獨的模板文件包含到生成的bundle.js – Juan

哦對不起，我錯過了那個鏈接！讓我看看，對不起。 – thesublimeobject

如果你想建立這個與webpack，你的第一步實際上是使用任何你的入口點是import或require其他庫/文件。

因此，舉例來說，如果你在你的wepback.config.js切入點是

entry: { 
    bundle: './src/js/api/index.js', 
    vendor: VENDOR_LIBS 
},

然後該文件需要包含imports您希望在該文件中包含。然後這些文件包含其他文件等，直到您將所有文件通過樹的根目錄（索引）捆綁在一起。以一種非常簡單的方式，這就是webapack所做的：它會導入/需要您的文件，捆綁它們，並根據您的配置加載它們。

爲了加載/編譯你少，你將不得不將它作爲你的JS文件的導入，或者你也可以使用extract-text-webpack-plugin生成一個單獨的CSS包。

這是我可以給這個問題的最好的概述，因爲我不知道你想要把你的代碼捆綁它的確切方式。如果您有這些問題，請隨時提問，並且我會編輯我的答案以嘗試並幫助解答。

編輯：這是一箇舊配置的例子，我已經將SASS提取到它自己的文件中。它使用v1，但它對於webpack 2或多或少都是一樣的。我現在只是沒有示例：（Here是在第2版中使用extract的文檔，有點不同但不是太多）。

module.exports = { 
    devtool: 'eval', 

    entry: [ 
     'webpack-dev-server/client?http://localhost:3000', 
     'webpack/hot/only-dev-server', 
     'babel-polyfill', 
     './app/index', 
    ], 

    resolve: { 
     extensions: ['', '.js'] 
    }, 

    output: { 
     path: path.join(__dirname, 'public'), 
     filename: 'bundle.js', 
     publicPath: '/public/' 
    }, 

    plugins: [ 
     new webpack.HotModuleReplacementPlugin(), 
     new ExtractTextPlugin('public/app.css'), 
     new DashboardPlugin(dashboard.setData) 
    ], 

    module: { 
     loaders: [{ 
      test: /\.js$/, 
      loaders: ['react-hot', 'babel'], 
      include: path.join(__dirname, '..', 'app') 
     }, 

     // JSON 
     { 
      test: /\.json$/, 
      loaders: ['json-loader'] 
     }, 

     // Img 
     { 
      test : /\.(png|jpg|svg|eot|ttf|woff|raw)$/, 
      loader: 'url-loader?limit=4096' 
     }, 

     // Sass 
     { 
      test: /\.scss$/, 
      loaders: [ 'style', 'css?sourceMap', 'postcss', 'sass?sourceMap' ] 
     }] 
    }, 

    postcss: [autoprefixer({ browsers: ['last 2 versions'] })], 
}

主要編輯：

一個例子回購存在的位置：https://github.com/thesublimeobject/webpack2example

運行的WebPack將捆綁您的文件，從我創建了一個index.js文件導入。這捆綁了我通過npm安裝的所有外部庫，並將它們從index.html文件中刪除。我沒有測試任何生成的代碼，因爲這超出了對這個問題的答案。您的LESS也將被捆綁到dist文件夾中作爲一個單獨的文件，您將需要在HTML中提供一個鏈接（這是我忘記添加鏈接到/ dist的一件事，但我相信你可以做到這一點

來源

2017-02-16 04:09:32 thesublimeobject

我只是想要你看到的模板輸出完全相同，如果你使用xampp放置該文件夾，沒有什麼奇特的。所以，基本上你是在告訴我，這個模板對於「翻譯」到webpack是一種痛苦，我應該找到另一個模板或者放棄webpack。模板的html內容會發生什麼？因爲你只提及less和js文件，但不提供索引和所有其他html文件中的html – Juan

它不會太痛苦。您只需使用npm安裝所有供應商腳本，然後在頂部輸入「import」，然後將該源代碼的其餘部分複製/粘貼到該文件中，如果這對您有用的話。這將照顧JS。對於LESS，如果你只是使用'extract-text-webpack-plugin'，那麼生成一個單獨的CSS文件應該很容易。 – thesublimeobject

和html文件？ – Juan

Webpack 2：如何從Bootstrap預製模板生成bundle.js？

回答

相關問題