Question

我正在将我的项目从RequireJS迁移到Webpack 4.6，我在设置方面遇到了一些困难。我对Webpack很陌生，所以对我来说有点复杂，所以也许我只是不明白。

我正在尝试将填充设置从requireJS配置迁移到webpack配置。

这是 require.config.js 中的旧设置。为了便于阅读，我从片段中删除了路径，但它就在那里。

require.config({
    baseUrl: typeof(templateBaseUrl) !== 'undefined' ? templateBaseUrl : '../js',
    waitSeconds: 45,
    shim: {
        'menu-aim': {
            deps: ['jquery']
        },
        'bootstrap/dropdown': {
            exports: 'jQuery.fn.dropdown'
        },
        'bootstrap-select': {
            deps: [
                'bootstrap/dropdown'
            ],
            exports: 'jQuery.fn.selectpicker'
        },
        'colorbox': {
            deps: [
                'jquery.browser'
            ],
            exports: 'jQuery.fn.colorbox'
        },
        'conditioner': {
            deps: [
                'utils/Observer',
                'utils/Promise'
            ]
        },
        'cookie': {
            exports: 'monster'
        },
        'jquery.browser': {
            exports: 'jQuery.browser'
        },
        'jquery.easing': {
            exports: 'jQuery.easing'
        },
        'jScrollPane': {
            deps: [
                'jquery.mousewheel'
            ],
            exports: 'jQuery.fn.jScrollPane'
        },
        'jQuery.serializeObject': {
            exports: 'jQuery.fn.serializeObject'
        },
        'jt.history': {
            exports: 'jQuery.tools.history'
        },
        'jt.tabs': {
            exports: 'jQuery.tools.tabs'
        },
        'jt.validator': {
            exports: 'jQuery.tools.validator'
        },
        'lodash': {
            exports: '_'
        },
        'modernizr': {
            exports: 'Modernizr'
        },
        'miuri': {
            exports: 'miuri'
        },
        'mobiledetect': {
            exports: 'MobileDetect'
        },
        'dateformatter': {
            exports: 'DateFormatter'
        },
        'attrchange': {
            exports: 'jQuery.fn.attrchange'
        },
        'datetimepicker': {
            deps: [
                'dateformatter'
            ],
            exports: 'jQuery.datetimepicker'
        }
    },
    paths: {

    },
    map: {
        '*': {
            'conditioner': '../vendor/conditioner/conditioner',
            'jquery.tools': '../vendor/jquery.tools/src',
            'underscore': 'lodash',
            'pubsub': 'pubsub-js'
        }
    },
    packages: []
});

起初我使用webpack.config而没有配置，只需使用入口点和模块别名进行简单设置。运行 npx webpack 后，构建运行成功，但我收到了警告：

> WARNING in ./node_modules/conditioner-js/dist/min/conditioner.js
> 4:17525-17532 Critical dependency: require function is used in a way
> in which dependencies cannot be statically extracted  @
> ./node_modules/conditioner-js/dist/min/conditioner.js  @
> ./src/js/lib/conditional-loader.js  @ ./src/js/app.js

webpack.config.js

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

module.exports = {
    mode:   'development',
    entry: './src/js/app.js',
    output: {
        filename: 'bundle.js',
        path: path.resolve('../../Public/js', 'dist'),
        publicPath: "/Resources/Public/js/dist/"
    },

    resolve: {
        modules: [
            "node_modules",
            "./src/js"
        ],
        alias: {
            "jquery.tools":                 "@bower_components/jquery.tools/src",
            "underscore":                   "lodash",
            "pubsub":                       "pubsub-js",
            "parsley":                      "parsleyjs",
            "miuri":                        "miuri.js",
            "jScrollPane":                  "jscrollpane",
            "datetimepicker":               "jquery-datetimepicker",
            "cookie":                       "cookie-monster",
            "conditioner":                  "conditioner-js",
            "colorbox":                     "jquery-colorbox",
            "jQuery.serializeObject":       "@bower_components/jQuery.serializeObject",
            "jQuery.touchswipe":            "jquery-touchswipe",
            "jquery.browser":               "@bower_components/jquery.browser",
            "jquery.easing":                "@bower_components/jquery.easing/js/jquery.easing",
            "jt.tabs":                      "@bower_components/jquery.tools/src/tabs/tabs",
            "jt.validator":                 "@bower_components/jquery.tools/src/validator/validator",
            "bootstrap-select":             "bootstrap-select/dist/js/bootstrap-select"
        }
    }
};

我猜测丢失填充设置肯定有问题，因为虽然构建已运行页面正在加载错误。所以我将官方文档中的exports-loader和import-loader添加到webpack.config

plugins: [
        new webpack.ProvidePlugin({
            $: 'jquery',
            jQuery: 'jquery'
        })
    ],
    module: {
      rules: [
          {
              test: require.resolve('jquery-colorbox'),
              use: "exports-loader?colorbox=jQuery.fn.colorbox"

          },
          {
              test: require.resolve('conditioner-js'),
              use: "imports-loader?utils/Observer,utils/Promise"
          }
      ]
    },

我为护士和彩盒模块添加了shim config以便开始使用。但是，当在需要它们的模块中构建时，它们都会给我一些错误。

ERROR in ./src/js/lib/lightbox.js
Module not found: Error: Can't resolve 'exports-loader' in '/pathToCustomJsFolder/'
 @ ./src/js/lib/lightbox.js 4:19-38

ERROR in ./src/js/lib/conditional-loader.js
Module not found: Error: Can't resolve 'imports-loader' in '/pathToCustomJsFolder/'
 @ ./src/js/lib/conditional-loader.js 3:20-42

在两个模块中lightbox.js或conditional-loader.js我正在使用AMD模块语法，并且在抛出错误的行上我只是调用需要调用。 e.g

var colorbox = require('colorbox'); //in lightbox.js
var conditioner = require('conditioner'); //in conditional-loader.js

我想弄清楚我一天做错了什么，阅读了很多教程，但我不知道问题出在哪里。如果有人能帮助我，我将非常感激。非常感谢！

从Webpack中的RequireJS填充deps和导出

0 个答案: