我输出的错误:

配置对象无效.Webpack已使用与API架构不匹配的配置对象进行初始化. - configuration.module有一个未知的属性'loaders'.这些属性是有效的:object {exprContextCritical？,exprContextRecursive？,exprContextRegExp？,exprContextRequest？,noParse ?, rules？,defaultRules？,unknownContextCritical？,unknownContextRecursive？,unknownContextRegExp？,unknownContextRequest？,unsafeCache？,wrappedContextCritical？,wrappedContextRecursive？,wrappedContextRegExp ？,strictExportPresence？,strictThisContextOnImports？} - >影响正常模块的选项(NormalModuleFactory).

我的webpack.config.js:

var webpack = require('webpack');
var path = require('path');

var BUILD_DIR = path.resolve(__dirname, 'src/client/public');
var APP_DIR = path.resolve(__dirname, 'src/client/app');

var config = {
  entry: APP_DIR + '/index.jsx',
  module : {
    loaders : [
      {
        test : /\.jsx?/,
        include : APP_DIR,
        loader : 'babel-loader'
      }
    ]
  },
  output: {
    path: BUILD_DIR,
    filename: 'bundle.js'
  }

};


module.exports = config;

我的webpack版本:

webpack@4.1.1

我探索使用的想法的WebPack与Backbone.js的.

我已经按照快速入门指南了解了Webpack的工作原理,但我不清楚如何加载依赖库,如jquery/backbone/underscore.

它们应该在外部加载<script>吗？或者这是Webpack可以处理的东西,如RequireJS的垫片？

按照的WebPack DOC:垫补模块,ProvidePlugin并且externals似乎与此有关(因此是bundle!装载机的地方),但我不能想出什么时候使用.

谢谢

