Webpack 2加載，暴露和捆綁jQuery和引導

這已被零碎地提出，但似乎沒有人能夠解決答案。我非常簡單地試圖捆綁jquery THEN bootstrap並且在全球範圍內有$,JQuery和bootstrap。Webpack 2加載，暴露和捆綁jQuery和引導

這裏是我的webpack.config.js

var webpack = require('webpack'); 

module.exports = { 
    entry: { 
     accountdetails: './src/main/webapp/public/js/accountdetails.js', 
     vendor_jquerybs: ['jquery', 'bootstrap'] 
    } 
    , 
    module:{ 
     loaders: [{ 
      test: /\.jsx?$/, 
      exclude: /node-modules/, 
      loader: 'babel-loader' 
     }] 
    }, 
    resolve: { 
     extensions: ['.js', '.jsx'] 
    }, 
    output: { 
     path: __dirname + '/src/main/webapp/public/js/dist', 
     publicPath: '/', 
     filename: '[name].bundle.js' 
    }, 
    devServer: { 
     contentBase: './dist' 
    } 
};

這妥善捆綁。它作爲我的第一個<script>在<head> 加載但我得到控制檯問題，如：「$未定義」，「jQuery沒有定義」。

如何編寫此配置以公開全局jQuery/$和bootstrap？ Webpack文檔說，CommonChunksPlugin,expose-loader等等。這樣做的最好方法是什麼？我很困惑的文件。

謝謝。

來源

2017-06-15 Tamb

在這裏找到https://github.com/webpack-contrib/expose-loader

的答案模塊expose-loader而且顯然需要公開對象，類，等來的窗口。

module: { 
    rules: [{ 
      test: require.resolve('jquery'), 
      use: [{ 
       loader: 'expose-loader', 
       options: 'jQuery' 
      },{ 
       loader: 'expose-loader', 
       options: '$' 
      }] 
     }] 
}

注意：糾正我，如果我錯了，但是那裏不需要公開全局引導。 jQuery就足夠了。

現在全配置：

var webpack = require('webpack'); 

module.exports = { 
    entry: { 
     accountdetails: './src/main/webapp/public/js/accountdetails.js', 
     vendor_jquerybs: ['jquery', 'bootstrap'] 
    } 
    , 
    module:{ 
     loaders: [ 
      { 
      test: /\.jsx?$/, 
      exclude: /node-modules/, 
      loader: 'babel-loader' 
      }, 
      { 
      test: require.resolve('jquery'), 
      use: [{ 
       loader: 'expose-loader', 
       options: 'jQuery' 
       }, 
       { 
       loader: 'expose-loader', 
       options: '$' 
       }] 
      } 
     ] 
    }, 
    resolve: { 
     extensions: ['.js', '.jsx'] 
    }, 
    output: { 
     path: __dirname + '/src/main/webapp/public/js/dist', 
     publicPath: '/', 
     filename: '[name].bundle.js' 
    }, 
    devServer: { 
     contentBase: './dist' 
    } 
};

注意：您不能從入口點刪除 'jQuery的'。

來源

2017-06-15 14:33:41 Tamb

就我而言，我並不需要公開全局引導（插件）。我的錯誤是，當插件還需要'jQuery'時，我只公開'$'。 – Chad

Webpack 2加載，暴露和捆綁jQuery和引導

回答

相關問題