Почему jQuery не определено даже при добавлении его в качестве внешней зависимости с помощью Webpack 4 ProvidePlugin () во время производственной сборки? - PullRequest
Новая
       10

Почему jQuery не определено даже при добавлении его в качестве внешней зависимости с помощью Webpack 4 ProvidePlugin () во время производственной сборки?

0 голосов
/ 20 марта 2020

При создании веб-сайта с несколькими HTML страницами с использованием jQuery и Webpack 4 в консоли появляется сообщение о том, что jQuery не определено.

Я просто собираю данные c сайт, которому требуется jQuery как переменная $ глобально для выполнения простых функций в main.js файлах каждой html страницы. Поэтому вместо того, чтобы импортировать его повторно в каждый файл js, я использую webpack 4 ProvidePlugin, чтобы автоматически добавлять его к началу каждого файла.

Структура проекта перед сборкой выглядит следующим образом: 

directory
--src
----css
------main.css
----page1
------page1.css
------main.js
------index.html
----page2
------page2.css
------main.js
------index.html
--package.json
--webpack.dev.js
--webpack.prod.js

Вот мой package.json код: 

{
  ... ,
  "scripts": {
    ...
    "build": "webpack --config webpack.prod.js --mode production",
    ...
  },
  ... ,
  "devDependencies": {
    "@babel/core": "^7.8.7",
    "@babel/preset-env": "^7.8.7",
    "babel-loader": "^8.0.6",
    "clean-webpack-plugin": "^3.0.0",
    "css-loader": "^3.4.2",
    "html-webpack-plugin": "^3.2.0",
    "mini-css-extract-plugin": "^0.9.0",
    "optimize-css-assets-webpack-plugin": "^5.0.3",
    "style-loader": "^1.1.3",
    "terser-webpack-plugin": "^2.3.5",
    "webpack": "^4.42.0",
    "webpack-cli": "^3.3.11",
    "webpack-dev-server": "^3.10.3"
  },
  "dependencies": {
    "jquery": "^1.9.1",
    "normalize.css": "^8.0.1"
  }
}

В моем webpack.prod. js я использую webpack.ProvidePlugin вместе с externals для настройки jQuery в глобальном смысле: 

const path = require('path');
const webpack = require('webpack');
const { CleanWebpackPlugin } = require('clean-webpack-plugin');
const HtmlWebpackPlugin = require('html-webpack-plugin');
...
const buildPath = path.resolve(__dirname, 'dist');

module.exports = {
  devtool: 'source-map',
  entry: {
    page1: './src/page1/main.js',
    page2: './src/page2/main.js'
  },
  output: {
    filename: '[name].[hash:20].js',
    path: buildPath
  },
  module: {
    rules: [
      {
        test: /\.js$/i,
        exclude: /node_modules/,
        loader: 'babel-loader',
        options: {
          presets: ['@babel/preset-env']
        }
      },
      {
        test: /\.css$/i,
        use: [
          MiniCssExtractPlugin.loader,
          'css-loader'
        ]
      },
      {
        test: /\.(png|jpe?g|gif|svg)$/i,
        use: [
          {
            loader: 'url-loader'
          }
        ]
      }
    ]
  },
  externals: {
    'jquery': 'jQuery'
  },
  plugins: [
    new webpack.ProvidePlugin({
        $: 'jquery',
        jQuery: 'jquery',
        'window.jQuery': 'jquery'
    }),  
    new CleanWebpackPlugin(),
    new HtmlWebpackPlugin({
      template: './src/page1/index.html',
      inject: 'body',
      chunks: ['page1'],
      filename: 'index.html'
    }),
    new HtmlWebpackPlugin({
      template: './src/page2/index.html',
      inject: 'body',
      chunks: ['page2'],
      filename: 'page2.html'
    }),
    ...
  ],
  optimization: {
     ...
  }
};

Производственная сборка успешно завершена, но при предварительном просмотре в браузере я получаю ошибку jquery, как упоминалось выше. Кто-нибудь знает, в чем причина, пожалуйста, помогите?

...