捆绑库时的Webpack和jQuery

时间:2019-07-15 15:56:47

标签: webpack

我不会将多个带有Webpack的库捆绑到index.js条目文件中。

现在,有些库始终会给出无法解决'jquery'错误,并且它们在代码顶部有一些共同点,如下所示:

  ...{"use strict";"function"==typeof define&&define.amd?define(["jquery"],a):"undefined"!=typeof exports?module.exports=a(require("jquery")):a(jQuery)}...

我尝试了以下Webpack配置:

externals: {
  jquery: 'jQuery'
},

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

即使我尝试使用import-loader和Exposure-loader。 同样在index.js文件中定义jQuery,例如:

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

import {$,jQuery} from 'jquery'

Someonw知道这里发生了什么吗?

Webpack构建正常,路径正确等。 我还安装了jquery作为依赖项。

当前的webpack配置:

const path                    = require('path');
const webpack                 = require('webpack');
const TerserPlugin            = require('terser-webpack-plugin');

process.noDeprecation = true;

module.exports = () => {
  return {
    entry: ['@babel/polyfill', path.resolve(__dirname, '../build', 'index.js')],
    output: {
      path: path.resolve(__dirname, '../'),
      filename: 'bundle.js'
    },
    externals: {
      jquery: 'jQuery'
    },
    module: {
      rules: [
        {
          test: /\.js$/,
          use: [
            {
              loader: 'babel-loader',
              options: {
                exclude: /node_modules/
              }
            }
          ]
        }
      ]
    },  
    optimization: {
      minimizer: [
        new TerserPlugin({
          test: /\.js(\?.*)?$/i,
          cache: true,
          parallel: true,
          sourceMap: true,
          terserOptions: {
            // ecma: 6,
            // mangle: true,
            output: {
              comments: false
            }
          }
        }),
      ],
      runtimeChunk: false,
      splitChunks: {
        cacheGroups: {
          default: false,
          commons: {
            test: /[\\/]node_modules[\\/]/,
            name: 'vendor_app',
            chunks: 'all',
            minChunks: 2
          }
        }
      }
    },
    plugins: [
      new webpack.ProvidePlugin({
        Cookies:  require('js-cookie'),
        _:        require('lodash'),
        jQuery:   require('jquery'),
        $:        require('jquery')
      }),
    ]
  }
};

0 个答案:

没有答案