我刚刚开始学习使用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
            { …

1. ProvidePlugin()

看起来像是一种常用的方法.有一个关于它的要点,展示如何将whatwg-fetch polyfill包含在Webpack构建中.StackOverflow上的很多答案都在这里和这里使用它.

new webpack.ProvidePlugin({
  '$': 'jquery',
  'jQuery': 'jquery',
  'fetch': 'imports?this=>global!exports?global.fetch!whatwg-fetch'
})

优点

• 有用.(如果我遗漏了某些内容,请更新此列表)

缺点

• 需要在Webpack配置中跟踪全局库.

2. entry: [...]

当我在这个要点中发现它时,我对这种方法感到有些惊讶,但它的效果也一样.

entry: [
    'babel-polyfill',
    'whatwg-fetch',
    'jquery',
    'webpack-hot-middleware/client',
    path.join(process.cwd(), 'app/app.js')
],

优点

• 有用.
• 我可以ProvidePlugin()完全放弃.

缺点

• 需要在Webpack配置中跟踪全局库.

3.顶级 import

这个非常简单,请看这个app.js示例.此文件是React应用程序的入口点.

/**
 * app.js
 */

import 'whatwg-fetch';
import 'babel-polyfill';
import 'jquery';

优点

• 它的工作原理也一样.
• 轻松添加/删除.无需触摸Webpack配置.

缺点

• 看起来这种方法看起来不适用于jQuery插件,例如bootstrap.js.

观察:在所有三种方法之间,我没有注意到束大小的任何变化.

是否有一种推荐的使用Webpack(和React)处理全局库的方法？这些解决方案中的任何一个都会在服务器端渲染的情况下引发问题吗？

谢谢!

TL; DR 使用插件扩展jQuery对象的正确方法是什么,在全局中公开它并在webpack中使用带有ES6模块的外部AMD库？webpack是否适合完成任务,或者SystemJ是否适合将遗留应用程序重构为ES6模块的情况？

我正在尝试使用webpack和ES6模块.我有一个遗产主要是jquery应用程序,我目前正在转换.我面临以下挑战:

1. 在webpack/babel-loader工作流程中找到最佳实践
2. 弄清楚哪个加载器/插件用于哪个目的
3. 获得像jquery和jquery插件这样的AMD资源,以便与其他模块一起使用.
4. 暴露jquery全局变量,扩展了所有插件和jquery-ui

我依赖以下资源:这个很好的答案解释了很多,虽然它没有提到我主要依赖的出口加载程序:https: //stackoverflow.com/a/28989476/2613786

http://webpack.github.io/docs/shimming-modules.html - 文档列出了许多可能性,但我没有经验来决定哪一个是正确的.似乎最好使用ProvidePlugin而不是expose-loader.可悲的是,我没有使用扩展的jQuery对象.它也不能用于<script>标记中调用的模块函数.

我仍然很难找到编程解决方案,并决定哪个webpack插件是正确的.非常感谢来自经验丰富的webpack用户的一些建议或示例.

在我的webpack.config.js我有以下装载机暴露jquery和巴贝尔变换:

module: {
    loaders: [
        { 
            test: /\.js$/, 
            exclude: /node_modules/,
            loader: 'babel-loader',
            query: {modules: 'common'}
        },
        {
            test: /jquery\.js$/,
            exclude: /node_modules/,
            loader: 'expose?jQuery',
        },
        {
            test: /jquery\.js$/,
            exclude: /node_modules/,
            loader: 'expose?$',
        },
        {
            test: /[\/\\]vendor[\/\\]jquery.sparkline\.js$/,
            loader: "imports?define=>false"
        }
    ]
},
amd: { jQuery: true },
// plugins: [
//     new webpack.ProvidePlugin({
//        $: 'jquery',
//        jQuery: 'jquery',
//        'window.jQuery': 'jquery', …

我正在尝试使用Webpack的bootstrap- daterangepicker.在我的视图文件中,我有以下内容:

define(function (require) {
    require('bootstrap-daterangepicker');

    $('#daterangepicker').daterangepicker({ ... });
});

并在webpack.config.js:

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

这导致了daterangepicker is not a function.我看了一下daterangepicker.js,似乎$.fn.daterangepicker没有正确导出.我该怎么做？我曾尝试使用imports-loader强制导入jQuery,但这没有帮助.

我正在尝试使用带有webpack和typescript的datatables JQuery插件.我已经有了JQuery并且与typings(intelliSense工作)一起运行,对于我只有intelliSense的数据表,但在运行应用程序之后构建webpack时,代码在$('#id')时失败.atataTable()线.

app.js:43Uncaught TypeError: $(...).dataTable is not a function

我无法弄清楚如何正确附加此插件,有人可以帮助我吗？

webpack.config.js如下; https://gist.github.com/marcingolenia/2fa78ed2cd42f9294da5edd22d351245

我希望这条线能解决问题;

{ test: require.resolve("dataTables.net"), loader: "imports?define=>false,$=jquery"},

正如进口装载机的文件所说;

在使用CommonJS之前,有许多模块检查define函数.由于webpack能够兼顾两者,因此在这种情况下它们默认为AMD,如果实现是古怪的,这可能是一个问题.

datatables提供了两者,所以我想使用这里提到的define => false来禁用AMD https://www.datatables.net/forums/discussion/32542/datatables-and-webpack

现在我被卡住了:(

我有一个非常简单的项目来测试运行jQuery函数与webpack.但是我在捆绑步骤遇到了错误.以下是错误:

ERROR in ./~/jQuery/lib/node-jquery.js
Module not found: Error: Cannot resolve module 'jsdom' in /home/mypc/IdeaProject/OpenDimSum/frontend/node_modules/jQuery/lib
 @ ./~/jQuery/lib/node-jquery.js 5:13-29

ERROR in ./~/jQuery/lib/node-jquery.js
Module not found: Error: Cannot resolve module 'xmlhttprequest' in /home/mypc/IdeaProject/OpenDimSum/frontend/node_modules/jQuery/lib
 @ ./~/jQuery/lib/node-jquery.js 8:28-53

ERROR in ./~/jQuery/lib/node-jquery.js
Module not found: Error: Cannot resolve module 'location' in /home/mypc/IdeaProject/OpenDimSum/frontend/node_modules/jQuery/lib
 @ ./~/jQuery/lib/node-jquery.js 13:24-43

ERROR in ./~/jQuery/lib/node-jquery.js
Module not found: Error: Cannot resolve module 'navigator' in /home/mypc/IdeaProject/OpenDimSum/frontend/node_modules/jQuery/lib
 @ ./~/jQuery/lib/node-jquery.js 17:25-45

这是我的配置文件:
package.json

{
  "name": "frontend",
  "version": "1.0.0",
  "description": "",
  "main": "index.jsx",
  "scripts": {
    "test": "echo …

我已select2通过以下方式下载为节点模块:

npm install select2

并把它包括在我的app.js:

require('select2')($);

Uncaught TypeError: Object.defineProperty called on non-object(…)

来自select2.js:

S2.define('select2/core',[
  'jquery',
  './options',
  './utils',
  './keys'
], function ($, Options, Utils, KEYS) {
(...)
}

是否因为模块封装器select2仅适用于AMD且与CommonJS不兼容而发生？

我在webpack上使用jquery时遇到问题。我的代码：

const path = require('path');
const webpack = require('webpack');
const CleanWebpackPlugin = require('clean-webpack-plugin');
const ExtractTextPlugin = require("extract-text-webpack-plugin");
const UglifyJsPlugin = require('uglifyjs-webpack-plugin');
const CompressionPlugin = require("compression-webpack-plugin");

module.exports = {
    entry: {
        vendor: [
            './src/main/webapp/js/vendor/jquery-3.3.1.min.js',
            // './src/main/webapp/js/vendor/fs.js',
            './src/main/webapp/js/vendor/google-adsense.js',
            './src/main/webapp/js/vendor/jquery.menu-aim.min.js',
            './src/main/webapp/js/vendor/jquery.touchSwipe.min.js',
        ],
        app: './src/main/assets/js/desktop/app.js',
        mobile: './src/main/assets/js/mobile/app.js',
        touch: './src/main/assets/js/touch/app.js',
    },
    module: {
        rules: [{
                test: /\.js$/,
                exclude: /(node_modules|bower_components)/,
                use: {
                    loader: 'babel-loader',
                    options: {
                        presets: ['@babel/preset-env']
                    }
                }
            },
            {
                test: require.resolve('jquery'),
                loader: 'expose-loader?jQuery!expose-loader?$'
            }
        ],
    },
    plugins: [
        // new CleanWebpackPlugin(['src/main/webapp/assets']),
        new webpack.optimize.CommonsChunkPlugin({ …