VueJS Webpack, куда добавлять плагины

Я хочу добавить веб-пакетпредоставленные плагины для глобального использования JQuery. В некоторых статьях говорится

You need to put it in webpack.config.js under plugins:[]

Но когда я смотрю на свой webpack.config.js, такого объекта plugins нет. Затем я вручную создаю объект plugins под массивом module.

После этого, когда я пытаюсь запустить проект с помощью npm run dev

он не работает. Я хочу добавить этот плагин к webpack.config.js

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

Как мне это сделать? Это мой файл webpack.config.js

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

module.exports = {
  entry: './src/main.js',
  output: {
    path: path.resolve(__dirname, './dist'),
    publicPath: '/dist/',
    filename: 'build.js'
  },
  module: {
    rules: [
      {
        test: /\.css$/,
        use: [
          'vue-style-loader',
          'css-loader'
        ],
      },      {
        test: /\.vue$/,
        loader: 'vue-loader',
        options: {
          loaders: {
          }
          // other vue-loader options go here
        }
      },
      {
        test: /\.js$/,
        loader: 'babel-loader',
        exclude: /node_modules/
      },
      {
        test: /\.(png|jpg|gif|svg)$/,
        loader: 'file-loader',
        options: {
          name: '[name].[ext]?[hash]'
        }
      }
    ]
  },
  plugins[
    new webpack.ProvidePlugin({
      $: 'jquery',
      jQuery: 'jquery'
    }),
    new webpack.ProvidePlugin({
  Vue: ['vue/dist/vue.esm.js', 'default']
})


],
  resolve: {
    alias: {
      'vue$': 'vue/dist/vue.esm.js'
    },
    extensions: ['*', '.js', '.vue', '.json']
  },
  devServer: {
    historyApiFallback: true,
    noInfo: true,
    overlay: true
  },
  performance: {
    hints: false
  },
  devtool: '#eval-source-map'
}

if (process.env.NODE_ENV === 'production') {
  module.exports.devtool = '#source-map'
  // http://vue-loader.vuejs.org/en/workflow/production.html
  module.exports.plugins = (module.exports.plugins || []).concat([
    new webpack.DefinePlugin({
      'process.env': {
        NODE_ENV: '"production"'
      }
    }),
    new webpack.optimize.UglifyJsPlugin({
      sourceMap: true,
      compress: {
        warnings: false
      }
    }),
    new webpack.LoaderOptionsPlugin({
      minimize: true
    })
  ])
}
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...
Безумие обратных вызовов в javascript [JS]
Безумие обратных вызовов в javascript [JS]
Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...
Система управления парковками с использованием HTML, CSS и JavaScript
Система управления парковками с использованием HTML, CSS и JavaScript
Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...
JavaScript Вопросы с множественным выбором и ответы
JavaScript Вопросы с множественным выбором и ответы
Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...
1
0
81
2
Перейти к ответу Данный вопрос помечен как решенный

Ответы 2

Попробуйте это в сборка / webpack.dev.conf.js и сборка / webpack.prod.conf.js:

plugins: [

  // ...

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

jQuery становится глобально доступным для всех ваших модулей:

Где находится папка сборки, я не могу найти ее в своем проекте. Я использую webpack-simple. Это причина? У меня есть папка dist. Но такого файла webpack.prod.conf.js нет.

Pathum Kalhan 22.03.2018 10:03

попробуйте в папке webpack.config.js

Yakalent 22.03.2018 10:39

Это мой вопрос, нет места, называемого плагинами, когда я создаю его вручную и пытаюсь запустить проект, который не запускается. См. Мой файл webpack.config.js

Pathum Kalhan 22.03.2018 10:56
Ответ принят как подходящий

Если вы быстро посмотрите документацию webpack для плагинов здесь, вы увидите, где находится объект plugins.

Хорошая новость: конфигурация вашего веб-пакета уже выглядит правильно - вы помещаете массив плагинов в качестве прямого дочернего элемента конфигурации после module, а не внутри него. Вы пропускаете только двоеточие : после plugins, что, вероятно, является опечаткой.

Так что я не вижу причины, что не должно работать.

=) Может в этом причина. Но даже если я исправлю это, даже после этого, это не сработает. Это дает мне ошибку. Модуль не найден: Ошибка: не удается разрешить "jquery". Я импортирую JQuery как CDN в свой index.html. Нужно ли мне устанавливать JQuery как npm

Pathum Kalhan 22.03.2018 15:52

Другие вопросы по теме