Question

我刚开始学习使用Webpack（之前我只是使用手动方式单独包含单个脚本）。我使用bootstrap-loader来加载bootstrap。这是我的webpack.config.js

var path = require("path")
var webpack = require('webpack')
var BundleTracker = require('webpack-bundle-tracker')

module.exports = {
    context: __dirname,

    entry: './assets/js/index', // entry point of our app. assets/js/index.js should require other js modules and dependencies it needs

    output: {
        path: path.resolve('./assets/bundles/'),
        filename: "[name]-[hash].js",
    },

    plugins: [
        new BundleTracker({filename: './webpack-stats.json'})
    ],

    module: {
        loaders: [
            { test: /\.jsx?$/, exclude: /node_modules/, loader: 'babel-loader'}, // to transform JSX into JS
            { test: /\.css$/, loader: 'style-loader!css-loader'}, // to transform css
            // images
            { test: /\.png$/, loader: 'url-loader?limit=100000'},
            { test: /\.jpg$/, loader: 'file-loader'},
            // bootstrap image files
            { test: /\.(woff|woff2)(\?v=\d+\.\d+\.\d+)?$/, loader: 'url?limit=10000&mimetype=application/font-woff'},
            { test: /\.ttf(\?v=\d+\.\d+\.\d+)?$/, loader: 'url?limit=10000&mimetype=application/octet-stream'},
            { test: /\.eot(\?v=\d+\.\d+\.\d+)?$/, loader: 'file'},
            { test: /\.svg(\?v=\d+\.\d+\.\d+)?$/, loader: 'url?limit=10000&mimetype=image/svg+xml'}
        ],
    },

    resolve: {
        modulesDirectories: ['node_modules', 'bower_components'],
        extensions: ['', '.js', '.jsx'],
        jquery: './vendor/jquery/jquery.js',
    },
}

这是我的entry.js

global.jQuery = global.$ = require('jquery');
require('bootstrap-loader');

这似乎有效。但是，之前我使用过它并且它不起作用：

window.jQuery = window.$ = require('jquery');

我发现这么多人建议的上面一行。但我只是在加载页面时遇到错误。只是一些示例：some SO question，webpack issue，another SO question。

后来我找到了this question和this question。因此该页面实际上也可以使用bootstrap js功能。

我将添加我的package.json，以防相关：

{
  "author": "franklingu",
  "dependencies": {
    "babel": "^6.5.2",
    "babel-core": "^6.13.2",
    "babel-loader": "^6.2.4",
    "bootstrap-loader": "^1.2.0-beta.1",
    "bootstrap-sass": "^3.3.7",
    "extract-text-webpack-plugin": "^1.0.1",
    "jquery": "^3.1.0",
    "node-sass": "^3.8.0",
    "resolve-url-loader": "^1.6.0",
    "sass-loader": "^4.0.0",
    "webpack": "^1.13.1",
    "webpack-bundle-tracker": "0.0.93"
  },
  "devDependencies": {
    "babel-core": "^6.13.2",
    "babel-loader": "^6.2.4",
    "css-loader": "^0.23.1",
    "file-loader": "^0.9.0",
    "node-sass": "^3.8.0",
    "resolve-url-loader": "^1.6.0",
    "sass-loader": "^4.0.0",
    "style-loader": "^0.13.1",
    "url-loader": "^0.5.7",
    "webpack": "^1.13.1"
  }
}

我是webpack的新手，但我不是JS的新手。我想知道为什么window.$无效。

我想知道，对于webpack，为什么有人会在插件中提出这个问题：

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

有些人建议这样做（对我来说也不起作用）：

 resolve: {
    alias: {
        jquery: "jquery/src/jquery"
    }
}

我在节点玩了一段时间然后我记得那个节点使用请求js来加载（我不太清楚common和require vs amd之间的差异）。但为什么有些人会提到常见的js？

我正在开发后端一段时间，刚刚开始前端 - 这么多问题都出现了。如果你向我提供一些阅读指南的链接就足够了，这可以解除我的疑虑/建立我对这些的基本理解。

Answer 1

将其添加为插件

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

你应该可以在整个项目中使用jquery。

如果在添加插件后问题仍然存在，请尝试重新启动nodejs服务器。请务必使用jquery安装npm install --save jquery。

Answer 2

不需要插件。只需使用以下作为条目：

entry: [
    'jquery', //will load jquery from node_modules
    './assets/js/index',
]

然后在ES6 +文件中使用：

import $ from "jquery";

Answer 3

我知道这有点旧，但我设法这样做了：

global.jQuery = require（＆＃39; jquery＆＃39;）; 要求（＆＃39;自举＆＃39）;

Answer 4

很抱歉要解决一个老问题，但是我想与任何可能拥有与我相同用例的未来开发人员分享我的发现。

我需要使用 Webpack 4 （4.16.4）仅为 AngularJS （1.7.2）应用创建供应商捆绑包，而不是为应用捆绑包。。我认为，因为我只创建了供应商捆绑包，所以其他解决方案都无效。只有expose-loader为我工作，就像这样：

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

有关更多信息：https://github.com/webpack-contrib/expose-loader

Answer 5

在 webpack.common.js

中添加以下代码

str1 = "x".join([k for k in a.replace("(","").replace(")","").split(",")[:3]])
leftover = [float(a.replace("(","").replace(")","").split(",")[-1])]

重新启动服务器

＆＃39; jquery没有定义＆＃39;使用webpack加载bootstrap时

5 个答案: