ReferenceError: $ не определено в веб-пакете 4 - PullRequest
Новая
       7

ReferenceError: $ не определено в веб-пакете 4

0 голосов
/ 27 октября 2018

Использование Webpack 4 Я создаю свой UI build.При включении jquery я получаю сообщение об ошибке в сборке Webpack

ReferenceError: $ не определено

Я вижу код jquery в файле vendors.js, который загружается с помощью webpack.ProvidePlugin .

Кроме того, я использовал expose-loader .

Вот мой конфиг Webpack 

const path = require('path');

const webpack = require('webpack');
const SRC_PATH = path.resolve(__dirname, 'catalog/view/');
const DIST_PATH = path.resolve(__dirname, 'catalog/view/prod');
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
const CleanWebpackPlugin = require('clean-webpack-plugin');
const CopyWebpackPlugin = require('copy-webpack-plugin');
const UglifyJsPlugin = require('uglifyjs-webpack-plugin');
const OptimizeCSSAssetsPlugin = require("optimize-css-assets-webpack-plugin");
const ManifestPlugin = require('webpack-manifest-plugin');

const config = (env, argv) => ({
    context: SRC_PATH,
    entry: './app.js',
    output: {
      filename: '[name].js',
      path: DIST_PATH,
    },
    //mode: argv.mode  === 'production' ? 'production' : 'development',
    devtool: argv.mode  === 'production' ? 'source-maps' : 'eval',
    module: {
      rules: [
        {
          test: /\.js$/,
          include: SRC_PATH,
          use: {
            loader: "babel-loader",
            options: {
              presets: ["@babel/preset-env"]
            }
          }

        },
        {
          test: /\.(sa|sc|c)ss$/,
          use: [
            MiniCssExtractPlugin.loader,
            'css-loader'
          ]
        },
        {
          test: /\.(woff(2)?|ttf|eot|svg)(\?v=\d+\.\d+\.\d+)?$/,
          use: [{
            loader: 'file-loader',
            options: {
              name: '[name].[ext]',
              outputPath: 'fonts/'
            }
          }]
        },
        {
          test: require.resolve('jquery'),
          use: [{
            loader: 'expose-loader',
            options: 'jQuery'
          }, {
            loader: 'expose-loader',
            options: '$'
          }]
        }
      ],
    },
    optimization: {
      minimizer: [
        new UglifyJsPlugin({
          cache: true,
          parallel: true,
          sourceMap: true // set to true if you want JS source maps
        }),
        new OptimizeCSSAssetsPlugin({})
      ],
      runtimeChunk: {
        name: 'runtime'
      },
      splitChunks: {
        chunks: 'all',
        minSize: 30000,
        maxSize: 0,
        minChunks: 1,
        maxAsyncRequests: 5,
        maxInitialRequests: 3,
        automaticNameDelimiter: '~',
        name: true,
        cacheGroups: {
          styles: {
            name: 'styles',
            test: /\.css$/,
            chunks: 'all',
            enforce: true
          },
          vendors: {
            test: /[\\/]node_modules[\\/]/,
            name: 'vendors',
            chunks: 'all'
          }
        }
      }
    },
    plugins: [
      new CleanWebpackPlugin(DIST_PATH),
      new MiniCssExtractPlugin({
        // Options similar to the same options in webpackOptions.output
        // both options are optional
        filename: '[name].css',
      }),
      new webpack.HashedModuleIdsPlugin(),
      new ManifestPlugin(),
      new webpack.ProvidePlugin({
        jQuery: 'jquery',
        $: 'jquery',
      })
    ]
})

module.exports = config;
...