在jQuery和Bootstrap中使用Webpack 4

  • Z时代
  • 2024-01-10
  • 分类：问答

我觉得应该有一个直接在线的例子。不幸的是，我找不到一个。总之，我通过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和引导在我的应用程序？

回答：

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

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

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

没有在bootstrap documentation BTW

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

require('bootstrap');

以上是 在jQuery和Bootstrap中使用Webpack 4 的全部内容， 来源链接： utcz.com/qa/266656.html

回到顶部