在jQuery和Bootstrap中使用Webpack 4

我觉得应该有一个直接在线的例子。不幸的是，我找不到一个。总之，我通过Yarn导入Bootstrap 4。 Bootstrap 4的一个依赖是jQuery。这两个依赖项将在我的应用程序的所有页面上使用。出于这个原因，我想通过Webpack将它们捆绑在一起。目前，我有以下几点：在jQuery和Bootstrap中使用Webpack 4

app.js

// Import jQuery 
const $ = require('jquery'); 

// Import Bootstrap 
require('bootstrap/dist/css/bootstrap.min.css');

然后，在我的webpack.config.js文件，我有以下几点：

webpack.config.js

"use strict"; 

const path = require('path'); 

const webpack = require('webpack'); 

module.exports = { 
    entry: { 
     app: './src/js/app.js', 
    }, 
    plugins: [ 
     new webpack.ProvidePlugin({$: 'jquery', jQuery: 'jquery' }), 
     new webpack.optimize.CommonsChunkPlugin({ name: 'common' }), 
     new webpack.optimize.UglifyJsPlugin() 
    ], 
    output: { 
     publicPath: "/js/", 
     path: path.join(__dirname, '/dist/js/'), 
     filename: '[name].bundle.js' 
    }, 
    module: { 
     rules: [ 
      { 
       test: /\.js$/, 
       loader: 'babel-loader', 
       exclude: /(node_modules)/, 
       query: { 
        presets: ['es2015'] 
       } 
      }, 
      { 
       test: /\.css$/, 
       loaders: ['style-loader', 'css-loader'] 
      }, 
     ] 
    }, 
}

但是，当我访问我的页面中的一个webpack时，我看到以下错误：

未捕获的ReferenceError：未定义的jQuery 未捕获的ReferenceError：$没有定义

如何通过的WebPack捆绑jQuery和引导在我的应用程序？

来源

2017-10-12 Zach Templeton

我不知道Webpack，但你的页面上包含jQuery的地方？它必须在第一个实例被调用之前被包含（比如在页面中更高的位置），否则它会抛出这个错误。 – Tijmen

一旦将它设置为webpack配置中的插件，就不需要使用jQuery。 –

我正在引用页面的head元素中的包。然后我在最后引用jQuery。 –

正如@里克面包车，OSTA指出：你不需要jQuery的要求，因为你已经通过提供插件加载它（这将创建全局变量$）：

new webpack.ProvidePlugin({$: 'jquery', jQuery: 'jquery' }),

从你的app.js中删除行const $ = require('jquery');，你应该很好去。

没有在bootstrap documentation BTW

也因为使用的是node_modules，你应该能够改变你的app.js到的WebPack进入：

require('bootstrap');

来源

2017-10-13 12:39:00 user1859022

在jQuery和Bootstrap中使用Webpack 4

回答

相关问题